Data Components

The LineSeries, BarVerticalSeries, and RangeSeries components provide a flexible way to create the most common types of charts. Under the hood, these Series components use Data components to render individual data points. These data components are described in detail here.

Since some charts contain data points that performance can be an issue, these components make use of custom prop-checking function to minimize re-rendering. A consequence of this is that chartStyle must be passed as a prop, rather than accessed by context.

DataPoint

A symbol rendered at its actual position on both axes. Event handlers are triggered on an invisible circle surrounding the data point, which can have a larger radius based on the dataPointMinTargetRadius property.

x(required)number
Position on the x-axis.
y(required)number
Position on the y-axis.
chartStyle(required)ChartStyle
The *full* chart styles object.

See also the dataPoint chart style chart styles.

DataSeriesLine

A line connecting a set/array of data. By default, the line is a broken set of segments, but can be smoothed by changing the dataLineCurveType style.

data(required)Array<[number, number]>
An array of data points, each of which is a bipartite ([x, y]) array.
chartStyle(required)ChartStyle
The *full* chart styles object.

DataBoxVertical

A component which is rendered at a particular point on the x-axis, and between two points on the y-axis. Sometimes, only one of the points on the y-axis is meaningful: for example, in the BarVerticalSeries component, each DataBoxVertical is drawn from 0 to the "real" data point.

See also the dataBox styles.

x(required)number
The x position of the data point.
yMin(required)number
The lower y position of the range.
yMax(required)number
The upper x position of the range.
chartStyle(required)ChartStyle
The *full* chart styles object.

DataRangeVertical

This is a variant of DataBoxVertical that renders a single line instead of a rectangle. See the dataRange styles.