Drawing with Data: Part 2

Close-up of an in-preogress chart drawing of an under water sea forest

In part 1 of our drawing with data tutorial, we began constructing an underwater world for a shy network-graph sea creature, A.K.A the Jellypus.

We drew numerous trees using a bunch of areasplinerange series and positioned their points via Highcharts’ draggable points module.  Now it’s time to transform them into an underwater forest using CSS and Highcharts’ styledMode.

It’s alway darkest before the CSS

To start, let’s set the styledMode of the chart object to true.

chart: {
 	styledMode: true,
	margin: 0
}

Here’s the result:

What happened? Everything’s black. That’s because enabling styledMode disables all the SVG styling attributes defined in the chart configuration. To get the chart back to the way it was, we need to style our chart elements with CSS.

Why use CSS?

There are numerous benefits to styling a chart with just CSS. Separating the presentation styles from the configuration code makes both easier to maintain and ensures consistency across all of your css-styled data visualizations.

Also, styling with CSS offers more intuitive control when it comes to fill colors and opacities, stroke colors and widths, custom typography and more. CSS also lets you fine tune the way these attributes transform and animate with individual precision.

Note that although you cannot control the layout and position of elements with CSS properties like top and left, you can transform their positions via CSS’s translate function. We’ll get into that later.

Back from black

To return the chart to the way we started, I’ll import Highcharts’ default CSS into my CSS file.

@import url(“https://code.highcharts.com/css/highcharts.css");

 

Bam! Our weird area spline range shapes are back!

If you look in highcharts.css, you’ll notice that every chart element, from individual series to axes lines, has a style. To overwrite these styles, all I have to do is create my own versions of them in my CSS file.

For example, the chart background color is controlled by the class .highcharts-background. To change it, I’ll add .highcharts-background to my CSS file and and set the fill attribute to #448daa.

You can also create your own classes and apply them to chart elements in your configuration file via the className option.

I’ll do this for the trees by creating two classes called .tree and .tree-dark and apply them to the appropriate area spline range series using the className option.

{
  	type: "areasplinerange",
  	enableMouseTracking: false,
  	className: "tree-dark",
…

I’ll do the same for the sand by creating two classes called .sand and .sand-highlight (for the brighter patches of sand) and apply them to the appropriate areasplinerange series.

That looks pretty good. Time to add the sunbeams.

Let there be light

I’ll add the sunbeams to the chart using several line series. But before I start, I want to set enableMouseTracking to false on my areasplinerange series so I don’t accidentally drag points out of place while I position my sunbeams.

In the last tutorial, I discussed disabling  mouse events on an individual series. Since I want to turn off mouse tracking for all areasplinerange series, I’ll create an areasplinerange object under plotOptions in my chart configuration and set enableMouseTracking to false.

plotOptions: {
    	arearangespline: {
        enableMouseTracking: false
     }
…

If you need to override this setting for a single areasplinerange series,  you can do so by setting enableMouseTracking to true on the individual series.

Back to the sunbeams…

Based on my sketch, I need at least five sunbeams. They should start from the top right of the chart and end somewhere in the patch of highlighted sand at the bottom middle. Using the “drawg” method, I’ll take a guess at each line’s x and y values, and then drag them into place and add the revised data to each line series.

When I’m done, my sunbeams look like this:

Next, I’ll give all my lines a className of .beam, except for the middle one which I’ll give a className of .beam-thick because I want to make it wider than the other four. Then I’ll add my beam classes to my CSS and set their stroke widths, colors and opacities accordingly.

My sunbeams need to look more ethereal. To accomplish this, I’ll create an SVG gradient to use as their fill color.

SVG Gradients in Styled Mode

Normally, to apply a gradient to chart elements, you would define it using Highcharts’ linearGradient or radialGradient object and assign it to the color property of the chart element you want to fill. But since we’re using styledMode, chart configuration styles no longer apply, and we must style everything using CSS.

However, there’s a  problem with this approach. SVG does not support CSS’s gradient capabilities. So I need to define my gradient as SVG code and then reference it in my CSS via its ID property.

To do this, I’ll define an SVG gradient in my chart configuration inside a defs object.

defs: {
    gradient0: {
        tagName: 'linearGradient',
        id: 'sunbeam',
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1,
        children: [{
                tagName: 'stop',
                offset: 0
            },
            {
                tagName: 'stop',
                offset: 0.6
            },
            {
                tagName: 'stop',
                offset: 1
            }
        ]
    }
}

This code creates a linearGradient element with an id of “sunbeam” that has three nested stop elements with various offsets.

Then in my CSS, I’ll define styles for my stops.

#sunbeam stop {
    stop-color: #fce5af;
}

#sunbeam stop[offset="0"] {
    stop-opacity: 1;
}

#sunbeam stop[offset="0.6"] {
    stop-opacity: 0.6;
}

#sunbeam stop[offset="1"] {
    stop-opacity: 0;
}

Finally, to introduce some atmospheric perspective, I’ll apply a subtle CSS blur filter to the darker trees and the sandy bottom. Here is the result:

Conclusion

In this article, we used styledMode and CSS to transform our area spline range series into an underwater forest. We also learned how to define an SVG gradient in our chart configuration using the defs object and apply it to our five lines series to create ethereal sunbeams.

In the next tutorial, we will summon the Jellypus and add it to the scene.