CODEWITHSUNDEEP
highcharts
SoftTimur
SoftTimur

Reputation: 5510

Why doesn't dataGrouping.units work here?

I'm plotting a graph, the data in series are like below, where the time interval is one hour:

[
[1631138400000, 0],
[1631142000000, 1],
[1631145600000, 0],
[1631149200000, 0],
[1631152800000, 0],
[1631156400000, 0],
[1631160000000, 0],
... ...
]

The options are as follows. Here I would like to group by 1 day.

const chartOptions = {
    chartType: 'stock', chart: { type: 'line' }, rangeSelector: { enabled: false }, navigator: { enabled: false },
    yAxis: { visible: false }, legend: { enabled: true }, scrollbar: { enabled: false  },
    xAxis: { type: 'datetime' },
    plotOptions: {
        line: { marker: { enabled: true } },
        series: { 
            dataLabels: { enabled: true, allowOverlap: true }, 
            dataGrouping: { approximation: "sum", forced: true, units: [['day', [1]]] }
        }
    }
}

However, here is the result, where the data interval is still 1 hour: enter image description here

Does anyone know what's wrong here?

PS: a live snippet: https://stackblitz.com/edit/react-sqhdqw?file=index.js

Upvotes: 0

Views: 68

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

Data grouping is a feature exclusive to Highstock.

First, you need to import Highstock instead of Highcharts:

import Highcharts from 'highcharts/highstock';

and second, define constructorType for the component:

    <HighchartsReact
      ...
      constructorType="stockChart"
    />

Docs: https://www.highcharts.com/docs/stock/data-grouping

Upvotes: 1

Related Questions