Bar

Dataset Properties

The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bars is generally set this way.

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.

This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart.

Options are:

  • 'left'
  • 'top'
  • 'right'

Configuration Options

offsetGridLines

If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a bar chart while false for other charts by default.

This setting applies to the axis configuration. If axes are added to the chart, this setting will need to be set for each new axis.

  1. options = {
  2.     scales: {
  3.         xAxes: [{
  4.             gridLines: {
  5.                 offsetGridLines: true
  6.             }
  8.     }
  9. }

It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in Chart.defaults.bar. Changing the global options only affects charts created after the change. Existing charts are not changed.

barPercentage vs categoryPercentage

The following shows the relationship between the bar percentage option and the category percentage option.

Data Structure

  1. data: [20, 10]

You can also specify the dataset as x/y coordinates.

Stacked Bar Chart

Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

  1.     type: 'bar',
  2.     data: data,
  3.     options: {
  4.         scales: {
  5.             xAxes: [{
  6.                 stacked: true
  7.             }],
  8.             yAxes: [{
  9.                 stacked: true
  10.             }]
  11.         }
  12.     }
  13. });

The following dataset properties are specific to stacked bar charts.

Horizontal Bar Chart

A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

Example

Config Options

The default horizontal bar configuration is specified in Chart.defaults.horizontalBar.