Bar chart card
The Bar chart card groups entity values and displays their counts as bars.
When to use it
Use it to compare category sizes precisely. Use the Pie chart card when proportions are more important than comparing bar lengths.
Live example
The Card Lab groups deterministic interface records in the production bar chart.
Open the Bar chart Card Lab in a new page
Requirements
| Requirement | Value |
|---|---|
| Dashboard types | Standard |
| Minimum size | 3 columns by 5 rows |
| Data | Entity rows from the selected dashboard context |
| Backend capabilities | Entity search for the selected type |
| Permissions | Read access to fields used by the JMESPath expressions |
Configuration
The paths below are relative to cardConfig.data.
title
| Property | Value |
|---|---|
| Type | string |
| Required | No |
| Default | No title |
| Values | Plain text with dashboard interpolation |
Sets the chart heading.
entityType
| Property | Value |
|---|---|
| Type | string |
| Required | Yes |
| Default | No default |
| Values | device, interface, client, or group |
Selects the source collection.
groupJmesPath
| Property | Value |
|---|---|
| Type | JMESPath expression |
| Required | For useful output |
| Default | Runtime fallback: - |
| Values | An expression returning category labels |
The card counts equal values in the expression result.
For interface rows, [].state produces one bar per state.
colorMapping
| Property | Value |
|---|---|
| Type | Object mapping labels to colors |
| Required | No |
| Default | Carbon chart colors |
| Values | Presets red, green, yellow, orange, blue, or #RGB, #RRGGBB, #RRGGBBAA |
Assigns colors case-insensitively by rendered group label.
The guided editor presents rows, but saved dashboard JSON stores an object such as { "up": "green" }.
Missing or invalid configured labels remain visible as zero-value warning legend entries.
localCardFilter
| Property | Value |
|---|---|
| Type | JMESPath expression |
| Required | No |
| Default | No filter |
| Values | An expression returning an array |
Filters only this card before grouping.
Examples
Interface states
{
"cardId": "bar-chart",
"data": {
"title": "Interface states",
"entityType": "interface",
"groupJmesPath": "[].state",
"colorMapping": {
"UP": "green",
"DOWN": "red"
}
}
}
The chart shows one bar per state and uses stable colors for UP and DOWN.
Behavior
The chart refreshes with entity and filter changes and shows a skeleton while loading or after an error. Selecting a group applies a chart filter to the same entity context; selecting the active group again clears it. An invalid grouping expression is surfaced in the chart state instead of silently changing the source data.
Limitations and safety
The group expression should return simple values. Chart selection changes the shared entity filter and can therefore update other cards.
Related cards
See Pie chart and Aggregation pie chart.
