Style by CSS#

Highcharts optionally features styled mode, where the graphic design is clearly separated from the chart functionality.

When the chart.styledMode option is true, no presentational attributes (like fill, stroke, font styles etc.) are applied to the chart SVG. Instead, the design is applied purely by CSS.

Highcharts comes with a default CSS file, css/highcharts.css, which is built from SCSS.

To customize your styles, you can create your own themes with SCSS, or just add your own individual CSS rules. See our CodePen boilerplate to experiment with the default SCSS.

Upgrade note#

Prior to Highcharts v7, styled mode was served as a separate set of files. Instead of an option chart.styledMode, styled mode was enabled by loading files from the /js/ folder on code.highcharts.com, in the zip file and in the npm package. These files are no longer maintained.

WHAT CSS RULES APPLY#

Depending on how you prefer to work, you can use the browser's developer console to select SVG elements in the chart and see what CSS rules apply to it. But beware that (as of 2016) Firefox does this best. Chrome and Safari doesn't show all affected rules for SVG elements.

In addition to these, most elements, especially those where you can add multiple items, like axes, series, points etc, have a className option. Use this to apply specific styling. An example can be seen for axis styling.

The following is an overview of what CSS rules are internally set on the Highcharts SVG elements and how to use them. 

.highcharts-alternate-grid

Alternate grid bands on an axis. To activate alternate grid bands in styled mode, set xAxis.alternateGridColor to true in the settings, then apply a fill in CSS.

.highcharts-area

The area under an area series. Use the parent item, .highcharts-series including series type, index or individual class name, to identify specific series. Replaces plotOptions.area.fillColor and plotOptions.area.fillOpacity.

.highcharts-axis

The top group for axis. In addition to this class name, the group will have .highcharts-xaxis.highcharts-yaxis or .highcharts-coloraxis class names. A custom class name can be set by the className option. For individually styling other axis elements, use the top group to differentiate.

View live demo.

.highcharts-axis-labels

Replaces axis.labels.style. Use .highcharts-xaxis / .highcharts-yaxis parent items or className options to distinguish axes.

.highcharts-axis-title

Text styles for the axis title. Replaces axis.title.style.

View live demo.

.highcharts-background

A rectangle for the chart background. Use it to set background fills or strokes. Replaces chart.backgroundColorchart.borderColor and chart.borderWidth options. Backgrounds can also be set on the container div, but in that they will not be part of the exported chart.

View live demo.

.highcharts-boxplot-series
.highcharts-boxplot-box
.highcharts-boxplot-median
.highcharts-boxplot-stem
.highcharts-boxplot-whisker

The various graphic items for box plot series. The box, median, stem and whisker are nested inside the series group. Replaces colors, stroke widths and dash style options for box plots.

View live demo.

.highcharts-button

Used for the wrapping group of the exporting button, range selector buttons in Highcharts Stock etc.

.highcharts-button-symbol

The symbol for the exporting button, can be used to set stroke and fill etc. 

View live demo.

.highcharts-candlestick-series .highcharts-point-up
.highcharts-candlestick-series .highcharts-point-down

Rules to differentiate between up or down points in Highcharts Stock candlesticks.

View live demo.

.highcharts-color-{n}

Colors used for series, or individual points when colorByPoint is set, typically for pie charts etc. Each such color rule sets the fill and stroke to a default color in highcharts.css, then these properties may be overridden by more specific rules, for example for a common stroke on pies. The best place to set your own custom colors is by modifying highcharts.css/highcharts.scss, otherwise the strokes and fills must be set more specifically. Replaces colors.

View live demo.

.highcharts-contextbutton

The context button with a burger menu for the exporting module. Replaces visual options for exporting.buttons.contextButton and navigation.buttonOptions.theme.

View live demo.

.highcharts-credits

The credits label, normally found in the lower right corner of the chart. Replaces credits.style and more.

View live demo

.highcharts-crosshair

Styles for the crosshair extending from the axis to the currently highlighted point. Styling can also be differentiated by .highcharts-crosshair-category or .highcharts-crosshair-thin.

View live demo.

.highcharts-crosshair-label

