drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Hide line when zero (but not by setting to null)

For some data that I'm plotting, it is often just zero, with the occasional bump. When plotted as a line (or spline), this means that you just get a flat line most of the time. For some chart setups, particularly minimalist styles, it would be nice only to display the non-zero parts, so you only see the humps and not the flat line.

I'm aware that you can set a point to null, and it will then just not display. But that doesn't have the effect I want... the humps of the chart will then just hover above the zero line, by varying amounts, with an ugly gap. And for a spline, you need even the zero points to be taken into account, in order to get the right shape of line as the plot approaches zero... it is no good just dropping the zero points completely.

I've also played with "zones" (y axis), and e.g. using an invisible line color below 0.01. But it's very difficult to choose that threshold to suit all settings, in terms of data range, and even line width... a fat line seems to be part visible even if a thin line is all hidden. And when using an area spline, you get a gap running all the way under the filled part too, when really you want a complete fill, and just an invisible line when the line hits zero.

Maybe it would be possible to use "zones" but in the x direction? And you add the zones based on the data, to hide the line in horizontal bands coinciding with the zero parts?

Is there an easier way? Thanks.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Hide line when zero (but not by setting to null)

Hi,

It is possible to use zones in x direction - use zoneAxis:
http://api.highcharts.com/highcharts#se ... >.zoneAxis

Do you have an image of what should a chart look like and a live demo in JSFiddle?

Best Regards.
Kacper Madej
Highcharts Developer
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Hide line when zero (but not by setting to null)

I'm probably answering my own question in doing so, but here's an example of what I'm after:

http://jsfiddle.net/hfLf4p7y/1/

As you can see, the zero portions of the chart are still there, just hidden. Is this the best way to achieve this? Any easier way? Because in my case the data is pulled from a remote source, and hence I'd have to determine my zones dynamically... not that difficult but I'd rather use a ready-made solution for this type of effect if there is one, like some setting such as "hideZero: true"!

Thanks.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Hide line when zero (but not by setting to null)

Another option could be to set lineWidth to 0, but you will see markers for 0 values. Result will be similar, but not identical.
Example: http://jsfiddle.net/dodmvo1L/

Other than that, your solution seems to be the best - there is no default option to hide 0 values.

Best Regards.
Kacper Madej
Highcharts Developer
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Hide line when zero (but not by setting to null)

OK, it's good to have confirmation that the suggested approach is OK. Some of my data is plotted as a spline rather than areaspline, so it looks like I'll need zones, rather than just using a zero-width line.

Thanks.
Dmle
Posts: 1
Joined: Tue May 07, 2019 10:00 am

Re: Hide line when zero (but not by setting to null)

Has there been any development on the introduction of `hideZero: true` ? :) I would also find it useful in pie charts. Right now I'm replacing `0` with `null` to do it.
bastss
Site Admin
Posts: 1208
Joined: Wed Oct 17, 2018 10:59 am

Re: Hide line when zero (but not by setting to null)

Hey Dmle!

Welcome to official Highcharts forum!

Could you reproduce your code? It will be much easier to understand what you want to achieve and find an alternative solution :)

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Usage”