Chart (experimental) example

With a different point size

For some charts it may be better to reduce the point size so that the line is clearer. However it is recommended that the point size is larger to make it easier for users to move the mouse over them.

How it looks (preview)

Page views chart

This chart shows page views for January 2015.
This chart is a visual representation of the data available in the table.
Skip to "Page views chart" data table
View data as a table
Data table for "Page views chart"
2015-01-01 2015-01-02 2015-01-03 2015-01-04 2015-01-05 2015-01-06 2015-01-07 2015-01-08 2015-01-09 2015-01-10
January 2015 600 690 740 820 570 950 810 610 770 530

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  chart_overview: "This chart shows page views for January 2015.",
  point_size: 0,
  keys: [
    "2015-01-01",
    "2015-01-02",
    "2015-01-03",
    "2015-01-04",
    "2015-01-05",
    "2015-01-06",
    "2015-01-07",
    "2015-01-08",
    "2015-01-09",
    "2015-01-10"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        600,
        690,
        740,
        820,
        570,
        950,
        810,
        610,
        770,
        530
      ]
    }
  ]
} %>