DEV Community

Agata
Agata

Posted on

Hole in Highchart Stacked Chart

Sample problem

Let's imagine we want to create a stacked chart showing a state of a group of 30 robots. Some robots are working (live state), some are switched off (dead state).
Let's have two series for both states:

  • Live series: [[t1, 30], [t2, 0], [t3, 30]]
  • Dead series: [[t2, 30]]

We want to catch on the graph the moment t2, when robots are in dead state. Let's see what we get on the graph:
No data painted for red series?
We don't see any data for red "dead" series. When we hover over the chart we can find the point when all robots are in dead state, but it's not visible for us at the first glance.

Link to live example

Reason

Let's analyze our points on the following picture.
Reason - the series has only one data point
By default, Highcharts don't show single data points. That's why the red "dead" series is not visible.

Solution

If we have in one series more than one point, then it will be displayed. For example, we could add to red series the follwing points to get the desired shape:

  • Dead series: [[t1, 0], [t2, 30], [t3, 0]] Or - to distinguish points added by ourselves:
  • Dead series: [[t1, Number.EPSILON], [t2, 30], [t3, Number.EPSILON]]

Number.EPSILON is used here, because it's a number near zero that would never ever be in our dataset, thus it would be easy to filter it out in tooltip if necessary (we add some data here only for visualization, so in some cases it's not good to show it to the user in a tooltip).
If a red series have more than one data point - area will be printed

Final result

Image description

Link to live example

Now we can see clearly when all 30 robots were not working.

Top comments (0)