markArea overview and purpose
markArea is used to mark an area in a chart, for example to mark a time interval. It is defined by a data array containing two items representing the left-top point and the right-bottom point of a rectangle area.
mark-area
22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
markArea label configuration
markArea has a label property (Object) for configuring labels displayed in the mark area. The label defaults to showing (defaultShowLabel = true) and positioned at 'top' by default. It supports formatter.
markArea itemStyle configuration
markArea has an itemStyle property (Object) for styling the mark area appearance.
markArea emphasis state configuration
markArea has an emphasis property (Object) for configuring the emphasis state. Emphasis includes label (Object) and itemStyle properties. The label defaults to showing (defaultShowLabel = true) and positioned at 'top' by default with formatter support.
markArea z property
markArea has a z property (number) available since version 6.0.0 with a default value of 1. It specifies the stacking order of the mark area element.
markArea animation property
markArea has an animation property with a default value of false.
markArea data coordinate specification methods
markArea data points can be specified using three methods with priority order: (1) Screen coordinates using x and y properties (pixel values like 5 or percent like '35%'), (2) Data coordinates using coord property in cartesian coordinate systems (can use 'min', 'max', 'average' like coord: [23, 'min']), (3) Type-based positioning using type property ('min', 'max', 'average') with valueIndex or valueDim to specify the dimension.
markArea data.type property
markArea data items have a type property (string) that specifies positioning on min, max, or average values. Options are: 'min' (min value), 'max' (max value), 'average' (average value).
markArea data.valueIndex property
markArea data items have a valueIndex property (number) that specifies the dimension on which min, max, average are calculated when type is used. Values can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis). The dimension of the first axis is used by default.
markArea data.valueDim property
markArea data items have a valueDim property (string) that specifies the dimension on which min, max, average are calculated when type is used. The value can be the name of a dimension such as 'x', 'angle' in line chart, or 'open', 'close' in candlestick.
markArea data.coord property
markArea data items have a coord property (Array) in format [start coordinate, end coordinate]. The coordinate system can be 'x', 'y' on cartesian (grid), or 'radius', 'angle' on polar. Special values 'min', 'max', 'average' can be used like coord: ['min', 'min'] or coord: ['max', 'max'].
markArea data.y property
markArea data items have a y property (number) for specifying the y value on screen coordinate system. Can be a pixel number (like 5) or percent value (like '20%'). Default is 0.
markArea data.z2 property
markArea data items have a z2 property (number) available since version 6.0.0 that specifies the stacking relationship of overlapping graphic elements. A bigger value means higher layering order.
markArea data.name property
markArea data items have a name property (string) that specifies the name of the marker, which displays as a label. It can be used as a template variable 'data name' {b} in label formatter.
markArea data.value property
markArea data items have a value property (number) that stores the value of the item, though it is not necessary.
markArea data.itemStyle property
markArea data items have an itemStyle property (Object) for configuring the style of the item. The itemStyle of start point and end point will be merged together.
markArea data.label property
markArea data items have a label property (Object) for configuring label styling of the item. Label style of start point and end point will be merged together. The label defaults to showing (defaultShowLabel = true) and positioned at 'top' by default with formatter support.
markArea data.emphasis property
markArea data items have an emphasis property (Object) for configuring the emphasis state. Emphasis includes itemStyle (Object) and label (Object) properties.
markArea data.blur property
markArea data items have a blur property (Object) available since version 5.0.0 for configuring the blur state. Blur includes itemStyle (Object) and label (Object) properties. The label defaults to showing (defaultShowLabel = true) and positioned at 'top' by default with formatter support.
markArea data array structure
markArea data is an array where each element defines a mark area using two points: the first item is the left-top point and the second item is the right-bottom point of the rectangle area.
markArea axis-only definition
In cartesian coordinate systems, you can define a mark area based on only X or Y axis by specifying only xAxis or yAxis. For example, yAxis: 60 and yAxis: 80 creates a horizontal band between those values.
markArea data example structure
Example markArea data with different coordinate types: type-based (average to max), data coordinates (between two points), axis-based (yAxis values), data range (min to max), and screen coordinates (pixel/percent). Each entry is a two-item array defining the area boundaries.