Highcharts: How to plot date field in x-axis?

Question

I want to plot a Highcharts area chart region-wise i.e. country-wise population in a year.
I have a tab delimited data with schema (date(mm/dd/yyyy), country, population):

12/29/2014  india   1853
12/29/2014  france  1953
01/05/2015  india   5087
01/05/2015  china   11672
01/05/2015  france  8493
01/12/2015  china   9516
01/26/2015  france  10856
01/26/2015  india   3078
01/26/2015  china   37202

I am not able to make my x-axis date-ranged i.e. x-axis values starting from 12/01/2014 to 01/31/2015.

I saw the example in JSFiddle but that example is confusing me even more: their data does not have any date value, yet they are able to plot the "USA" and "Russia" warhead count in a year:

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Randon Plot for demo'
    },
    subtitle: {
        text: 'Sources: '
    },
    xAxis: {
        type: 'datetime',
        allowDecimals: false,
        labels: {
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    yAxis: {
        title: {
            text: 'Nuclear weapon states'
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
    },
    plotOptions: {
        area: {
            pointStart: 1940,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'USA',
        data: [
            null, null, null, null, null, 6, 11, 32, 110, 235,
            369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
            20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
            26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
            24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
            21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
            10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
            5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
        ]
    }, {
        name: 'USSR/Russia',
        data: [null, null, null, null, null, null, null, null, null, null,
            5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
            1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
            11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
            30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
            37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
            21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
            12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
        ]
    }]
});

How do I fit in my data into this example ?

Each value of the data on the xAxis is the value for the given year, starting from 1940. Given this example if you would put 60 value items on the xAxis, the chart would reach year 2000. — Mike Doe, Dec 13 '18 at 12:16
Possible duplicate of [How to get highcharts dates in the x axis?](https://stackoverflow.com/questions/7101464/how-to-get-highcharts-dates-in-the-x-axis) — Mike Doe, Dec 13 '18 at 12:19

score 1 · Answer 1 · answered Dec 13 '18 at 15:02

In the example that you provided is used pointStart and formatter for axis label, which causes the data to be distributed at an equal time interval (every one year).

In your case, with unequal time intervals, you should deliver x values in milliseconds - format required by Highcharts.

var data1 = [{
    x: '12/29/2014',
    y: 1853
}, {
    x: '01/05/2015',
    y: 5087
}, {
    x: '01/26/2015',
    y: 3078
}];

data1.forEach(function(el, i) {
    data1[i].x = new Date(el.x).getTime();
});

Live demo: http://jsfiddle.net/BlackLabel/4sq517ak/

Highcharts: How to plot date field in x-axis?

1 Answers1