React ChartsBar Series
react logo

A Bar Series visualises numerical data with proportional bars that can be grouped or stacked, and displayed in either vertical or horizontal layouts.

Simple Bar

By default, bars are grouped, enabling side-by-side comparison of data against the same category.

To create a Bar Series, use the bar series type.

series: [
    { type: 'bar', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
    { type: 'bar', xKey: 'quarter', yKey: 'mac', yName: 'Mac' },
    { type: 'bar', xKey: 'quarter', yKey: 'ipad', yName: 'iPad' },
    { type: 'bar', xKey: 'quarter', yKey: 'wearables', yName: 'Wearables' },
    { type: 'bar', xKey: 'quarter', yKey: 'services', yName: 'Services' },
],

In this configuration:

Horizontal Bar

To show a Horizontal Bar Series, set direction: 'horizontal'.

series: [
    { type: 'bar', direction: 'horizontal', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
    // ...
],

When the direction is 'horizontal' the xKey will define categories on the y-axis, while the yKey will represent numerical values along the x-axis.

Stacked Bar

Stacked bars are useful for visualising data in a cumulative manner across different categories.

To stack bars enable the stacked series option.

series: [
    { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true },
    // ...
],

Normalised Bar

The normalizedTo series option allows normalising bar totals to any non-zero value.

series: [
    { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, normalizedTo: 100 },
    // ...
],

Grouped Stacks

The stackGroup property allows for stacking bars in distinct sets by specifying which series are grouped together. Series with an unspecified stackGroup will be stacked together by default.

series: [
    { type: 'bar', xKey: 'quarter', yKey: 'iphone', stackGroup: 'Devices' },
    { type: 'bar', xKey: 'quarter', yKey: 'mac', stackGroup: 'Devices' },
    { type: 'bar', xKey: 'quarter', yKey: 'ipad', stackGroup: 'Devices' },
    { type: 'bar', xKey: 'quarter', yKey: 'wearables', stackGroup: 'Other' },
    { type: 'bar', xKey: 'quarter', yKey: 'services', stackGroup: 'Other' },
],

A matching legendItemName provided enables the creation of multiple bar series with synchronised legend items. When a legend item is clicked, all items possessing a matching legendItemName will be toggled collectively.

Customisation

Corner Radius

The corner radius can be customised with the cornerRadius property.

series: [
    { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, cornerRadius: 10 },
    { type: 'bar', xKey: 'quarter', yKey: 'mac', stacked: true, cornerRadius: 10 },
    // ...
],

A cornerRadius should be provided for all series within a stacked bar. The corner radius will only be applied at the end of a stack, but may affect more than one series.

API Reference