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 Copy Link

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 Copy Link

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 Copy Link

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 Copy Link

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 Copy Link

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.

Grouped Category Copy Link

To display the bars in hierarchical grouped categories, use a Grouped Category Axis.

Customisation Copy Link

Corner Radius Copy Link

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 Copy Link