Skip to content

Data Zoom

The Data Zoom option enables users to zoom into their visualization. You can enable this option by using the dataZoom setting. The dataZoom option has two modes:

  • slider: This mode allows users to zoom in and out of the chart using a slider rendered at the bottom of the chart. Note that this option uses the chart's current data and it does not trigger data filters. This mode is also enabled if the dataZoom setting is set to true. See the picture below.

DZ1

  • dragFilter: This mode allows users to select a range of values inside the visualization by using their mouse or by finger pinching. This option triggers data filters. See the picture below.

DZ2

Support

The dataZoom option is supported by Bars, Trend and Area Line, and by the Multimetric version of each one of them. It is also supported by Heat Map.

Note

  • For the Heat Map visualization, the dataZoom option only supports the dragFilter setting.

The following are examples of how to set the dataZoom option.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
        // No data zoom
        myChart.set('dataZoom', false)

        // shows the slider
        myChart.set('dataZoom', true)

        // shows the slider
        myChart.set('dataZoom', 'slider')

        // zooming of the data using mouse or finger pinching
        myChart.set('dataZoom', 'dragFilter')