Q: 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:

Does anyone know what's wrong here?
PS: a live snippet: https://stackblitz.com/edit/react-sqhdqw?file=index.js

A: 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
