Data Zoom
Learn about the data zoom feature and how to use it.
Data zoom allows you to focus on specific sections of the data. You can enable zooming features to enhance interactivity.
| Setting | Description |
|---|---|
| Id | A text field for setting a unique identifier for this data zoom instance |
| Type | Choose between Inside and Slider. Inside lets you zoom with your scroll wheel and drag the data left and right with your mouse. Slider adds a slider below the chart with handles on the left and right that you can drag to control which data is visible. To enable both options, add data zoom to the canvas twice and select a different type for each |
Inside
These settings appear when Type is set to Inside.
| Setting | Description |
|---|---|
| Start | The start value as a percentage when the chart is first drawn |
| End | The end value as a percentage when the chart is first drawn |
| Min Span | The minimum zoom level as a percentage. Defaults to 0 |
| Max Span | The maximum zoom level as a percentage. Defaults to 100 (all data) |
| Orientation | Choose Vertical or Horizontal to set which axis the zoom applies to |
| Filter Mode | Controls how data filtering is applied to other charts on the same canvas that share the same data. Choose from: Filter: filters out data that is out of range in all series Weak: filters out data that is out of range, but keeps the filtered data for calculating statistics Empty: replaces filtered-out data with empty values None: no filtering is applied |
Slider
These settings appear when Type is set to Slider.
| Setting | Description |
|---|---|
| Start | The start value as a percentage when the chart is first drawn |
| End | The end value as a percentage when the chart is first drawn |
| Min Span | The minimum zoom level as a percentage. Defaults to 0 |
| Max Span | The maximum zoom level as a percentage. Defaults to 100 (all data) |
| Orientation | Choose Vertical or Horizontal to set which axis the zoom applies to |
| Filter Mode | Controls how data filtering is applied to other charts on the same canvas that share the same data. Choose from: Filter: filters out data that is out of range in all series Weak: filters out data that is out of range, but keeps the filtered data for calculating statistics Empty: replaces filtered-out data with empty values None: no filtering is applied |
| Background Color | Click the color picker to choose a color for the slider background, or paste a hex value directly |
| Zoom Color | Click the color picker to choose a color for the selected (zoomed) data area, or paste a hex value directly |
| Border Color | Click the color picker to choose a color for the border of the selected data area, or paste a hex value directly |
| Border Radius | A number input for setting the border radius of the entire slider (not just the zoomed area) in pixels |
| Handle Size | A number input for setting the size of the slider handles as a percentage. The range starts from 0 and can go beyond 100, where 100 is the default size |
Sections
| Section | Description |
|---|---|
| Size | Controls the width and height of the slider |
| Position | Controls the positioning of the slider within the canvas |
| Handle Style | Customizes the appearance of the slider handles |
| Text Style | Customizes the appearance of text labels on the slider |