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:
xKeydefines the categories, and is mapped to the Category Axis.yKeyprovides the numerical values, corresponding to the Number Axis.yNameconfigures 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 },
// ...
],
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
Properties available on the AgBarSeriesOptions interface.
The number to normalise the bar stacks to. Has no effect when grouped is true. For example, if normalizedTo is set to 100, the bar stacks will all be scaled proportionally so that each of their totals is 100.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
Human-readable description of the y-values. If supplied, a corresponding yName will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.
Bar rendering direction.
Note: This option affects the layout direction of X and Y data values.
Function used to return formatting for individual bars, based on the given parameters. If the current bar is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.