Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Customer Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Getting Started
    • System requirements
    • Installation
    • Install from npm
    • Install from Bower
    • Your first chart
    • How to set options
    • Frequently asked questions
    • How to create custom Highcharts files
    • Optional Dependencies
    • Compatibility
  • Chart concepts
    • Understanding Highcharts
    • Understanding Highstock
    • Title and subtitle
    • Axes
    • Series
    • Tooltip
    • Legend
    • Range selector
    • Navigator
    • Scrollbar
    • Plot bands and plot lines
    • Zooming
    • Labels and string formatting
    • Drilldown
    • 3D charts
    • Accessibility
    • Responsive
  • Maps
    • Getting started
    • Map navigation
    • Color axis
    • Map collection
    • Custom maps
    • Custom GeoJSON maps
    • Adding points and lines
    • Latitude/longitude
  • Chart and series types
    • Chart types
    • Combining chart types
    • Angular gauges
    • Area chart
    • Areaspline chart
    • Axis resizer
    • Bar chart
    • Bell curve series
    • Box plot series
    • Bullet chart
    • Candlestick chart
    • Column chart
    • Error bar series
    • Flag series
    • Funnel series
    • Heat map series
    • Histogram Series
    • Line chart
    • OHLC chart
    • Parallel Coordinates Chart
    • Pareto Chart
    • Pie chart
    • Polar chart
    • Range series
    • Sankey diagram
    • Scatter chart
    • Spline chart
    • Stream graph
    • Sunburst series
    • Technical Indicator Series
    • Tilemap Series
    • Treemap
    • Variable Radius Pie chart
    • Variwide chart
    • Vector plot
    • Waterfall series
    • Wind barbs series
    • Word Cloud series
    • X-range series
  • Advanced chart features
    • Annotations module
    • Annotations and Fibonacci Retracements
    • Boost module
    • Custom technical indicators
    • Data grouping
    • Freeform drawing
    • Internationalization
    • Stacking charts
  • Export module
    • Export module overview
    • Client side export
    • Setting up your own server
    • Command Line Rendering
    • Terms
  • Working with data
    • Data intro
    • Data module
    • Custom preprocessing
    • Live data
    • Data from a database
    • Getting data across domains (JSONP)
  • Chart design and style
    • Design and style
    • Colors
    • Themes
    • Styled mode
    • Custom themes in Styled Mode
    • Gradients, shadows and patterns
  • Extending Highcharts
    • Extending Highcharts

Styled mode - styling by CSS

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.

WHAT FILES TO USE

  • The files for classic mode are available on root and directly under each version folder on code.highcharts.com.
  • The JavaScript files for styled mode are available under the /js/ folder on code.highcharts.com and under each version folder. In these files, most presentational code is removed, so without styling it will draw an ugly black-and-white chart if anything.
  • The default CSS file for styled mode is available as /css/highcharts.css on the root of code.highcharts.com as well as under version folders. This CSS is in turn based on a SCSS file, highcharts.scss. To experiment with this live, see our example with SCSS parsing on Codepen.

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

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

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.color, plotOptions.series.lineWidth, plotOptions.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.backgroundColor, legend.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 Highstock. 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 Highstock, the shaded element that shows the selected area. Replaces navigator.maskFill.

View live demo.

 

.highcharts-navigator-outline

Styles for the Highstock 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 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. 

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 Highstock 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 Highstock. 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 Highstock range selector labels saying "Zoom", "From" and "To". Replaces rangeSelector.labelStyle.

View live demo.

 

.highcharts-range-selector-buttons

Top level group for the Highstock 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 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.

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

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

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.

© 2018 Highcharts. All rights reserved.