Scrollbar

Scrollbar is an interactive component provided by VChart, which is similar to the ordinary dom scrollbar. When the content area of the chart is larger than the display area, the scrollbar can be configured to help view the chart. This tutorial mainly explains the related concepts and composition of the Scrollbar component. For more detailed configuration and examples of the Scrollbar component, please refer to the configuration documentation and example pages.

Components

The Scrollbar component mainly consists of two parts: the slider (slider) and the track (rail). We can adjust the appearance and behavior of the scrollbar by specifying the scrollbar configuration.

Examples

This section will introduce how to use the Scrollbar in VChart to implement a simple bar chart and demonstrate how to configure the scrollbar configuration data visible range by scrolling to view the data.

The scrollbar configuration is an array, including the direction of the scrollbar (orient), the start value (startValue) and the end value (endValue) of the initial range of the scrollbar, and whether to enable mouse zooming and panning roaming (roam):

const spec = {
  ...
  scrollBar: [
    {
      orient: 'right',
      startValue: '2011',
      endValue: '2014',
      roam: true
    }
  ],
  ...
};