actions/datazoom

39 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

dataZoom action

The dataZoom action zooms a data region. dispatchAction({type: 'dataZoom', dataZoomIndex?: number, start?: number, end?: number, startValue?: number, endValue?: number}). dataZoomIndex is the index of dataZoom component, 0 by default. start is the percentage of starting position (0-100). end is the percentage of ending position (0-100). startValue is the data value at starting location. endValue is the data value at ending location. Triggers datazoom event.

takeGlobalCursor action - dataZoom

The takeGlobalCursor action activates or inactivates the dataZoom button in toolbox. myChart.dispatchAction({type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: boolean}).

dataZoom.inside type and purpose

The dataZoom.inside component is an inside-type data zoom component that operates within the coordinates. It allows translation of the data area when moving in coordinates and scaling via mouse wheel on PC or two-finger touch on mobile.

dataZoom.inside type option

The type option for dataZoom.inside must be set to the string 'inside'.

dataZoom.inside disabled option

The disabled option is a boolean that defaults to false. When false, the inside zoom is enabled.

dataZoom.inside zoomOnMouseWheel option

The zoomOnMouseWheel option controls how mouse wheel triggers zoom. It accepts boolean or string values with default true. Possible values are: true (mouse wheel triggers zoom), false (mouse wheel does not trigger zoom), 'shift' (holding shift and mouse wheel triggers zoom), 'ctrl' (holding ctrl and mouse wheel triggers zoom), 'alt' (holding alt and mouse wheel triggers zoom).

dataZoom.inside moveOnMouseWheel option

The moveOnMouseWheel option controls how mouse wheel triggers data window move. It accepts boolean or string values with default false. Possible values are: true (mouse wheel triggers data window move), false (mouse wheel does not trigger data window move), 'shift' (holding shift and mouse wheel triggers data window move), 'ctrl' (holding ctrl and mouse wheel triggers data window move), 'alt' (holding alt and mouse wheel triggers data window move).

dataZoom.inside preventDefaultMouseMove option

The preventDefaultMouseMove option is a boolean that defaults to true. When true, it prevents the default behavior of the mouse move event.

dataZoom.inside cursorGrab option

The cursorGrab option specifies the cursor style when the mouse hovers over the grabbable area. It was introduced in version 6.1.0 and defaults to 'grab'.

dataZoom.inside cursorGrabbing option

The cursorGrabbing option specifies the cursor style when actively grabbing. It was introduced in version 6.1.0 and defaults to 'grabbing'.

dataZoom component types

ECharts supports three types of dataZoom components: dataZoomInside (data zoom functionalities embedded inside coordinate systems, enabled by mouse dragging, mouse move or finger touch), dataZoomSlider (a special slider bar for zooming or roaming by mouse dragging or finger touch), and dataZoomSelect (a marquee tool configured in toolbox.feature.dataZoom).

dataZoom axis index configuration

Use dataZoom.xAxisIndex, dataZoom.yAxisIndex, dataZoom.radiusAxisIndex, or dataZoom.angleAxisIndex to specify which axes are operated by dataZoom. Each can be set as a single number to control one axis or as an Array to control multiple axes. For example, xAxisIndex: [0, 2] controls the first and third xAxis, while xAxisIndex: 3 controls only the fourth xAxis.

dataZoom automatic linking

A single chart instance can contain several dataZoom components, each controlling different axes. dataZoom components that control the same axis will be automatically linked, meaning all of them will be updated when one is updated by user action or API call.

dataZoom window setting modes

The current window can be set in two forms: percent value using dataZoom.start and dataZoom.end (range 0-100), or absolute value using dataZoom.startValue and dataZoom.endValue. When percent values are used, the result depends on the sequence of dataZoom definitions in the option.

yAxisIndex option