The label next to the crosshair in Highcharts Stock. 

View live demo.

.highcharts-data-label

The data label. Use .highcharts-data-label-box to style the border or background, and .highcharts-data-label text for text styling. Use the dataLabels.className option to set specific class names for individual items. Replaces background, border, color and style options for series.dataLabels.

View live demo.

.highcharts-drilldown-axis-label

Styles for a drillable category axis label. Replaces drilldown.activeAxisLabelStyle.

.highcharts-drilldown-data-label text

Styles for a drillable data label. Replaces drilldown.activeDataLabelStyle.

.highcharts-drillup-button

Styles for the drill-up button. Replaces drilldown.drillUpButton.theme.

.highcharts-gauge-series .highcharts-dial
.highcharts-gauge-series .highcharts-pivot

Styles for the dial and pivot of gauge series. Replaces border and background options for plotOptions.gauge.dial and plotOptions.gauge.pivot.

View live demo.

.highcharts-graph

The graph of a line or line-like series. Use the parent item, .highcharts-series including series type, index or individual class name, to identify specific series. Replaces plotOptions.series.colorplotOptions.series.lineWidthplotOptions.series.dashStyle.

.highcharts-grid-line

Styling for grid lines. Replaces gridLineWidth and gridLineColor.

View live demo.

.highcharts-halo

The halo appearing around the hovered point.

.highcharts-legend-box

The box and border for the legend. Replaces legend.backgroundColorlegend.borderColor and legend.borderWidth.

View live demo.

.highcharts-legend-item

Styles for each individual legend item. Replaces legend.itemStyle, and legend.itemHoverStyle when the :hover pseudo-class is added.

View live demo.

.highcharts-legend-item-hidden

A legend item for a hidden series or point. Replaces legend.itemHiddenStyle.

View live demo.

.highcharts-legend-navigation

Styles for the navigation part of the legend, the arrow up and down and the text x/n. Use this to set text styles. Replaces legend.navigation.style.

.highcharts-legend-nav-active

The active arrow of the legend navigation. Replaces legend.navigation.activeColor.

View live demo.

.highcharts-legend-nav-inactive

The inactive arrow of the legend navigation. Replaces legend.navigation.inactiveColor.

View live demo.

.highcharts-legend-title

The legend title. Use this CSS rule for text styling. Replaces legend.title.style.

View live demo.

.highcharts-loading

The loading overlay. Replaces loading.style as well of the show and hide duration.

View live demo.

.highcharts-loading-inner

The inner div of the loading label. Replaces loading.labelStyle.

View live demo.

.highcharts-minor-grid-line

Replaces axis.minorGridLineColor and axis.minorGridLineWidth.

View live demo.

.highcharts-navigator-handle
.highcharts-navigator-handle-left
.highcharts-navigator-handle-left

Fills and strokes for the navigator handles in Highcharts Stock. Replaces navigator.handles.backgroundColor and navigator.handles.borderColor.

View live demo.

.highcharts-navigator-mask-outside
.highcharts-navigator-mask-inside

Styles for the navigator mask in Highcharts Stock, the shaded element that shows the selected area. Replaces navigator.maskFill.

View live demo.

.highcharts-navigator-outline

Styles for the Highcharts Stock navigator outline, a path element that highlights the zoomed area. Replaces navigator.outlineColor and navigator.outlineWidth.

View live demo.

.highcharts-navigator-series

Styles for the navigator series in Highcharts Stock. Replaces options like lineWidth, fillOpacity and color for the navigator series.

.highcharts-negative

A class given to negative parts of the graph, area and individual points if the negativeColor option is set to true. 

View live demo.

.highcharts-no-data

Styles for the label shown when no data is present in the chart (requires the no-data-to-display module). Replaces noData.style.

.highcharts-null-point

Styles for null points in maps or heat maps. Replaces plotOptions.map.nullColor.

.highcharts-ohlc-series .highcharts-point-up
.highcharts-ohlc-series .highcharts-point-down

Rules to differentiate between up or down points in Highcharts Stock OHLC series.

View live demo.

.highcharts-pane

