Visualisation definition Bar chart

The bar chart visualisation type represents data as a bar chart visualisation.

---

When to use

Use this visualisation type when you need to display data as a bar chart.

---

Definition

{
  id: 'bar-definition-example',
  type: 'bar',
  display: 'bar title',
  description: 'bar visualisation description',
  column: {
    ...
  }
}

See the Visualisation definition docs for the definition schema

See the Targeting data for and how to target data with the column

---

Examples

---

Define dataset columns as bar labels

In this example we will define which dataset columns to use in the bar chart as follows:

• each column will be new bar in the chart
• the column value will be represented as the size of the bar
• each row will be a new dataset in the chart

Example Dataset

| est_id | has_ethnicity | ethnicity_is_missing | has_religion | religion_is_missing |
|--------|---------------|----------------------|--------------|---------------------|
| MDI    | 407           | 485                  | 300          | 500                 |
| SLI    | 584           | 701                  | 280          | 320                 |
| LTI    | 729           | 725                  | 220          | 214                 |
| DAI    | 520           | 765                  | 220          | 214                 |

Definition

{
  id: 'metric-bar-example',
  type: 'bar',
  display: 'Ethnicity values',
  description: '',
  column: {
    key: [
      {
        id: 'est_id',
        display: 'Establishment ID'
      }
    ],
    measure: [
      {
        id: 'has_ethnicity',
        display: 'Has ethnicity',  
      },
      {
        id: 'ethnicity_is_missing',
        display: 'No ethnicity',  
      },
    ],
  },
}

Visualisation dataset

This definition will return the following dataset

| est_id | has_ethnicity | ethnicity_is_missing |
|--------|---------------|----------------------|
| MDI    | 407           | 485                  | 
| SLI    | 584           | 701                  |
| LTI    | 729           | 725                  |
| DAI    | 520           | 765                  |

see here for more info on targeting data

Visualisation:

---

Dataset values as labels

In this example we will use values in a specific column for the bar labels, and use another column as the values for the bar.

Here we can define the axis field on the specific dataset columns we want to use for the labels (x), and their corresponding values (y)

Example Dataset

| ts         |  est_id  | wing  | cell  | diet        | count | 
|------------|----------| ------|-------|-------------|-------|
| 2025/02/25 |          |       |       |             | 5000  |
| 2025/02/25 | MDI      |       |       |             | 1109  |
| 2025/02/25 |          |       |       | vegetarian  | 1507  |
| 2025/02/25 |          |       |       | Pescatarian | 1130  |
| 2025/02/25 |          |       |       | Vegan       | 1354  |
| 2025/02/25 |          |       |       | Omnivore    | 1009  |
| 2025/02/25 | MDI      |       |       | vegetarian  | 169   |
| 2025/02/25 | MDI      |       |       | Pescatarian | 463   |
| 2025/02/25 | MDI      |       |       | Vegan       | 397   |
| 2025/02/25 | MDI      |       |       | Omnivore    | 80    |

Definition:

{
  id: 'bar-diet-totals',
  type: 'bar',
  display: 'Diet totals as bar chart',
  description: '',
  column: {
    key: [],
    measure: [
      {
        id: 'diet',
        display: 'Diet',
        axis: 'x',    // <-- column whose values are used as bar labels
      },
      {
        id: 'count',
        display: 'Total prisoners',
        axis: 'y',    // <-- column whose values are used as the bar size
      },
    ],
    expectNull: true,
  },
}

Visualisation dataset

This definition will return the following dataset

| ts         |  est_id  | wing  | cell  | diet        | count | 
|------------|----------| ------|-------|-------------|-------|
| 2025/02/25 |          |       |       | vegetarian  | 1507  |
| 2025/02/25 |          |       |       | Pescatarian | 1130  |
| 2025/02/25 |          |       |       | Vegan       | 1354  |
| 2025/02/25 |          |       |       | Omnivore    | 1009  |

see here for more info on targeting data

Visualisation: