CODEWITHSUNDEEP
highcharts
TomStack
TomStack

Reputation: 109

Highcharts custom data grouping dropped when visible data is changed in navigator

The example Data grouping by buttons from the Highcharts API: https://api.highcharts.com/highstock/rangeSelector.buttons

has a custom data grouping set through the rangeSelector->buttons->dataGrouping

    rangeSelector: {
        allButtonsEnabled: true,
        buttons: [{
            type: 'month',
            count: 3,
            text: 'Day',
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Week',
            dataGrouping: {
                forced: true,
                units: [['week', [1]]]
            }
        }, {
            type: 'all',
            text: 'Month',
            dataGrouping: {
                forced: true,
                units: [['month', [1]]]
            }
        }],
    },

enter image description here

Unfortunately the data grouping is dropped when visible data is changed in the navigator (the selected Weekly data grouping is changed to Daily grouping is used)

enter image description here

The same happens when the date range is changed through the calendar (rangeSelector->input).

Is there a way to keep the data grouping after changing date range in navigator or calendar?

Upvotes: 0

Views: 92

Answers (1)

Sebastian Hajdus
Sebastian Hajdus

Reputation: 1560

Set in buttons options buttons.preserveDataGrouping to true.

When buttons apply dataGrouping on a series, by default zooming in/out will deselect buttons and unset dataGrouping. Enable this option to keeps buttons selected when extremes change.

  buttons: [{
    type: 'month',
    count: 3,
    text: 'Day',
    preserveDataGrouping: true,
    dataGrouping: {
      forced: true,
      units: [
        ['day', [1]]
      ]
    }
  }, {
    type: 'year',
    count: 1,
    text: 'Week',
    preserveDataGrouping: true,
    dataGrouping: {
      forced: true,
      units: [
        ['week', [1]]
      ]
    }
  }, {
    type: 'all',
    text: 'Month',
    preserveDataGrouping: true,
    dataGrouping: {
      forced: true,
      units: [
        ['month', [1]]
      ]
    }
  }],

Demo: https://jsfiddle.net/BlackLabel/2nm1qtLy/

Upvotes: 1

Related Questions