Merge pull request #4405 from alphagov/chart-points

Adjust chart options and settings

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Adjust chart options and settings ([PR #4405](https://github.com/alphagov/govuk_publishing_components/pull/4405))
 * Change colours on square option for share links ([PR #4409](https://github.com/alphagov/govuk_publishing_components/pull/4409))
 
 ## 45.4.1

app/views/govuk_publishing_components/components/_chart.html.erb

@@ -19,6 +19,8 @@
   link ||= false
   height ||= 400
   padding ||= false
+  point_size ||= 10
+  y_axis_auto_adjust ||= false
 
   chart_id = "chart-id-#{SecureRandom.hex(4)}"
   table_id = "table-id-#{SecureRandom.hex(4)}"
@@ -39,12 +41,13 @@
   font_19 = { color: '#000', fontName: 'GDS Transport', fontSize: '19', italic: false }
   legend = 'none'
   legend = { position: 'top', textStyle: font_16 } unless hide_legend
-  pointSize = 10
-  pointSize = 0 if minimal
+  point_size = 0 if minimal
   enableInteractivity = true
   enableInteractivity = false if minimal
   textPosition = nil
   textPosition = 'none' if minimal
+  y_axis_view_window_min = 0
+  y_axis_view_window_min = "auto" if y_axis_auto_adjust
 
   if !minimal && !chart_heading
     raise ArgumentError, "A chart heading must be provided for accessibility purposes."
@@ -56,22 +59,23 @@
     curveType: 'none',
     enableInteractivity: enableInteractivity,
     legend: legend,
-    pointSize: pointSize,
+    pointSize: point_size,
     height: height,
     tooltip: { isHtml: true },
     hAxis: {
       textStyle: font_16,
-      format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter
       title: h_axis_title,
       titleTextStyle: font_19,
       textPosition: textPosition,
     },
     vAxis: {
-      format: '#,###,###',
       textStyle: font_16,
       title: v_axis_title,
       titleTextStyle: font_19,
       textPosition: textPosition,
+      viewWindow: {
+        min: y_axis_view_window_min
+      }
     },
   }
 

app/views/govuk_publishing_components/components/docs/chart.yml

@@ -6,7 +6,7 @@ body: |
   The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript,
   an accessible view on the data for screenreaders, and a simple view of the raw data for all users.
 
-  The `chart_overview` option can be used to provide an explanation for screen reader users of what the graph shows.
+  The `chart_overview` option can be used to provide an explanation for screen reader users of what the chart shows.
 accessibility_criteria: |
   Charts must:
 
@@ -137,6 +137,80 @@ examples:
             - 118
             - 85
             - 80
+  with_a_different_point_size:
+    description: 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.
+    data:
+      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
+  scale_y_axis_based_on_data:
+    description: |
+      By default the Y-axis will always start at zero, but this may not always be required.
+
+      If there are empty items in the data the chart line will either discontinue or leave a gap, as shown.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      chart_overview: This chart shows page views for January 2015.
+      hide_legend: true
+      y_axis_auto_adjust: true
+      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"
+        - "2015-01-11"
+        - "2015-01-12"
+        - "2015-01-13"
+      rows:
+        - label: January 2015
+          values:
+            - 1500
+            - 1190
+            - 1740
+            - 1820
+            - 1270
+            -
+            -
+            - 1450
+            - 1110
+            - 1210
+            - 1670
+            - 1430
+            - 1352
   with_a_different_heading_level:
     description: Use a different heading level for the chart heading. It defaults to a H2.
     data: