Range Series
A range series is similar to a bar series, but it is used to represent ranges of data along the secondary axis, instead of a single point. The RangeSeries
component will, by default, draw whiskers (often used to represent error bars). However, by using the flexible renderRanges
and renderCaps
props, it can be used to draw range representations in a variety of ways. See composing charts for an example of how it can be used to create a Tukey ("box-and-whisker") plot.
Props
data(required)Array<[number, number[]]>
An array of range data to render. Unlike other data series, each point is given as a bipartite array consisting of an `x` value, and an array of `y` values (see the example above).
chartStyle
Styles declarations which will override the global chart style. The dataRange declarations are mostly of interest for this type of series.
view[number, number, number, number]
A viewbox, specified as [xMin, yMin, width, height]. Any part of the data which falls outside of this viewbox will be clipped (not shown). The default value is the viewbox of the Chart. If `null` is passed explicitly, no clipping will occur (data may render in the gutter).
renderCapsReact.Component<{ x: number; y: number; chartStyle }>
Render prop for the ends of the ranges. See the data component docs for more information. By default it renders a `DataRangeCap` and a replacement component should accept the same props. This prop can also accept an array of components. When multiple caps are rendered (see the data property above), each component will be used in succession.
renderRangesReact.Component<{ x: number; yMin: number; yMax: number; chartStyle }>
Render prop for the ranges. See the data component docs for more information. By default it renders a `DataRangeVertical` and a replacement component should accept the same props. This prop can also accept an array of components. When multiple ranges are rendered (see the data property above), each component will be used in succession. See the example in Composing Charts for how to use this to create Tukey plots.
Additionally, the range series component accepts all the pointer event handlers, which are rendered around each range. The elementPosition
for the range is considered to be the first y value in the set.