Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts: Ensure y-Axis 0 value is at chart bottom

Tags:

highcharts

I'm outputting a series of highcharts on a page. In some instances, all data for the specified time period may come back with 0 values.

In such a case, the chart looks like this: http://jsfiddle.net/charliegriefer/KM2Jx/1/

There is only 1 y-Axis label, 0, and it's in the middle of the chart.

I'd like to force that 0 value for the y-Axis to be at the bottom of the chart, which would be consistent with other charts on the page that do have data.

Have tried various yAxis properties, such as "min: 0", "minPadding: 0", "maxPadding: 0", "startOnTick: true".

Seems it should be pretty straightforward, but I'm at a loss :(

Relevant yAxis code:

yAxis: {     min: 0,      minPadding: 0,      startOnTick: true,      title: {         text: ""     } }, 
like image 583
charliegriefer Avatar asked Dec 21 '12 14:12

charliegriefer


People also ask

How do I change the y-axis value in Highcharts?

A simpler way to go about this is using the tickInterval attribute: yAxis: { title: { text: 'Percent' }, tickInterval: 10, labels: { formatter: function(){ return this. value + '%'; } } }, That will force your axis intervals to show up as you requested.

How do I text a yAxis label?

format: string The recommended way of adding units for the label is using text , for example {text} km . To add custom numeric or datetime formatting, use {value} with formatting, for example {value:.

Can we plot two Y-axis on the same chart in Highcharts?

But from what I see, it's only possible in Highcharts to either have all lines on one y-axis or each line has its own y-axis.

What are ticks in Highcharts?

The minimum tick interval allowed in axis values. For example on zooming in on an axis with daily data, this can be used to prevent the axis from showing hours. Defaults to the closest distance between two points on the axis. Defaults to undefined .


1 Answers

I've found another (and very simple) solution:

You can set y-axis minRange property:

yAxis: {     ...     minRange : 0.1 } 

This makes Highcharts render yAxis min and max values when all data is 0.

UPDATE:

Highcharts 4.1.9 fix also needs:

        plotOptions: {             line: {                 softThreshold: false             }         } 

updated js fiddle

like image 170
BobTheBuilder Avatar answered Oct 22 '22 00:10

BobTheBuilder