Bar Series

A bar series represents data points as boxes that span the distance between the data point value and the zero value in along one axis, and an arbitrary, stylistic distance along the other axis. It is often used when one axis is categorical. When multiple bar series are shown, the bars are offset along this second axis such that they are shown side-by-side.

<Chart height={100} view={[0, 0, 4, 5]} isCanvas={false}>
  <XAxis />
  <YAxis />
  <BarVerticalSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 5],
    ]}
    chartStyle={{
      dataBoxFill: 'blue',
      seriesXOffset: -5,
    }}
  />
  <BarVerticalSeries
    data={[
      [1, 1],
      [2, 1.5],
      [3, 2.5],
    ]}
    chartStyle={{
      dataBoxFill: 'red',
      seriesXOffset: 5,
    }}
  />
</Chart>
<Chart height={100} view={[0, 0, 4, 5]} isCanvas={false}>
  <XAxis />
  <YAxis />
  <BarVerticalSeries
    data={[
      [1, 3],
      [2, 2],
      [3, 5],
    ]}
    chartStyle={{
      dataBoxFill: 'blue',
      seriesXOffset: -5,
    }}
  />
  <BarVerticalSeries
    data={[
      [1, 1],
      [2, 1.5],
      [3, 2.5],
    ]}
    chartStyle={{
      dataBoxFill: 'red',
      seriesXOffset: 5,
    }}
  />
</Chart>

The seriesStyles helper functions can be used to generate dataBoxLeftOffset values.

Note that the current name of the Bar series component is BarVerticalSeries.

Help wanted: create a BarHorizontalSeries.

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

renderBarReact.Component<{x: number; yMin: number; yMax: number; chartStyle }>

Render prop for the data boxes rendered by this series type. See the data component docs for more information. By default it renders a `DataRangeVertical` and a replacement component should accept the same props.

Additionally, the bar series component accepts all the pointer event handlers, which are rendered around each individual bar.

Axes

Line Series