Overview

Bar charts are a type of chart consisting of a series of bars that describe a dataset.

Best Practices

  • Bar charts are used to show change over time, especially for a single series
  • Bar charts are good for comparing relative size

Examples

Basic bar chart

Bar charts should include a title and be contained in an EzCard. The card title can optionally have a description and icon.

To chart a dataset as a bar chart, provide a dataset as a data array of objects with x and y values.

For example:

data = [{x: 'first', y: 1}, {x: 'second', y: 2}, {x: 'third', y: 3}];

Always provide title and a detailed description for assistive devices.

Typically, the independent axis will be the x-axis and the dependent axis will be the y-axis. To format the point labels on each axis, optionally pass a function to each dependentAxisLabelFormatter and/or independentAxisLabelFormatter. To customize which labels appear on each axis, optionally pass an array of values of the same type as the respective data values to each dependentAxisLabelValues and/or independentAxisLabelValues. Axis labels do not have to be passed as a static array, they can be dynamically generated as an array of values.

To customize the highest independent and dependent values displayed on the axes, pass numeric values to maxIndependentValue and maxDependentValue, respectively. Avoid explicitly defining independentAxisLabelValues and dependentAxisLabelValues simultaneously with maxIndependentValue or maxDependentValue.

Bar colors can be customized with theme colors. The default is primary.

If your dataset may sometimes be an empty array, work with design to render something other than a blank chart, perhaps an EzBlankState.

In some cases, like server-side rendering, a deterministic id may be needed. If needed, use prop idPrefix.

Code example
Playroom

Total spend

Last 12 months

$899,300

Total spend over the last 12 months totals $899,300 dollars.A bar chart for Total spend over the last 12 months totalling $899,300. Spend for each month is as follows: January spend was 100000 dollars, February spend was 120000 dollars, March spend was 145000 dollars, April spend was 140000 dollars, May spend was 180000 dollars, June spend was 145000 dollars, July spend was 245000 dollars, August spend was 180000 dollars, September spend was 240000 dollars, October spend was 140000 dollars, November spend was 170000 dollars, December spend was 180000 dollars.$0$50,000$100,000$150,000$200,000$250,000JanFebMarAprMayJunJulAugSepOctNovDec

Bar chart colors

EzBarChart supports theme palette properties (primary, secondary, error, warning, info, alert, neutral, and success) as well as all supported theme colors (ex. common.red100). Colors should have high enough contrast for accessibility.

The default barColor is primary.

Accessibility

See WAI-ARIA accessibility guidelines for SVG charts.

All charts should have a title and description.

Props

NameTypeDefaultDescription
data*
Datum[]
Array of data with x and y values of type string, number, array of strings, or function.
description*
string
Detailed accessible description for the chart.
title*
string
Accessible title for the chart.
barColor
EzThemeColors
primary
Bar chart bar color.
idPrefix
string
| number
Deterministic id for the chart.
dependentAxisLabelFormatter
func
The function to format the dependent axis points.
dependentAxisLabelValues
AxisLabelValue[]
Array of axis label values to customize the dependent axis labels.
independentAxisLabelFormatter
func
The function to format the independent axis points.
independentAxisLabelValues
AxisLabelValue[]
Array of axis label values to customize the independent axis labels.
*
 required

Current theme

Theme

Contents