Geek Answers Handbook

Final Highcharts with x and y axis

I want to use highcharts, creating an empty chart without data, but the x and y axes. How to do it?

var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, yAxis: { labels: { formatter: function() { return this.value +' km'; } } }, series: [{ data: [] }] });

he returns

enter image description here

But I want to display the y axis with a label.

+4
source share
4 answers

You can put data and hide the row after setting the property

 ignoreHiddenSeries : false

Here's a working demo. If you hide the Y-Axis series, it will still be visible.

+3
source

You can enter min / max values ​​for xAxis and yAxis and use null for all data.

Forked from @ZaheerAhmed 's answer above, as I believe it deserves a place as an alternative solution without having to hide data after the fact.

i.e.

 yAxis: { min: 1, max: } , xAxis: { min: 1, max: 50 }, series: { data:[null,null] }
+6
source

FWIW, it seems that highcharts has this functionality built into yAxis.showEmpty

Unfortunately, the script specified in the documentation does not work, and there is a related problem with open highchart on this issue:

do not hide y axis

0
source

Setting min and max for xAxis and yAxis not a good solution! Because if the data will be downloaded later (when it will be resolved), then you will not automatically calculate min and max. In the Highcharts API , he said:

If null, the maximum value is calculated automatically

So, when loading data, you should set min and max to null . But in my case, setting it to zero or even deleting the option did not lead to automatic calculation (it seems strange).

Instead, I set charts.showAxes to true! It. Take a look at the demo provided by Highcharts

Important: You, of course, need to install the series like this:

 series: [ { data: [null, null, null] }, { data: [null, null, null] } ]

Note. Make sure xAxis.showEmpty and yAxis.showEmpty are set to true (this is true by default).

0
source

More articles:


All Articles