Scrollbar Support in Charts

Scrollbar Support in Charts

Scrollbar support allows users to handle large datasets and crowded visuals by enabling horizontal or vertical scrolling on charts. This ensures better readability and avoids overlapping of data points and labels.

 

Overview

  • Enables scrolling on X-axis or Y-axis based on chart orientation
  • Helps display all data points clearly without overlap
  • Improves usability when dealing with high cardinality dimensions

 

How to Access

  • Navigate to Chart → Axis Formatter
  • Enable scrollbar from:
    • X-Axis Formatter → for horizontal scrolling
    • Y-Axis Formatter → for vertical scrolling
  • This option is available in respective X/Y-axis formatter, as applicable for the chart, as can be seen from below Figure.

 

Key Features

  • Automatic Separation of Values
    When scrollbar is enabled, all axis values are spaced properly to avoid overlapping
  • Improved Readability
    Ensures labels and bars/points are clearly visible even with large datasets
  • Dynamic Scrolling
    Users can scroll to explore additional data beyond the visible area

 

Scrollable Width

  • Defines the internal width of the chart canvas
  • Increasing width:
    • Spreads data points further apart
    • Reduces crowding
  • Users can adjust this value based on:
    • Number of categories
    • Desired spacing and readability

 

Behavior

  • Scrollbar appears only when data exceeds visible space
  • Works seamlessly with different chart types supporting axis configuration
  • Maintains consistent interaction with tooltips and selections

 

Functionality

Without scrollbar, the categories/data points on the visual are adjusted in the displayed width and height layouts of the chart, like in below example.


When the count of categories exceeds the visual layout is not enough to display them properly.

With scrollbar you can add additional width/height to the charts internally. This enables the categories to display properly, as shown in below Figure


Limitations

  • Spacing between adjacent categories is equal to the width occupied by each category
  • May require manual tuning of scrollable width for optimal display


For more details, refer: