You no longer need to be a developer to style interactive charts. With Highcharts 5, charts can be styled with CSS (or any CSS preprocessor). If you’re a web designer and/or think like me, then separating structure and design is a much more familiar approach than cluttering HTML or JavaScript with design. In this post, I’ll be using CodePen for examples, so please feel free to mess around with them, and make your own forks.
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.
STYLING SVG
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:
See the Pen SVG Example by Lars Cabrera (@larsac07) on CodePen.
Here the attributes fill
, stroke-width
and stroke
are used to style the fill color and stroke. In CSS, that can be expressed like this:
See the Pen SVG Example – with CSS by Lars Cabrera (@larsac07) on CodePen.
STYLING HIGHCHARTS
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:
See the Pen Highcharts CSS Example by Lars Cabrera (@larsac07) on CodePen.
CREATE THEMES
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:
See the Pen Highcharts CSS Example without default style by Lars Cabrera (@larsac07) on CodePen.
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:
See the Pen Highcharts CSS without styling by Lars Cabrera (@larsac07) on CodePen.
SUMMARY
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.
Comments
Alejandro Orduz | 7 years ago
wow, this is what kept me out from others data visualisation tools, having full control over the GUI,
testing it now… 🙂
ExtremRaym | 7 years ago
Thanks for the explanation !
I can see it especially useful when data are loaded with data.js and not defined in the JavaScript, especially if there is multiple graph on the same page.
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.