Components / Library Version 5.25.0

Column Chart

The column chart component (wm-chart-column) renders a simple column 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 column 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 (y-axis).
categoryAxisLabel
string
The label for the category axis (x-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 columns. Defaults to "none" (as-passed).
colors
"discrete" | "semantic" | string
The color palette to apply to the columns. Can be "discrete", "semantic", or a specific data viz token (e.g., "wmcolor-dataviz-discrete-01"). Defaults to "wmcolor-dataviz-discrete-01" (all columns same color). Setting a color on individual data items overrides the palette.
valueFormat
"amount" | "percentage" | "none"
Display format for the individual values shown above each column. 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 columns. Can be overridden per column in the data.
popoverText
string
Default popover text for all columns. Can be overridden per column in the data.
popoverButtonText
string
Default text for the popover button. If not provided, the button is not rendered. Can be overridden per column in the data.

Data

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

barLegend *
string
The label for the column.
amount *
number
Numeric value for the column.
color
string
A data viz color token (e.g., "wmcolor-dataviz-discrete-02"). Overrides the palette specified in the config for this column.
popoverTitle
string
The popover title for this column. Overrides the config value.
popoverText
string
The popover text for this column. Overrides the config value.
popoverButtonText
string
The text for the popover button for this column. 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-column when the popover button has been triggered. The event's detail property contains the data object for the column 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 column 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 columns.

Key Function
Arrow Right / Arrow Down
  • If the chart is in focus, brings focus to the first column and opens the popover.
  • If a column is in focus, brings focus to the next column.
Arrow Left / Arrow Up If a column is in focus, brings focus to the previous column.
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-column role application
wm-chart-column 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 columns are colored with --wmcolor-dataviz-discrete-01.

The color can be changed per column 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 columns than colors in the palette, the default color is used for remaining columns.

Responsiveness

The column chart stretches vertically according to available height, and grows horizontally according to the number of columns. When columns exceed the available width, the chart becomes horizontally scrollable.

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 y-axis labels and the values above each column).

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, column values are included in the legend and all references to keyboard interaction are removed.

Back to Top