Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show all values at datetime axis in highcharts?

Tags:

highcharts

Is there a way to show all days at the X axis in this case? Even if i force the minTickInterval to one day highcharts dont show all days.

Fiddle example

$(function () {
$('#container').highcharts({
    chart: {type: "column", inverted: true,
    },
    xAxis: {
        type: 'datetime'
    },

    plotOptions: {
        series: {
            pointInterval: 24 * 3600 * 1000,
            pointRange: 24 * 3600 * 1000
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});

});

like image 428
Rodrigo Manguinho Avatar asked Nov 12 '13 19:11

Rodrigo Manguinho


People also ask

How do I show no data available in Highcharts?

To show 'no data' message on a pie chart, you need to remove data from a chart. Also, the 'no data' feature requires the file no-data-to-display. js to be loaded in the page.

How many data points can Highcharts handle?

Re: High Charts Data LimitBy default it is set to 1000, you should increase this value in your chart. If you are having problems with your chart it is good habit to open the console (Developer Tools) and look for errors.

How can I tell if Highcharts are loaded?

To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.

What is plot options in Highcharts?

The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.


2 Answers

Datetime axes are based on milliseconds, so an interval of one hour is: 3600 * 1000.

The solution above does not work in charts of type: area.

So if your xAxis is in days you could use:

chart: {
    type: 'area'
},
xAxis: {
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000
}
like image 130
Slipstream Avatar answered Sep 29 '22 07:09

Slipstream


What you need is tickInterval in xAxis:

xAxis: {
    type: 'datetime',
    tickInterval: 1
}

Updated your jsFiddle here: http://jsfiddle.net/NR8vG/1/

like image 38
Ethan Wu Avatar answered Sep 29 '22 09:09

Ethan Wu