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:
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.
Reason
Let's analyze our points on the following picture.
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).
Final result
Now we can see clearly when all 30 robots were not working.
Top comments (0)