Chart (experimental) example

Minimal version

The minimal version presents a simplified version of the chart. This should only be used where there is not enough space to display a full chart, and the user is then given an option to see more information about the chart, for example by including a link next to the chart component. This must be part of the page, as this is not provided by the component itself.

Specifically, minimal mode:

• hides the chart heading
• removes the legend and X and Y axis values
• removes the data table and link to the data (if supplied) beneath the chart
• removes the part of the visually hidden accessibility message that links to the table
• removes the ability to interact with the chart (no hover popups or clicks)
• sets the size of the points on the chart to zero

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Page views",
  h_axis_title: "Day",
  v_axis_title: "Views",
  minimal: true,
  chart_overview: "This is a graph of views per day",
  keys: [
    "1st",
    "2nd",
    "3rd",
    "4th",
    "5th",
    "6th",
    "7th"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        5,
        119,
        74,
        117,
        33,
        89,
        79
      ]
    },
    {
      label: "January 2016",
      values: [
        3,
        8,
        37,
        82,
        118,
        85,
        80
      ]
    }
  ]
} %>