How can i add time to xAixs of a ColumnRange Chart in HighChart?

Question

I am currently using angular to display the highcharts. I need to show a columnRange chart with respect to time and user name. But i am unable to do so.

So the time i get through API is in string format('07:34:25') and i cannot show string in a columnRange chart directly.For that i tried converting it into date. Which was not possible. I also tried using moment.js but it was also returning only string.

Also after some search i got one solution to add type of 'datetime' in yAxis.

yAxis: {
    type: 'datetime',
    min: 0,
    title: {
      text: charSeries.title,
    },
  }

But it is throwing error.

src/app/features/adminControl/modules/analyticsReport/components/averageDailyActionsReport/averageDailyActionsReport.component.ts(157,66): error TS2345: Argument of type '{ chart: { type: string; inverted: boolean; animation: boolean; }; title: { text: string; style: { color: string; font: string; }; position: { align: string; }; }; subtitle: { text: string; style: { floating: boolean; align: string; font: string; }; }; ... 5 more ...; credits: { ...; }; }' is not assignable to parameter of type 'Options'.

Please create a stackblitz of this. I have worked on it, I shall help. Or atleast share the code of file, src/app/features/adminControl/modules/analyticsReport/components/averageDailyActionsReport/averageDailyActionsReport.component.ts — waqas

ppotaczek ppotaczek · Accepted Answer · 2019-11-19T10:34:53

You can use category axis type:

xAxis: {
    type: 'category'
},

series: [{
    data: [
        ['07:34:25', -9.9, 10.3],
        ['07:35:25', -8.6, 8.5],
        ['07:36:25', -10.2, 11.8],
        ['07:37:25', -1.7, 12.2],
        ['07:38:25', -0.6, 23.1]
    ]
}]

Live demo: https://jsfiddle.net/BlackLabel/7o8f9ez5/

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

How can i add time to xAixs of a ColumnRange Chart in HighChart?

1 Answers