CODEWITHSUNDEEP
javascripthighcharts
Lara
Lara

Reputation: 3021

How to set the x axis of HighCharts to intake DateRange

I am trying to display a series of data for a specific set of Dates, say for 15 or 30 Days. Now, I don't want to display all these dates on x-axis instead, because that will be too many and it will be difficult to understand, instead want to plot it on intervals so that y-axis data can fit correctly. Below is how I was displaying everything which is looking clumsy and difficult to read 

"xAxis": {
  categories: [
    '10 June',
    '12 June',
    '14 June',
    '16 June',
    '18 June',
    '20 June',
    '22 June'
 ]
 },
"series": [
  {
    name: 'Total Students',
    data: [1, 2, 1, 4, 3, 60]
  }
]

Is there a way to make the x-axis populate dynamically to display a large range of dates? Kindly suggest.

Upvotes: 0

Views: 31

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can use 'datetime' axis type and set x and y data in this way:

xAxis: {
    type: 'datetime'
},
series: [{
    name: 'Total Students',
    data: [
        [Date.UTC(2013, 8, 16), 0.7500],
        [Date.UTC(2013, 8, 17), 0.7486],
        [Date.UTC(2013, 8, 18), 0.7396],
        [Date.UTC(2013, 8, 19), 0.7391],
        [Date.UTC(2013, 8, 20), 0.7394],
    ]
}]

Live demo: http://jsfiddle.net/BlackLabel/xq52vagL/

API Reference: https://api.highcharts.com/highcharts/xAxis.type

Upvotes: 1

Related Questions