Tutorials

Drawing With Data: Part 1

by

Nancy Dillon

6 minutes read

A bunch of shapes drawn with area spline ranges series

Drawing with data seems like an exercise in overkill, especially in the age of AI-powered image creation and editing. It’s a manual process that involves a lot of trial and error, and the end result is the same as something you could do in minutes using a basic drawing tool. So why do it? Because it’s a fun and challenging way to learn the ins and outs of some of Highcharts’ coolest features.

Inspiration

A few years ago, I worked on a chart animation that included a network graph. I always liked the way the simulated forces of the graph’s layout algorithm caused its nodes and links to undulate, like a graceful jellyfish-octopus hybrid. So I decided to resurrect this shy creature and create an underwater world for it using some of my favorite Highcharts series types and features.

For inspiration, I grabbed a screenshot from an episode of Jungle Beat, an animated series about different animals and their adventures. This particular episode happens to be about an “outstanding octopus.”

The shapes of the underwater foliage, sand and sunbeams are pretty basic, and I like the use of atmospheric perspective, where stuff in the background appears fuzzy and darker than the stuff in the foreground.

I then created a less-detailed sketch of the screenshot (on the right below) to make it easier to draw. This image will serve as a traceable template for my underwater chart art scene.

Setting Up The Chart

To prep for drawing, I set up a basic chart configuration, disabled the credits and legend and set the title text to null. I also set the chart margins to 0 so my scene will extend to the edges of my chart container.

I then add an xAxis and yAxis, each with a min of 0 and a max of 20. Establishing these min/max ranges provides a predictable scale that helps me position my drawing’s data points.

Finally, I set the plotBackgroundImage to the sketch I made based on the Jungle Beat screenshot.

const chart = Highcharts.chart('container', {
	chart: {
    	    plotBackgroundImage: 'sea.png',
    	    margin: 0
	},
	legend: {
    	    enabled: false
	},
	credits: {
    	    enabled: false
	},
	title: {
    	    text: null
	},
	xAxis: [
    	{
        	min: 0,
        	max: 20,
        	visible: false
    	}
	],
	yAxis: [
    	{
        	min: 0,
        	max: 20,
        	visible: false
    	}
	],
	series: [ ]
});

One final tip: I recommend assigning a fixed height and width to the chart container div. This ensures the positions of the points will be consistent, making it easier to draw.

Here’s my setup:

See the Pen <a href="https://codepen.io/nasin/pen/WNWNzNB"> Jellypus 1</a> by Nancy Dillon (<a href="https://codepen.io/nasin">@nasin</a>) on <a href="https://codepen.io">CodePen</a>.

The Best Series for the Scene

With my basic chart configuration in place, I’m almost ready to start drawing. But what’s the best series to use to recreate the smooth curves of my underwater scene? I’m thinking areasplinerange.

In any range series, each data point has three values: an x-axis value and two y values that denote the high and low points of a range.

When connected, these points form a shaded area that visualizes the span between the high and low values, illustrating the data’s variability over time and helping to identify trends and statistical outliers.

In an area spline range series, the points connect through a spline curve, where the curve’s shape is influenced by the high and low ranges of individual points, as well as the difference between consecutive points. These smooth curves are ideal for creating the soft shapes of my underwater scene.

Drop Some Points

To get started, I create an areasplinerange series and populate it with three data points that somewhat correspond to the left-most shape in my sketch.

 {
     type: 'areasplinerange',
     data: [{
             x: 0.5,
             low: 2,
             high: 15
         },
         {
             x: 1,
             low: 3,
             high: 18
         },
         {
             x: 2,
             low: 4,
             high: 20
         }
     ]
 }

See the Pen <a href="https://codepen.io/nasin/pen/jOROorp"> Jellypus 2</a> by Nancy Dillon (<a href="https://codepen.io/nasin">@nasin</a>) on <a href="https://codepen.io">CodePen</a>.

The results are pretty good but not there yet. Using trial and error to manually position each point will take a while, so I’m going to use Highcharts’ dragDrop feature to quickly position my points.

To enable drag and drop functionality in my chart, I’ll add the draggable points JavaScript module to my HTML file.

<script src="https://code.highcharts.com/modules/draggable-points.js"></script&gt

Then, I’ll add the plotOptions object to my chart configuration and create a series entry for which I’ll enable dragDrop and set draggableY and draggableX to true.

plotOptions: {
    series: {
        dragDrop: {
            draggableX: true,
            draggableY: true
        }
    }
}

Now, I can easily drag the points where they need to be. I just need an easy way to see the modified point data.

Fixed-Position Tooltips

To make it easy to gather the new x and y values of my dragged points, I’ll set my tooltip to a fixed position.

To position my tooltip, I’ll use the tooltip.positioner function to return fixed x and y coordinates.

tooltip: {
    positioner: function() {
        return {
            x: 20,
            y: 20
        };
    },
}

Let’s Drawg

With my first underwater tree traced, I add as many areasplinerange series as I need for the other trees and use the “drawg” method to drag the points into place and adjust their x and y values based on the info gathered from the fixed-position tooltip.

To make sure I’ve traced everything, I remove my plotBackgroundImage. Here’s my drawing so far.

See the Pen <a href="https://codepen.io/nasin/pen/wvZvbmX"> Jellypus 4</a> by Nancy Dillon (<a href="https://codepen.io/nasin">@nasin</a>) on <a href="https://codepen.io">CodePen</a>.

Some helpful tips

Here are some helpful tips for making the “drawg” process as frustration free as possible.

Work with one series at a time.

Point dragging becomes confusing when dealing with multiple series.

To alleviate distractions, I set each series’ enableMouseTracking property to false once I’m done dragging its points into place. This disables all events triggered by mouse interactions (like point hover effects and tooltip display), making it easier to concentrate on the series I’m working with.

Sometimes, the tooltip gets in the way

Even though it’s in a fixed position, the tooltip sometimes obscures my view. To fix this, I assign my chart configuration to a global variable called “chart” that I can invoke in my browser console. This way, I can easily turn the tooltip on and off without having to constantly change my chart configuration code.

chart.update({tooltip:{enabled: false}})

Conclusion

In this article, we drew some weird shapes with several areasplinerange series and made good use of Highcharts’ draggable points module and fixed-position tooltips and learned how to disable mouse events.

In the next tutorial, I will introduce you to Highcharts’ styledMode, a cool feature that deactivates configuration styling options so you can control the look and feel of your chart with just CSS. We will use it to transform our amorphous area spline range series into underwater trees and add some atmospheric effects.