Chart (experimental) example

Format axis labels

Axis labels can be forced into date or currency format as shown.

‘currency’ will add a currency symbol (£) at the start of the labels.

‘percent’ will add a percent (%) to the end of the labels.

‘date’ will force a standard date format of YYYY-MM-DD to the labels, where they are in an undesirable date format. This can be useful if there are a lot of labels on the axes because the chart can do strange truncation sometimes.

How it looks (preview)

Cost per day

This chart shows cost per day.
This chart is a visual representation of the data available in the table.
Skip to "Cost per day" data table
View data as a table
Data table for "Cost per day"
2024 Jan 1 2024 Jan 2 2024 Jan 3 2024 Jan 4 2024 Jan 5 2024 Jan 6
Cost 14 29 45 63 54 22

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Cost per day",
  h_axis_title: "Day",
  v_axis_title: "Cost",
  chart_overview: "This chart shows cost per day.",
  v_axis_format: "currency",
  h_axis_format: "date",
  keys: [
    "2024 Jan 1",
    "2024 Jan 2",
    "2024 Jan 3",
    "2024 Jan 4",
    "2024 Jan 5",
    "2024 Jan 6"
  ],
  rows: [
    {
      label: "Cost",
      values: [
        14,
        29,
        45,
        63,
        54,
        22
      ]
    }
  ]
} %>