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}
        />
    )
}

6 thoughts on “HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?”

  1. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to
    my blog that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some time and was
    hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.

    I truly enjoy reading your blog and I look forward to your new updates. http://hydroxychloroquined.online/

    Reply

Leave a Comment