JavaScript ChartsSeries Bars

Data points can be represented by vertical or horizontal bars in many series types, such as Bar, Range Bar, Waterfall and Box Plot.

Styling and customisation options such as fill, stroke and cornerRadius are configurable within each series. See API Reference for details.

Fixed Width Copy Link

Use the width option to set a fixed pixel width for each bar.

{
    series: [
        {
            type: 'bar',
            width: 30,
        },
    ],
}

In this example:

• Each bar in the series has a fixed width of 30 pixels.
• Toggle the fixed width off to let bars automatically size to fit the series area.
• Use the slider to change the width in pixels.

When using fixed width bars:

• Resizing the chart does not affect the width of the bars.
• The bars will be clipped if the fixed width exceeds the available space in the series area.
• Clipped bars can be viewed using the Scrollbar, Navigator or Zoom controls.

Band Alignment Copy Link

Use the bandAlignment option on a Category, Unit Time or Ordinal Time axis to align fixed width bars.

{
    axes: {
        x: {
            type: 'category',
            bandAlignment: 'start',
        },
    },
}

In this example:

• The category axis has an initial band alignment of start.
• Use the buttons to compare other band alignment options.
  • justify - bands are sized to fill the chart width, with the bars centred within each band.
  • start - bands are sized to fit the bar width and aligned to the start of the axis.
  • center - bands are sized to fit the bar width and centred within the chart width.
  • end - bands are sized to fit the bar width and aligned to the end of the axis.

Width Ratio Copy Link

Use the widthRatio option to set the bar width as a proportion of the default width.

{
    series: [
        {
            type: 'range-bar',
            grouped: false,
            widthRatio: 0.4,
        },
    ],
}

In this example:

• The World series uses the default width ratio of 1.
• The Australia series has an initial width ratio of 0.4.
• Use the slider to change the width ratio.
• This gives an Actual vs Target style visualisation, with the "World" series as a background reference.

Actual vs Target Bars Copy Link

Bars can be layered to create actual vs target comparisons by using grouped: false to overlay series.

{
    series: [
        {
            type: 'bar',
            yKey: 'target',
            grouped: false,
            fillOpacity: 0.3,
        },
        {
            type: 'bar',
            yKey: 'actual',
            grouped: false,
            widthRatio: 0.5,
        },
    ],
}

In this example:

• The Target series uses grouped: false to span the full category width as a background bar.
• The Actual series also uses grouped: false with a widthRatio of 0.5 to appear narrower in front.
• The Target series is specified first in the series array so that it appears behind the Actual series.
• The target has reduced fillOpacity and highlighting disabled.

Multiple Metrics Copy Link

Multiple grouped series can be displayed over a single ungrouped target bar.

In this example:

• The "Target" series is ungrouped and spans the full category width as a background reference.
• The "Europe" and "Asia" series are grouped by default, sharing their portion of the category width.
• When a series has grouped: false, its widthRatio is relative to the full category width.
• When grouped: true (the default), widthRatio is relative to the automatically calculated width allocated to each series within group.

Skip Null Bars Copy Link

Use the skipNullBars option to prevent bars with nullish values from taking up space in each category.

In this example:

• Various values in the data are set to null or undefined.
• When an axis has skipNullBars: true, these nullish values are not represented on the chart.

API Reference Copy Link