Javascript ChartsBar Series
javascript 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.

API Reference