pictorialbar-series

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

pictorialBar series type and coordinate system requirements

Pictorial bar chart is a series type identified by the string 'pictorialBar'. It customizes the glyph (such as images or SVG PathData) used instead of rectangular bars, typically for infographic purposes. Pictorial bar charts can only be used with the Cartesian coordinate system (grid component), not with polar or geo coordinate systems.

pictorialBar reference bar and layout concept

In pictorialBar, each bar is called a 'reference bar', which is not displayed but serves as a layout reference for pictorial graphic elements. Pictorial graphic elements are positioned relative to their reference bar according to symbolPosition and symbolOffset settings.

pictorialBar symbol type options

The symbol property specifies the type of graphic elements and can be set as basic shapes (like 'circle', 'rect'), SVG PathData, or images. Default value is 'circle'.

pictorialBar symbolSize default and format

symbolSize specifies the size of graphic elements with default value ['100%', '100%']. It can be set as an array [width, height] like [20, 10], or as a single number like 10 (equivalent to [10, 10]). Both absolute values (like 10) and percent values (like '120%' or ['55%', 23]) are supported. When percent values are used, the final size is calculated based on the reference bar.

pictorialBar symbolPosition options and defaults

symbolPosition specifies the location of graphic elements with default value 'start'. Optional values are: 'start' (graphic element edge inscribes with reference bar start), 'end' (graphic element edge inscribes with reference bar end), 'center' (graphic element is at the center of the reference bar).

pictorialBar symbolOffset default and usage

symbolOffset specifies the offset of a graphic element from its original position with default value [0, 0]. Absolute values like 10 or percent values like '120%' or ['55%', 23] can be used, based on symbolSize. For example, [0, '-50%'] adjusts the graphic element upward by half its size.

pictorialBar symbolRotate option

symbolRotate specifies the degree of rotation for a graphic element. It rotates the element around its center but does not affect the element's position.

pictorialBar symbolRepeat options

symbolRepeat controls whether to repeat a graphic element with optional values: false/null/undefined (no repeat, one element per data item), true (repeat, group of elements per data item with repeat times calculated from data), a number (repeat specified number of times), 'fixed' (repeat with times calculated from symbolBoundingData, independent of data).

pictorialBar symbolRepeatDirection default and usage

symbolRepeatDirection specifies the render order of repeated graphic elements with default value 'start'. Optional values are 'start' and 'end'. It is useful when symbolMargin is negative (elements overlap) or when animationDelay/animationDelayUpdate is used to specify the order of index.

pictorialBar symbolMargin option and behavior

symbolMargin specifies the margin on both sides of a graphic element (in the direction of the value axis) and works only when symbolRepeat is used. Absolute values like 20 or percent values like '-30%' based on symbolSize can be used. Positive or negative values are allowed; negative values enable element overlap. A '!' suffix like '30%!' or '25!' adds extra blank on both ends.

pictorialBar symbolClip default and purpose

symbolClip determines whether to clip graphic elements with default value false. When false/null/undefined, whole graphic elements represent the value size. When true, clipped graphic elements represent the value size. It is typically used when both 'amount value' and 'current value' need to be displayed using two series.

pictorialBar symbolBoundingData purpose and behavior

symbolBoundingData defines a bounding area for graphic elements by translating a data value to a coordinate on the coordinate system. When symbolRepeat is not used, symbolBoundingData defaults to the reference bar size and determines the graphic element size. When symbolRepeat is used, symbolBoundingData defaults to the coordinate system's extreme value and defines where repeated elements layout. It can be an array like [-40, 60] to specify both negative and positive bounding data.

pictorialBar symbolPatternSize default

symbolPatternSize has a default value of 400 and specifies the size of pattern images used as the graphic element pattern. For example, a value of 400 displays the pattern image at 400px × 400px.

pictorialBar z property for overlap ordering

The z property specifies the overlap relationship between graphic elements, where a higher value means the element appears on top.

pictorialBar animationDelayUpdate default and callback signature

animationDelayUpdate specifies the delay time before update animation starts with default value 0. A callback function can be used with signature (dataIndex, params) where params includes index and count, allowing different delay times for different elements.

pictorialBar symbol attributes cascade to data items

Symbol-related attributes (symbol, symbolSize, symbolPosition, symbolOffset, symbolRotate, symbolRepeat, symbolRepeatDirection, symbolMargin, symbolClip, symbolBoundingData, symbolPatternSize) can be set at the series root level affecting all data items, or at each individual data item level in series-pictorialBar.data affecting only that item.

pictorialBar data item structure

Each data item in pictorialBar.data can have properties: name (string, the name of the data item), value (number, the value of the single data item), and groupId properties. Individual data items can also have their own label, labelLine, itemStyle, emphasis, blur, select, and tooltip configurations.

pictorialBar bar gap default value

The barGap property for pictorialBar has a default value of '-100%', following bar chart layout configuration.

pictorialBar label default position

The default position for pictorialBar labels is 'inside'.

pictorialBar clip property default

The clip property for pictorialBar series has a default value of false, introduced in version 5.5.0.

pictorialBar animationDelay callback example

Example callback functions for animationDelay: `animationDelay: function (dataIndex, params) { return params.index * 30; }` for forward order, or `animationDelay: function (dataIndex, params) { return (params.count - 1 - params.index) * 30; }` for reverse order.

Give your agent this brain