HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?

In a React app that uses Highcharts to draw the chart using monthly data, how can we resample the monthly data into quarterly or yearly data, then plot it using Highcharts?

If Highcharts does not provide a resampling function, the solution can use other JS libraries if needed, such as Moment.js. However, Highcharts should be not replaced with another charting library, such as Highstocks.

Thank you in advance!

Original Monthly Data:

const monthlyData = [[946702800000,261],[949381200000,251],[951886800000,282],[954565200000,289],[957153600000,259],[959832000000,259],[962424000000,256],[965102400000,264],[967780800000,289],[970372800000,291],[973054800000,254],[975646800000,275],[978325200000,250],[981003600000,254],[983422800000,227],[986101200000,262],[988689600000,248],[991368000000,237],[993960000000,257],[996638400000,250],[999316800000,239],[1001908800000,253],[1004590800000,235],[1007182800000,259],[1009861200000,259],[1012539600000,264],[1014958800000,243],[1017637200000,240],[1020225600000,214],[1022904000000,238],[1025496000000,251],[1028174400000,255],[1030852800000,259],[1033444800000,248],[1036126800000,260],[1038718800000,268],[1041397200000,246],[1044075600000,259],[1046494800000,264],[1049173200000,273]]

enter image description here

Minimal Reproducible Code

export function Chart({ data }) {

    const options = {
        title: { text: 'Time series data' },
        xAxis: { type: 'datetime' },
    }
    options.series = [{
        name: 'foo',
        type: 'line',
        data: [[946702800000,261],[949381200000,251],[951886800000,282],[954565200000,289],[957153600000,259],[959832000000,259],[962424000000,256],[965102400000,264],[967780800000,289],[970372800000,291],[973054800000,254],[975646800000,275],[978325200000,250],[981003600000,254],[983422800000,227],[986101200000,262],[988689600000,248],[991368000000,237],[993960000000,257],[996638400000,250],[999316800000,239],[1001908800000,253],[1004590800000,235],[1007182800000,259],[1009861200000,259],[1012539600000,264],[1014958800000,243],[1017637200000,240],[1020225600000,214],[1022904000000,238],[1025496000000,251],[1028174400000,255],[1030852800000,259],[1033444800000,248],[1036126800000,260],[1038718800000,268],[1041397200000,246],[1044075600000,259],[1046494800000,264],[1049173200000,273]],
    }]

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
    )
}

1 thought on “HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?”

  1. You need to calculate quarterly and yearly data manually. Below you can find a simple example how you can do that in React. I have used isSameQuarter and isSameYear methods from date-fns library.

    function Chart() {
      const [options, setOptions] = useState({...});
    
      const getProcessedData = (method) => {
        const processedData = [];
        const monthlyData = getData();
    
        monthlyData.forEach((el, index) => {
          if (
            index === 0 ||
            !method(new Date(el[0]), new Date(monthlyData[index - 1][0]))
          ) {
            processedData.push(el);
          } else {
            processedData[processedData.length - 1][1] += el[1];
          }
        });
    
        return processedData;
      };
    
      const yearlyData = useMemo(() => getProcessedData(isSameYear), []);
      const quarterlyData = useMemo(() => getProcessedData(isSameQuarter), []);
    
      const setData = (period) => {
        const processedData =
          period === "month"
            ? getData()
            : period === "year"
            ? yearlyData
            : quarterlyData;
    
        setOptions({
          series: [{
            data: processedData
          }]
        });
      };
    
      return (
        <>
          <HighchartsReact highcharts={Highcharts} options={options} />
          <button onClick={() => setData("month")}>Monthly Data</button>
          <button onClick={() => setData("quarter")}>Quarterly Data</button>
          <button onClick={() => setData("year")}>Yearly Data</button>
        </>
      );
    }
    

    Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-w6g6b?file=/demo.jsx

    Docs:

    https://date-fns.org/v2.17.0/docs/isSameQuarter

    https://date-fns.org/v2.17.0/docs/isSameYear

    Reply

Leave a Comment