Highcharts - the best way to process and display zero (or negative) values ​​in a line chart with a logarithmic Y axis

Question

In my HighChart graphic lines, the series data comes from my Ruby on Rails application dynamically. Sometimes series values ​​are zeros or less, which is a problem for HighCharts, and this raises the following exception:

Highcharts Error #10 Can't plot zero or subzero values on a logarithmic axis 

So, as a workaround, I process my ruby ​​array to conditionally replace a zero of a smaller value with a negligible positive number, for example. 0.00001 as below:

 oil_vol_array = d_array[1].map { |e| (e < 0.0001) ? 0.0001 : e.round(3) } 

This prevents the exception from being thrown, but the display shows a graph starting with 0.0001 if the initial value is zero (of course, since I requested it). A more desirable display would be to start the chart from scratch, but he does not like HighChart :(

Is there a way this can be achieved?

Answer 1

Have you tried using the formatting shortcut ?

 var chart = new Highcharts.Chart({ yAxis: { labels: { formatter: function() { if(this.value === 0.00001){ return 0; } else { return this.value; } } } } }); 

Answer 2

When working with huge numbers, it is better to use the standard label format for values ​​other than 0, otherwise your labels will be displayed as follows: 1,000,000,000 ... To change this, replace the else statement with the original call below:

 var chart = new Highcharts.Chart({ yAxis: { labels: { formatter: function() { if(this.value === 0.00001){ return 0; } else { return Highcharts.Axis.prototype.defaultLabelFormatter.call(this); } } } } });