Designers rejoice: CSS Styling for JavaScript charts

Datetime:2016-08-23 03:04:18          Topic: CSS  JavaScript           Share

Posted on July 07, 2016 by Lars Cabrera . Last modified on July 07, 2016.

You no longer need to be a developer to style interactive charts. With the coming Highcharts 5, charts can be styled with CSS (or any CSS preprocessor). You can already try this out with the Highcharts 5 Developer Preview . 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 new styled mode, you’re using a separate branch of the Highcharts library, where 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 fromhighcharts.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 .





About List