[Fixed] How to give time instead of angle in highcharts?

Issue

Hi i am working on highcharts i am having a polar chart and i wanna display on y-axis time instead of angle. This is the one which i tried so far:

In x-axis i am having angle and i have given tickInterval: 45, so in the same way how to do this for time.

Highcharts.chart('container', {

chart: {
    polar: true
},

title: {
    text: 'Highcharts Polar Chart'
},

subtitle: {
    text: 'Also known as Radar Chart'
},

pane: {
    startAngle: 0,
    endAngle: 360
},

xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: {
        format: '{value}°'
    }
},

yAxis: {
    min: 0
},

plotOptions: {
    series: {
        pointStart: 0,
        pointInterval: 45
    },
    column: {
        pointPadding: 0,
        groupPadding: 0
    }
},

series: [{
    type: 'column',
    name: 'Column',
    data: [8, 7, 6, 5, 4, 3, 2, 1],
    pointPlacement: 'between'
}, {
    type: 'line',
    name: 'Line',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
}]

Demo

Solution

The process is the same as in a non-polar chart. You can use datetime axis type and data in [x, y] format.

It is also possible to use categories, example: https://jsfiddle.net/BlackLabel/L5p6krvd/

    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [
            [new Date('2020-5-12').getTime(), 115],
            [new Date('2020-5-13').getTime(), 50],
            ...
        ]
    }]

Live demo: https://jsfiddle.net/BlackLabel/pv0zm2ky/

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

Leave a Reply

(*) Required, Your email will not be published