React ChartsBar Series

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:

• xKey defines the categories, and is mapped to the Category Axis.
• yKey provides the numerical values, corresponding to the Number Axis.
• yName configures display names, reflected in Tooltip Titles and Legend Items.

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 },
    // ...
],

API Reference