Line Series

A line series can be used to represent data in two ways: (1) as data points rendered at the actual coordinates given, and as a line connecting those data points. By default, only the line is rendered; points can be shown by setting a value for the dataPointSymbol style declaration. Conversely, the line can be hidden by setting the dataLineStrokeWidth style declaration to 0.

It is important to note that event handles are created at the actual points within the series, regardless of whether the data points are visible. This is because the line does not have any data-centric meaning: it is an imaginary way of connecting data points. The actual target size of these invisible handles can be controlled with the dataPointMinTargetRadius style declaration.

<Chart height={300} view={[0, 0, 4, 5]} gutter={[5, 5, 5, 5]}>
  <XAxis />
  <YAxis />
  <LineSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 3.5],
    ]}
    chartStyle={{
      dataLineStroke: 'green',
      dataPointFill: 'green',
    }}
  />
  <LineSeries
    data={[
      [1, 1],
      [2, 3],
      [3, 4],
    ]}
    chartStyle={{
      dataLineStroke: 'blue',
      dataPointFill: 'blue',
      dataPointSymbol: 'circle',
    }}
  />
</Chart>
<Chart height={300} view={[0, 0, 4, 5]} gutter={[5, 5, 5, 5]}>
  <XAxis />
  <YAxis />
  <LineSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 3.5],
    ]}
    chartStyle={{
      dataLineStroke: 'green',
      dataPointFill: 'green',
    }}
  />
  <LineSeries
    data={[
      [1, 1],
      [2, 3],
      [3, 4],
    ]}
    chartStyle={{
      dataLineStroke: 'blue',
      dataPointFill: 'blue',
      dataPointSymbol: 'circle',
    }}
  />
</Chart>

Props

data(required)Point[]

An array of Points (itself a bipartite array of [x, y] values).

view[number, number, number, number]

A viewbox, specified as [xMin, yMin, width, height]. Any data point that falls outside of this box will not be rendered. The default value is the viewbox of the Chart.

chartStyle

Styles declarations which will override the global chart style. Usually, the databox styles are used with this type of data series.

handlerMetaRecord<any>

Metadata to pass to handler callbacks.

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).

renderLineReact.Component<{ data; chartStyle }>

Render prop for the line connecting the data points. See the data component docs for more information. By default it renders a `DataLine` and a replacement component should accept the same props.

renderPointReact.Component<{ x: number; y: number; chartStyle }>

Render prop for the line connecting the data points. See the data component docs for more information. By default it renders a `DataPoint` and a replacement component should accept the same props.

Additionally, the line series component accepts all the pointer event handlers, which are rendered around the individual data points.

Bar Series

Range Series