tomsch
Posts: 6
Joined: Wed Oct 23, 2024 11:30 am
Location: Oslo

Data Grouping with Offset for Approximation

Hi

I have a spline stockchart configured with the following settings (shortened):

Code: Select all

chart: {
  type: 'spline',
  plotOptions: {
    series: {
      dataGrouping: {
        approximation: 'sum',
        forced: true,
        groupPixelWidth: 40,
        units: [
          ['hour', [1]],
          ['day', [1]],
          ['week', [1]],
          ['month', [1]],
        ],
      },
    },
  },
}

The X-axis represents dates with data points at 15-minute intervals. Each Y-axis data point is a numeric value.

I need the approximation to calculate and display the sum for each hour, but with an offset of 15 minutes, specifically, xx:15, xx:30, xx:45, and xy:00 for each hour, instead of the default behavior (e.g., xx:00, xx:15, xx:30, xx:45).

For example, when hovering over 12:00, the approximation value should be a sum of the values for 11:15, 11:30, 11:45 and 12:00.

I see that we can create a custom aggregate method and pass it to the approximation property in the chart options, however I have not been able to see how I can use it to get the desired outcome

Is there a way to achieve this offset approximation with Highcharts? If not directly supported, can you suggest a workaround or custom method?

I have attached a StackBlitz with a watered-down version of my chart: https://stackblitz.com/edit/stackblitz- ... %2Fmain.ts

Environment:
  • Highcharts: 11.4.8,
  • Highcharts-angular: 4.0.1,
  • Angular: 18.2.11
Any guidance or suggestions to achieve this functionality would be greatly appreciated :)
User avatar
dawid.d
Site Moderator
Posts: 1222
Joined: Thu Oct 06, 2022 11:31 am

Re: Data Grouping with Offset for Approximation

Hi,

Thanks for the question!

Unfortunately, there isn’t a built-in option in Highcharts to control whether a point with specific X-value falls into Group A or B directly within the dataGrouping settings.

To give you a bit more detail, dataGrouping works by splitting the timeline into defined intervals. Each point is then assigned to the corresponding group based on these ranges. Think of it as defining a range [min, max) for each group - so if the group is [11:00, 12:00), 11:00, 11:15 fall into this group, while 12:00 moves to the next one.

If you find this functionality valuable, you can submit a feature request on the Highcharts GitHub repository: https://github.com/highcharts/highchart ... new/choose

Best regards,
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”