Designers rejoice: CSS Styling for JavaScript charts

Painting, kandinsky schwarz und violett

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:

Highcharts SVG in Firefox Inspector

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.