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]
}]
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