Components / Library Version 5.25.0

Bar Chart

The bar chart component (wm-chart-bar) renders a simple bar chart with an optional popover. Unlike the Chart component, data is provided to the component in JavaScript via two objects: config and data.

The popover will render if both popoverTitle and popoverText are provided (either in the config or in the data for a specific bar).

The legends can be displayed inside the component using the showLegend config property, or externally using the Chart Legend component.

PropertiesExamplesAPIAccessibilityNotes

Properties

* Required

Attributes

When an equivalent property exists in the config, the attribute value takes precedence.

subinfo
string
Optional text to display under the label.

Configuration

The bar chart initial configuration is set in JavaScript via chart.config.

label *
string
A description for the chart. It is required for accessibility reasons.
showLabel
boolean
Show or hide the label visually. Defaults to true.
valueAxisLabel *
string
The label for the value axis (x-axis).
categoryAxisLabel
string
The label for the category axis (y-axis). Optional.
gridMax *
number | "auto"
The maximum value for the grid. For the grid to render, this property must be set. If set to "auto", the component determines the maximum based on the highest value in the data.
showGrid
boolean
Show or hide the grid lines. Defaults to true.
sort
"ascending" | "descending" | "none"
The rendering order of the bars. Defaults to "none" (as-passed).
colors
"discrete" | "semantic" | string
The color palette to apply to the bars. Can be "discrete", "semantic", or a specific data viz token (e.g., "wmcolor-dataviz-discrete-01"). Defaults to "wmcolor-dataviz-discrete-01" (all bars same color). Setting a color on individual data items overrides the palette.
valueFormat
"amount" | "percentage" | "none"
Display format for the individual values shown next to each bar. Defaults to "amount".
decimalPlaces
number
The number of decimal places display values are rounded to. Defaults to 0.
printMode
boolean
Print display for the chart. Defaults to false. The attribute takes precedence.
printModeFormat
"amount" | "percentage"
The format in which values are displayed in the legend when the chart is printed or the property printMode is true. Defaults to "amount".
showLegend
"left" | "right" | "top" | "bottom" | "none"
Position of the internal legend. Defaults to "none" (no legend displayed). For external legends, use the Chart Legend component.
subinfo
string
Optional text to display under the label. The attribute takes precedence.
popoverTitle
string
Default popover title for all bars. Can be overridden per bar in the data.
popoverText
string
Default popover text for all bars. Can be overridden per bar in the data.
popoverButtonText
string
Default text for the popover button. If not provided, the button is not rendered. Can be overridden per bar in the data.

Data

The bar chart data is set in JavaScript via chart.data as an array of objects with the following properties:

barLegend *
string
The label for the bar.
amount *
number
Numeric value for the bar.
color
string
A data viz color token (e.g., "wmcolor-dataviz-discrete-02"). Overrides the palette specified in the config for this bar.
popoverTitle
string
The popover title for this bar. Overrides the config value.
popoverText
string
The popover text for this bar. Overrides the config value.
popoverButtonText
string
The text for the popover button for this bar. Overrides the config value.
Show Chart Controls
Value Format
Colors
Sort
Labels
Popover
Legend
Grid
Display Options
Print Mode Format:
Data Generation
Presets
Manual Data (JSON)

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Events

wmPopoverButtonClick
Emitted by wm-chart-bar when the popover button has been triggered. The event's detail property contains the data object for the bar that was clicked.

Screen Reader

When the user tabs to the chart, screen readers announce: "[Chart label]. Interactive chart. Use arrow keys to browse elements, press Tab to exit."

When navigating with arrow keys, the bar legend and value are announced (e.g., "Marine Biology, 250").

Keyboard Support

The component is focused as a whole when tabbing into it. Arrow keys are used to navigate between individual bars.

Key Function
Arrow Down
  • If the chart is in focus, brings focus to the first bar and opens the popover.
  • If a bar is in focus, brings focus to the next bar.
Arrow Up If a bar is in focus, brings focus to the previous bar.
Tab Exits the chart (bringing focus to the next focusable element).
Shift + Tab Exits the chart (bringing focus to the previous focusable element).
Enter Triggers the popover button (if popover is open and has a button).
Escape Closes the popover (if open).

Aria Role, State, and Properties

Element Attribute Value
wm-chart-bar role application
wm-chart-bar aria-roledescription Interactive chart

Chart Legend

The wm-chart-legend component is hidden from screen readers. The relevant data is announced when the user interacts with the chart.

Grid

For the grid to render, the gridMax config property must be set. The minimum is always 0, and the interval is calculated by the component based on the available space.

If gridMax is set to "auto", the component determines the maximum based on the highest value in the data. This is not recommended as it may make the highest values appear large while they may not be in absolute terms.

Colors

By default, all bars are colored with --wmcolor-dataviz-discrete-01.

The color can be changed per bar and can be set to any data viz token. As a convenience, you can specify a palette in the config ("discrete" or "semantic") to apply colors automatically. Setting a color value on individual data items overrides the palette.

If there are more bars than colors in the palette, the default color is used for remaining bars.

Responsiveness

The bar chart stretches horizontally according to available width, and grows vertically according to the number of bars.

Value Display

Large numbers are abbreviated with "K" when there is not enough space to show the full number (this abbreviation applies to both the x-axis labels and the values next to each bar).

Percentage values are rounded to whole numbers. The total may not amount to 100% because of rounding.

When printMode is true or when the chart is printed, bar values are included in the legend and all references to keyboard interaction are removed.

Back to Top