For pane backgrounds in radial charts. Replaces backgrounds and borders under the pane.background option set.

View live demo.

.highcharts-plot-background

A rectangle for setting fills on the plot area. Unlike .highcharts-plot-border, this element is drawn behind the grid, so it shouldn't be used to give the plot area a stroke.  Replaces chart.plotBackgroundColor.

View live demo.

.highcharts-point
.highcharts-point-hover
.highcharts-point-select

Styles for each point. Use the parent item, .highcharts-series including series type, index or individual class name, to identify specific series. Use an individual className option for each point to style single points.

View live demo.

.highcharts-menu

The container of the context menu. Replaces navigation.menuStyle.

View live demo.

.highcharts-menu-item

The list items in the context menu. Replaces navigation.menuItemStyle. Use the :hover pseudo-class to replace navigation.menuItemHoverStyle.

View live demo.

.highcharts-plot-band

Style the plot bands. Use the className option on each band to distinguish them. Replaces color and border options for the plot band.

.highcharts-plot-band-label

Style the plot band labels. Use the className option on each band to distinguish them. Replaces the plotBands.label.style option.

.highcharts-plot-border

A rectangle for setting a stroke on the plot area. Unlike .highcharts-plot-background, this element is drawn in front of the grid. Replaces chart.plotBorderColor and chart.plotBorderWidth.

View live demo.

.highcharts-plot-line

Style the plot lines. Use the className option on each line to distinguish them. Replaces color, dashStyle and width options for the plot line.

.highcharts-plot-line-label

Style the plot line labels. Use the className option on each line to distinguish them. Replaces the plotLines.label.style option.

.highcharts-range-input text

Text styling for the range selector input boxes in Highcharts Stock. Use input.highcharts-range-selector for the HTML input (when the boxes are active). Replaces rangeSelector.inputStyle.

View live demo.

.highcharts-range-label

Styles for the Highcharts Stock range selector labels saying "Zoom", "From" and "To". Replaces rangeSelector.labelStyle.

View live demo.

.highcharts-range-selector-buttons

Top level group for the Highcharts Stock range selector buttons. Replaces rangeSelector.buttonTheme.

View live demo.

.highcharts-root

Matches the root svg element of the chart. Use this to set styles that should be inherited by all elements, like font-family or other text styles. 

View live demo.

.highcharts-scrollbar
.highcharts-scrollbar-arrow
.highcharts-scrollbar-button
.highcharts-scrollbar-rifles
.highcharts-scrollbar-thumb
.highcharts-scrollbar-track

Styles for the Highcharts Stock scrollbar. The thumb is the actual bar. The buttons are in each end, and each has an arrow inside it. The rifles are the small strokes on the center of the bar.

View live demo.

.highcharts-series

General styling for all series. To apply styling to only a specific series type, you can define CSS rules for .highcharts-{type}-series, for example .highcharts-area-series or .highcharts-bar-series. To make specific styling for one single series, you can define CSS rules for .highcharts-series-{n} where n is the index, or give the series a className option.

Live demo of cursordashstylepie seriespolygon serieswaterfall series.

.highcharts-selection-marker

The rectangle that appears when mouse-dragging for zooming. Replaces chart.selectionMarkerFill.

.highcharts-stack-label

Text styles for stack labels. Replaces yAxis.stackLabels.style.

.highcharts-subtitle

Text styles for the subtitle. Replaces subtitle.style.

View live demo.

.highcharts-tick

Styles for the tick marks along the axis. Replaces axis.tickColor and axis.tickWidth. Use .highcharts-xaxis / .highcharts-yaxis parent items or className options to distinguish axes.

View live demo.

.highcharts-title

Text styles for the title. Replaces title.style.

View live demo.

.highcharts-tooltip
.highcharts-tooltip-box
.highcharts-tooltip text
.highcharts-tooltip-header

Styles for the tooltip. The tooltip box is the shape or path where the background and border can be set. Text styles should be applied to the text element.

View live demo.

.highcharts-zone-{n}

When zones are applied, each zone is given a class name with its index. A custom className option can also be set in the zone options. Replaces the color, dashStyle and fillColor options for zones.

View live demo.