CODEWITHSUNDEEP
javascripthighcharts
Kevin
Kevin

Reputation: 85

Highcharts blank chart with x and y axis

I want to use highcharts creating a blank chart with no datas but x and y axis. How to do it?

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    yAxis: {        
        labels: {
            formatter: function() {
                return this.value +' km';
            }
        }
    },

    series: [{
        data: []        
    }]

});

it returns

enter image description here

But I want to display y-axis with label.

Upvotes: 4

Views: 14160

Answers (4)

Vahid
Vahid

Reputation: 7551

Setting min and max for xAxis and yAxis is not a good solution! Because if the data is loaded later (When it's resolved), then you won't have auto calculated min and max. In Highcharts API, it's said:

If null, the max value is automatically calculated

So you should set min and max back to null when the data is loaded. But in my case setting it to null or even deleting the option, didn't result in automatic calculating (Seems strange).

What I did instead was setting charts.showAxes to true! That's it. Take a look at the demo provided by Highcharts

Important: You of course need to set series to something like this:

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

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

Upvotes: 0

dardenfall
dardenfall

Reputation: 196

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

Unfortunately, the fiddle listed in the documentation doesn't work, and there is a related open highcharts issue on the matter:

no hide y axis

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

You can put data and hide the series after setting property

ignoreHiddenSeries : false

Here is Working Demo If you hide the series Y-Axis will still be visible.

Upvotes: 3

Duniyadnd
Duniyadnd

Reputation: 4043

You can put in your min/max values for the xAxis and yAxis and use null for all data.

Forked from @ZaheerAhmed's response above as I figure it deserves a spot as an alternative solution without needing to hide the data after the fact.

i.e.

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

Upvotes: 6

Related Questions