Chart (experimental) example

With a different header max width

By default, the max-width of the header (heading and description) is set to 630px which is the width of a standard GOV.UK two-thirds column. This prevents the header being too wide for legibility purposes if it is rendered in a full width container.

In some cases you might want the max-width to match the width of a three quarter column. Therefore you can set header_three_quarters to increase the max width to 742.5px.

How it looks (preview)

This heading is intentionally quite long to demonstrate the max width functionality of the component

Additionally, this is a description with quite a lot of words so that you can see how the description looks with a max width of three-quarters.

Skip to "This heading is intentionally quite long to demonstrate the max width functionality of the component" data table

View data as a table

	January 2015	January 2016
1st	5	3
2nd	119	8
3rd	74	37
4th	117	82
5th	33	118
6th	89	85
7th	79	80

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  header_three_quarters: true,
  heading: "This heading is intentionally quite long to demonstrate the max width functionality of the component",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "Additionally, this is a description with quite a lot of words so that you can see how the description looks with a max width of three-quarters.",
  height: 200,
  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
      ]
    }
  ]
} %>