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.


Typography, colors and visual properties like stroke width and style can be set by CSS.

However, layout and positioning of elements like the title or legend can not be controlled by CSS. This is a limitation of CSS for SVG, that does not (yet) allow geometric attributes like x, y, width or height. And even if those were settable, we would still need to compute the layout flow in JavaScript. Instead, positioning is subject to Highcharts JavaScript options like align, verticalAlign etc.


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. 


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.


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.


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.


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


Text styles for the axis title. Replaces

View live demo.


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.


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.


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


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-hollowcandlestick-series .highcharts-point-down
.highcharts-hollowcandlestick-series .highcharts-point-down-bearish-up
.highcharts-hollowcandlestick-series .highcharts-point-up

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

View live demo.


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.


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.


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

View live demo


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.


The label next to the crosshair in Highcharts Stock. 

View live demo.


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.


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

.highcharts-drilldown-data-label text

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


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.


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.


Styling for grid lines. Replaces gridLineWidth and gridLineColor.

View live demo.


The halo appearing around the hovered point.


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

View live demo.


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

View live demo.


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

View live demo.


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


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

View live demo.


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

View live demo.


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

View live demo.


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

View live demo.


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

View live demo.


Replaces axis.minorGridLineColor and axis.minorGridLineWidth.

View live demo.


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

View live demo.


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

View live demo.


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

View live demo.


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


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

View live demo.


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


Styles for null points in maps or heat maps. Replaces

.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.


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

View live demo.


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.


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.


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

View live demo.


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

View live demo.


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


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


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.


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


Style the plot line labels. Use the className option on each line to distinguish them. Replaces the 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.


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

View live demo.


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

View live demo.


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.


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.


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.


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


Text styles for stack labels. Replaces


Text styles for the subtitle. Replaces

View live demo.


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.


Text styles for the title. Replaces

View live demo.

.highcharts-tooltip text

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.


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.

Compatibility 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, in the zip file and in the npm package. These files are no longer maintained.