By using the styled mode introduced in Highcharts 5, all styling is left in the hands of CSS. It’s important to note that when I say CSS styling, I mean styling in the most literal sense. Positioning and size properties cannot be altered through CSS, because Highcharts uses SVG to render charts. However, there are some simple tricks to control positioning and size as well that even designers can master in a few minutes, which we will touch on in a subsequent post.
Higcharts renders graphs using a W3C standard markup language called SVG (Scalable Vector Graphics), which all modern browsers handles beautifully. If you’re somewhat unfamiliar with SVG, let me assure you: It’s not that different from HTML. In fact, both HTML and SVG is based on XML, and SVG images can be marked up directly into HTML with the
<svg> tag. The syntax is therefore exactly the same as HTML, but with different tag names and properties:
Try it out with your browser’s page inspector, like the Firefox Inspector. It’s basically HTML (I mean, it’s not, but you get the point), but with different properties like ‘fill’ instead of ‘background’. Here’s another example:
Here the attributes
stroke are used to style the fill color and stroke. In CSS, that can be expressed like this:
Styling charts with CSS works the same way, and HC5 makes that easier by creating helpful classes to elements, such as
.highcharts-data-label for data labels,
.highcharts-point for each data point and
.highcharts-point-select for the points which are currently selected. Below is an example which imports the default styling from highcharts.css, and overrides the design for selected points:
You can also create a completely blank CSS for charts, which can be especially interesting for creating CSS themes and templates, by simply not importing the default styling file. Below is a rough adaptation of the Dark Unica theme in CSS, which is based on editing the default styling:
In fact, if you supply no CSS at all, the chart will be rendered as a black box, which is the default styling for SVG elements:
Whether you want to change a small detail in a single chart, or you wish to create a custom theme for all charts, Highcharts is going to make that easier for web designers and anyone with a little love for styling with CSS.