by Torstein Hønsi
Highcharts 5 introduces styled mode, a separate branch with a clear separation of concerns. While the functionality is set up in the API options, the styling is set by CSS. In this mode, presentational styles from the API are no longer supported, but are replaced by CSS strokes, stroke-widths, fills etc. The classic mode is still unaltered and available from the same locations on code.highcharts.com. See also creating your own themes with SCSS.
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-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.
.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.
.highcharts-background
A rectangle for the chart background. Use it to set background fills or strokes. Replaces chart.backgroundColor, chart.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.
.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.
.highcharts-button
Used for the wrapping group of the exporting button, range selector buttons in Highstock etc.
.highcharts-button-symbol
The symbol for the exporting button, can be used to set stroke and fill etc.
.highcharts-candlestick-series .highcharts-point-up
.highcharts-candlestick-series .highcharts-point-down
Rules to differentiate between up or down points in Highstock candlesticks.
.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.
.highcharts-contextbutton
The context button with a burger menu for the exporting module. Replaces visual options for exporting.buttons.contextButton and navigation.buttonOptions.theme.
.highcharts-credits
The credits label, normally found in the lower right corner of the chart. Replaces credits.style and more.
.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.
.highcharts-crosshair-label
The label next to the crosshair in Highstock.
.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.
.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.
.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.color, plotOptions.series.lineWidth, plotOptions.series.dashStyle.
.highcharts-grid-line
Styling for grid lines. Replaces gridLineWidth and gridLineColor.
.highcharts-halo
The halo appearing around the hovered point.
.highcharts-legend-box
The box and border for the legend. Replaces legend.backgroundColor, legend.borderColor and legend.borderWidth.
.highcharts-legend-item
Styles for each individual legend item. Replaces legend.itemStyle, and legend.itemHoverStyle when the :hover pseudo-class is added.
.highcharts-legend-item-hidden
A legend item for a hidden series or point. Replaces legend.itemHiddenStyle.
.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.
.highcharts-legend-nav-inactive
The inactive arrow of the legend navigation. Replaces legend.navigation.inactiveColor.
.highcharts-legend-title
The legend title. Use this CSS rule for text styling. Replaces legend.title.style.
.highcharts-loading
The loading overlay. Replaces loading.style as well of the show and hide duration.
.highcharts-loading-inner
The inner div of the loading label. Replaces loading.labelStyle.
.highcharts-minor-grid-line
Replaces axis.minorGridLineColor and axis.minorGridLineWidth.
.highcharts-navigator-handle
.highcharts-navigator-handle-left
.highcharts-navigator-handle-left
Fills and strokes for the navigator handles in Highstock. Replaces navigator.handles.backgroundColor and navigator.handles.borderColor.
.highcharts-navigator-mask-outside
.highcharts-navigator-mask-inside
Styles for the navigator mask in Highstock, the shaded element that shows the selected area. Replaces navigator.maskFill.
.highcharts-navigator-outline
Styles for the Highstock navigator outline, a path element that highlights the zoomed area. Replaces navigator.outlineColor and navigator.outlineWidth.
.highcharts-navigator-series
Styles for the navigator series in Highstock. 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.
.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 Highstock OHLC series.
.highcharts-pane
For pane backgrounds in radial charts. Replaces backgrounds and borders under the pane.background option set.
.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.
.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.
.highcharts-menu
The container of the context menu. Replaces navigation.menuStyle.
.highcharts-menu-item
The list items in the context menu. Replaces navigation.menuItemStyle. Use the :hover pseudo-class to replace navigation.menuItemHoverStyle.
.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.
.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 Highstock. Use input.highcharts-range-selector for the HTML input (when the boxes are active). Replaces rangeSelector.inputStyle.
.highcharts-range-label
Styles for the Highstock range selector labels saying "Zoom", "From" and "To". Replaces rangeSelector.labelStyle.
.highcharts-range-selector-buttons
Top level group for the Highstock range selector buttons. Replaces rangeSelector.buttonTheme.
.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.
.highcharts-scrollbar
.highcharts-scrollbar-arrow
.highcharts-scrollbar-button
.highcharts-scrollbar-rifles
.highcharts-scrollbar-thumb
.highcharts-scrollbar-track
Styles for the Highstock 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.
.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 cursor, dashstyle, pie series, polygon series, waterfall 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.
.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.
.highcharts-title
Text styles for the title. Replaces title.style.
.highcharts-tooltip
.highcharts-tooltip-box
.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.
.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.