yAxisIndex (type: number|Array, default: null) specifies which yAxis is/are controlled by dataZoom when cartesian coordinate system is used. By default the first yAxis parallel to dataZoom is controlled when orient is set as 'vertical'. It is recommended to specify it explicitly rather than use the default value.

radiusAxisIndex option

radiusAxisIndex (type: number|Array, default: null) specifies which radiusAxis is/are controlled by dataZoom when polar coordinate system is used.

angleAxisIndex option

angleAxisIndex (type: number|Array, default: null) specifies which angleAxis is/are controlled by dataZoom when polar coordinate system is used.

filterMode option and values

filterMode (type: string, default: 'filter') determines how dataZoom operates on data. Possible values are: 'filter' (data outside window is filtered out, may change windows of other axes; filtered if one relevant dimension is out of window), 'weakFilter' (data outside window is filtered out only if all relevant dimensions are out of same side of window), 'empty' (data outside window is set to NaN, does not change windows of other axes), 'none' (do not filter data).

filterMode usage guidelines

If only xAxis or only yAxis is controlled by dataZoom, use filterMode: 'filter' to enable the other axis to auto-adapt to filtered data. If both xAxis and yAxis are operated by dataZoom and should not affect each other (e.g., scatter chart with both axes of type 'value'), use filterMode: 'empty' for both. If one axis is main and the other auxiliary (e.g., bar chart where dragging dataZoomX changes yAxis window but dragging dataZoomY does not change xAxis), set main axis to filterMode: 'filter' and auxiliary axis to filterMode: 'empty'.

start option

start (type: number, default: 0) is the start percentage of the window out of the data extent, in the range of 0 to 100. Together with end, it defines the window of data in percent form. The relationship between start and axis extent can be checked in rangeMode.

end option

end (type: number, default: 100) is the end percentage of the window out of the data extent, in the range of 0 to 100. Together with start, it defines the window of data in percent form. The relationship between end and axis extent can be checked in rangeMode.

startValue option

startValue (type: number|string|Date, default: null) is the start absolute value of the window and does not work when start is set. Together with endValue, it defines the window in absolute value form. For category axes, startValue can be set as an index of the axis.data array or as the array value itself; the latter is automatically translated to the corresponding index internally. The relationship between startValue and axis extent can be checked in rangeMode.

endValue option

endValue (type: number|string|Date, default: null) is the end absolute value of the window and does not work when end is set. Together with startValue, it defines the window in absolute value form. For category axes, endValue can be set as an index of the axis.data array or as the array value itself; the latter is automatically translated to the corresponding index internally. The relationship between endValue and axis extent can be checked in rangeMode.

minSpan option

minSpan (type: number, default: null) is used to restrict minimal window size as a percent value in the range of 0 to 100. If minValueSpan is set, minSpan does not work anymore.

maxSpan option

maxSpan (type: number, default: null) is used to restrict maximal window size as a percent value in the range of 0 to 100. If maxValueSpan is set, maxSpan does not work anymore.

minValueSpan option

minValueSpan (type: number|string|Date, default: null) is used to restrict minimal window size. For time axis it can be set as milliseconds (e.g., 3600 * 24 * 1000 * 5 for 5 days). For category axis it can be set as a number (e.g., 5 to represent 5 categories).

maxValueSpan option

maxValueSpan (type: number|string|Date, default: null) is used to restrict maximal window size. For time axis it can be set as milliseconds (e.g., 3600 * 24 * 1000 * 5 for 5 days). For category axis it can be set as a number (e.g., 5 to represent 5 categories).

orient option

orient (type: string, default: null) specifies whether the layout of dataZoom component is 'horizontal' or 'vertical'. It also indicates whether the horizontal axis or vertical axis is controlled by default in cartesian coordinate system. Valid values are 'horizontal' and 'vertical'.

zoomLock option

zoomLock (type: boolean, default: false) specifies whether to lock the size of the window (selected area). When set as true, the window size is locked and only translation (by mouse drag or touch drag) is available but zoom is not.

