maxi@787
Posts: 5
Joined: Mon Jan 20, 2025 2:13 am

dataGrouping different data units for different series types

Hi all.

Currently I am trying to display time data on a xAxis (type: "datetime") with multiple ‘line’ and ‘column’ series.

Both the 'line' and 'column' series have data every 15 minutes. However, I need the ‘line’ series to plot the data every 15 minutes and the ‘column’ series to accumulate (sum) the data over a day and plot it as a column day by day.

Currently I can code Highcharts so that when only the 'column' data is displayed (by disabling any 'line' series by clicking on the appropriate legend) any columns data group together to display the information as a column over a day.

This is achieved by adding the dataGrouping code to any ‘column’ series JSON.
- dataGrouping: {enabled: true, forced: true, lastAnchor: "middle", units: [["day", [1]]]}

However as soon as any ‘series’ data is introduced (by enabling the ‘column’ series by clicking on the legend enable) the ‘columns’ series defaults to a day, losing the dataGrouping function of the ‘column’ series.

Is it at all possible to have Highcharts display different data grouping types on different types of series?
andrzej.b
Site Moderator
Posts: 590
Joined: Mon Jul 15, 2024 12:34 pm

Re: dataGrouping different data units for different series types

Hi,

Welcome to our forum and thanks for contacting us with your question!

Yes, it's definitely possible to have different data grouping settings for different series types in Highcharts. You can specify the dataGrouping settings individually for each series in your chart configuration.
Here's an example of how you can achieve this:

Code: Select all

Highcharts.stockChart('container', {
    xAxis: {
        type: 'datetime'
    },
    series: [{
        type: 'line',
        data: [
            [Date.UTC(2025, 0, 1, 0, 0), 1],
            [Date.UTC(2025, 0, 1, 0, 15), 2],
            [Date.UTC(2025, 0, 1, 0, 30), 3],
            // Add more data points here...
        ],
        name: 'Line Series',
        dataGrouping: {
            enabled: false
        }
    }, {
        type: 'column',
        data: [
            [Date.UTC(2025, 0, 1, 0, 0), 5],
            [Date.UTC(2025, 0, 1, 0, 15), 10],
            [Date.UTC(2025, 0, 1, 0, 30), 15],
            // Add more data points here...
        ],
        name: 'Column Series',
        dataGrouping: {
            enabled: true,
            forced: true,
            lastAnchor: 'middle',
            units: [['day', [1]]],
            approximation: 'sum'
        }
    }]
});
In this example:
• The line series has dataGrouping disabled, so it displays data points every 15 minutes.
• The column series has dataGrouping enabled and is set to group data by day, summing the values within each day.
This setup should allow you to toggle the visibility of each series via the legend without affecting the data grouping behavior of the other series.

If you run into any issues, feel free to reach out!

Kind regards,
Andrzej
Highcharts Developer
maxi@787
Posts: 5
Joined: Mon Jan 20, 2025 2:13 am

Re: dataGrouping different data units for different series types

Apologies, I realize that I missed a critical part of the problem in my first query.

When just the 'column' is displayed the width is thick, and with code I can make the columns touch each other. For example -

plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0
}
},

I can make the columns width itself take up a day on the datetime xAxis. This is what is required for displaying the columns.

However as soon as the 'line' data is introduced the column width shrinks to a couple of pixels. (I suspect the same width as the 'line' series). Is there any way to keep the Column width the same as a day on the datetime xAxis when the line data is enabled?
andrzej.b
Site Moderator
Posts: 590
Joined: Mon Jul 15, 2024 12:34 pm

Re: dataGrouping different data units for different series types

Hi,

Would you mind reproducing the issue in an online editor so I can help you with it?

Kind regards,
Andrzej
Highcharts Developer
maxi@787
Posts: 5
Joined: Mon Jan 20, 2025 2:13 am

Re: dataGrouping different data units for different series types

No worries

https://jsfiddle.net/fzcarmbk/

Got a basic setup going (although with a lot of data). Essentially when just the column is enabled the column is thick. However as soon as the line is enabled also the column thickness shrinks (possibly to the same thickness as the line). Is there any way to keep the thickness of the column when both series are enabled?
maxi@787
Posts: 5
Joined: Mon Jan 20, 2025 2:13 am

Re: dataGrouping different data units for different series types

Also, ideally the thickness of the column would take up a day on the datetime xAxis.
andrzej.b
Site Moderator
Posts: 590
Joined: Mon Jul 15, 2024 12:34 pm

Re: dataGrouping different data units for different series types

Hi,

You need to set the correct pointRange in that scenario, see the API reference: https://api.highcharts.com/highcharts/s ... pointRange
So you column setting will look like this:

Code: Select all

name: 'Column Series',
        type: 'column',
        pointRange: 24 * 36e5, //one day point range
	dataGrouping: {
            enabled: true,
            forced: true,
            units: [['day', [1]]]
        },
        data: ...
If needed, you can adjust the display with series.column.groupPadding and series.column.pointPadding.

Feel free to reach out if you have any further questions.

Kind regards,
Andrzej
Highcharts Developer
maxi@787
Posts: 5
Joined: Mon Jan 20, 2025 2:13 am

Re: dataGrouping different data units for different series types

Fantastic.

I did create a work around but don't need it now, that works perfectly.

Thanks so much.

Return to “Highcharts Usage”