Highcharts scrollablePlotArea flickers

Q&A
, ,
1

Hi,

In our team we are tying to get Highcharts scrollbars working.
If you paste the example bellow you will see that when the scroll bars are enabled the chart enter a cycle of showing and hiding scroll bars.

Screen Recording 2025-10-07 at 13.43.42

We have tried playing with the setting in scrollablePlotArea to see if anything would change that behavior and we have had no success.

{
  "chart": {
    "type": "line",
    "scrollablePlotArea": {
      "minWidth": 700,
      "scrollPositionX": 0,
      "opacity": 1
    }
  },
  "title": {
    "text": "Scrollable plot area"
  },
  "subtitle": {
    "text": "Open on mobile and scroll sideways"
  },
  "xAxis": {
    "type": "datetime",
    "labels": {
      "overflow": "justify"
    }
  },
  "yAxis": {
    "tickWidth": 1,
    "title": {
      "text": "Wind speed (m/s)"
    },
    "lineWidth": 1,
    "opposite": true
  },
  "tooltip": {
    "valueSuffix": " m/s",
    "split": true
  },

  "plotOptions": {
    "spline": {
      "lineWidth": 4,
      "states": {
        "hover": {
          "lineWidth": 5
        }
      },
      "marker": {
        "enabled": false
      },
      "pointInterval": 3600000, // one hour
      "pointStart": "2015-05-31"
    }
  },
  "series": [
    {
      "name": "Hestavollane",
      "data": [
        0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 5.5,
        6.2, 5.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1,
        5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6,
        9.8, 9.5, 8.5, 7.4, 7.6
      ]
    }
  ]
}

Is this a bug? or are we doing something wrong on our side?

2

Hi @reyesfed,

To my understanding, when the ‘chart.scrollablePlotArea.minWidth’ value exceeds the visual’s actual width, the highchart will automatically insert an inner scroll container which is causing this flickering behavior.
To fix, we can turn off automatic resizing and let highcharts manage the scrolling on it’s own. I tested this out and was able to receive proper outcome:
"chart": {
"type": "spline",
"reflow": false,
"spacingBottom": 18,
"scrollablePlotArea": { "minWidth": 2400, // important** adjust this value until it matches your visual's outer width
"scrollPositionX": 0 }
}

image
image1126×515 43.1 KB

2 Likes
3

Thank you Brett.

With your help we were able to crack it up :slight_smile:

We were able to make a column chart that would dynamically adapt to having more or less categories and it would give you a scroll bar only when the category count goes over a limit

The set up is a follows

Left Pane:

Group by:

DynamicCategory

Values:

Metric

Count Category = distinctCountOver(DynamicCategory, [], PRE_AGG)

Code:

{
  "chart": {
    "type": "column",
    "reflow": false,
    "height": "490", // fix this height to a bit less than the height of the container (560)
    "scrollablePlotArea": {
      "minWidth": [
        "case", // Case statement to manage the the size of the visual depending the number of unique categories
        ["<=", ["get", ["getColumnFromValue", 1], 0], 25],
        496, // Set based on container size
        ["*", ["get", ["getColumnFromValue", 1], 0], 100] // Set based on trail and error
      ],

      "minHeight": 10000, // Not sure how it affect behavior yet
      "scrollPositionX": 0, 
      "scrollPositionY": 1, 

      "opacity": 0.5
    }
  },

  "xAxis": {
    "type": "datetime",
    "categories": ["getColumn", 0] // Column with dynamic categories
  },
  "yAxis": {
    "title": {
      "enabled": false
    }
  },
  "series": [
    {
      "name": "Hestavollane",
      "pointPadding": -0.1,
      "data": ["getColumn", 1] // Column with data I want to visualize 
    }
  ]
}
1 Like