throttle option

throttle (type: number, default: 100) specifies the frame rate of views refreshing in milliseconds. If animation is true and animationDurationUpdate is greater than 0, keep throttle at default 100 (or set it greater than 0) for smooth dragging. If animation is false or animationDurationUpdate is 0 and data size is not very large but dragging seems not smooth, set throttle to 0 to improve performance.

rangeMode option

rangeMode (type: Array) format is [rangeModeForStart, rangeModeForEnd]. Each item can be 'value' or 'percent'. In 'value' mode, axis extent is determined only by startValue and endValue regardless of data and axis.min/axis.max. In 'percent' mode, 100 represents 100% of [dMin, dMax] where dMin is axis.min if specified, else data.extent[0], and dMax is axis.max if specified, else data.extent[1]. rangeMode is auto-determined by whether start/end are specified ('percent' mode) or startValue/endValue are specified ('value' mode), and is modified automatically when user behavior triggers view changes. When specifying rangeMode manually, it only works if both start and startValue are specified or both end and endValue are specified.

dataZoom percent value behavior with axis.min and axis.max

When yAxis.min and yAxis.max are set, start and end percentages (e.g., start: 20, end: 80) represent 20% to 80% out of [yAxis.min, yAxis.max]. When yAxis.min and yAxis.max are not set and the other dataZoom has filterMode: 'empty', start and end represent percentages out of [dataMinY to dataMaxY] of series.data. When the other dataZoom has filterMode: 'filter', start and end represent percentages out of the series.data filtered by that other dataZoom. The process sequence can be changed by reordering dataZoom definitions in the option.

dataZoom filterMode 'filter' example

When dataZoomX is set as filterMode: 'filter' and user drags it to change xAxis window to [2, 50], dataZoomX filters the first column of series.data, removing items where the value is outside [2, 50]. For example, with data [[12, 24, 36], [90, 80, 70], [3, 9, 27], [1, 11, 111]], after filtering to window [2, 50], the data becomes [[12, 24, 36], [3, 9, 27]]. The yAxis extent then auto-adapts to the remaining values (24 and 9) if yAxis.min and yAxis.max are not set.

dataZoom filterMode 'empty' example

When dataZoomY is set as filterMode: 'empty' and user drags it to change window to [10, 60], dataZoomY sets NaN to all values in the second column outside the window. For example, with data [[12, 24, 36], [90, 80, 70], [3, 9, 27], [1, 11, 111]], after setting window [10, 60], the data becomes [[12, 24, 36], [90, NaN, 70], [3, NaN, 27], [1, 11, 111]]. The first column (xAxis) remains unchanged, so dragging yAxis does not change xAxis extent.

dataZoom with dynamic data and rangeMode

When using dynamic data updated periodically via setOption, if dataZoom is in 'value' mode, the window will be kept in a fixed value range despite data changes. If in 'percent' mode, the window range will change with the appended data (assuming axis.min and axis.max are not specified).

dataZoom and axis extent interaction

When axis.min and axis.max are set (e.g., yAxis: {min: 0, max: 400}), this extent of the axis will not be modified by the behavior of dataZoom of other axes anymore.

dataZoom handleIcon requires path:// prefix for SVGPath in v5

In v5, the dataZoom.handleIcon option requires the 'path://' prefix if using an SVGPath.

dataZoom action - zoom data range

The dataZoom action zooms the data range. Parameters: dataZoomIndex (number, optional, default 0), start (number, 0-100 percentage), end (number, 0-100 percentage), startValue (number), endValue (number). Triggers datazoom event. Requires dataZoom component to be enabled.

takeGlobalCursor action - toggle dataZoom brush selection

The takeGlobalCursor action enables or disables the dataZoom brush selection state in toolbox. Parameters: key ('dataZoomSelect'), dataZoomSelectActive (true to enable, false to disable). Requires dataZoom component to be enabled.

Give your agent this brain