@ons/design-system 72.6.0 → 72.9.0

package/components/chart/chart.js

@@ -7,7 +7,9 @@ import SpecificChartOptions from './specific-chart-options';
 import LineChart from './line-chart';
 import BarChart from './bar-chart';
 import ColumnChart from './column-chart';
+import ScatterChart from './scatter-chart';
 import AnnotationsOptions from './annotations-options';
+import AreaChart from './area-chart';
 
 class HighchartsBaseChart {
     static selector() {
@@ -19,6 +21,10 @@ class HighchartsBaseChart {
         this.chartType = this.node.dataset.highchartsType;
         this.theme = this.node.dataset.highchartsTheme;
         const chartNode = this.node.querySelector('[data-highcharts-chart]');
+        if (!chartNode) {
+            console.error('No chart node found');
+            return;
+        }
         this.id = this.node.dataset.highchartsId;
         this.useStackedLayout = this.node.hasAttribute('data-highcharts-use-stacked-layout');
         this.config = JSON.parse(this.node.querySelector(`[data-highcharts-config--${this.id}]`).textContent);
@@ -28,11 +34,17 @@ class HighchartsBaseChart {
         }
         this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
         this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
-        this.commonChartOptions = new CommonChartOptions();
+        this.xAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile);
+        this.xAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop);
+        this.yAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile);
+        this.yAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop);
+        this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
         this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
         this.lineChart = new LineChart();
         this.barChart = new BarChart();
         this.columnChart = new ColumnChart();
+        this.areaChart = new AreaChart();
+        this.scatterChart = new ScatterChart();
         this.extraLines = this.checkForExtraLines();
         if (window.isCommonChartOptionsDefined === undefined) {
             this.setCommonChartOptions();
@@ -96,7 +108,9 @@ class HighchartsBaseChart {
         const specificChartOptions = this.specificChartOptions.getOptions();
         const lineChartOptions = this.lineChart.getLineChartOptions();
         const barChartOptions = this.barChart.getBarChartOptions(this.useStackedLayout);
-        const columnChartOptions = this.columnChart.getColumnChartOptions(this.useStackedLayout);
+        const columnChartOptions = this.columnChart.getColumnChartOptions(this.config, this.useStackedLayout, this.extraLines);
+        const areaChartOptions = this.areaChart.getAreaChartOptions();
+        const scatterChartOptions = this.scatterChart.getScatterChartOptions();
         // Merge specificChartOptions with the existing config
         this.config = this.mergeConfigs(this.config, specificChartOptions);
 
@@ -113,6 +127,14 @@ class HighchartsBaseChart {
             // Merge the column chart options with the existing config
             this.config = this.mergeConfigs(this.config, columnChartOptions);
         }
+        if (this.chartType === 'area') {
+            // Merge the area chart options with the existing config
+            this.config = this.mergeConfigs(this.config, areaChartOptions);
+        }
+        if (this.chartType === 'scatter') {
+            // Merge the scatter chart options with the existing config
+            this.config = this.mergeConfigs(this.config, scatterChartOptions);
+        }
 
         if (this.extraLines > 0) {
             this.config = this.mergeConfigs(this.config, this.lineChart.getLineChartOptions());
@@ -138,24 +160,34 @@ class HighchartsBaseChart {
     // Note this is not the same as the viewport width
     // All responsive rules should be defined here to avoid overriding existing rules
     setResponsiveOptions = () => {
-        const mobileCommonChartOptions = this.commonChartOptions.getMobileOptions();
+        let mobileChartOptions = this.commonChartOptions.getMobileOptions(this.xAxisTickIntervalMobile, this.yAxisTickIntervalMobile);
+        if (this.chartType === 'column') {
+            const mobileColumnChartOptions = this.columnChart.getColumnChartMobileOptions(
+                this.config,
+                this.useStackedLayout,
+                this.extraLines,
+            );
+            mobileChartOptions = this.mergeConfigs(mobileChartOptions, mobileColumnChartOptions);
+        }
+
         if (!this.config.responsive) {
             this.config.responsive = {};
         }
-        // If these conditions change, the styling for the footnotes container query in _chart.scss needs to be updated
+
         let rules = [
             {
                 condition: {
                     maxWidth: 400,
                 },
                 chartOptions: {
-                    ...mobileCommonChartOptions,
+                    ...mobileChartOptions,
                 },
             },
-            // We are using a slightly wider breakpoint for annotations
-            // to try and reduce the likelihood of them being automatically
-            // hidden by Highcharts
             {
+                // If these conditions change, the styling for the footnotes container query in _chart.scss needs to be updated
+                // We are using a slightly wider breakpoint for annotations
+                // to try and reduce the likelihood of them being automatically
+                // hidden by Highcharts
                 condition: {
                     maxWidth: 600,
                 },
@@ -196,9 +228,11 @@ class HighchartsBaseChart {
                 }
             }
             if (this.chartType === 'column') {
-                this.columnChart.updatePointPadding(this.config, currentChart, this.useStackedLayout, this.extraLines);
                 this.commonChartOptions.hideDataLabels(currentChart.series);
             }
+            if (this.chartType === 'scatter') {
+                this.scatterChart.updateMarkers(currentChart);
+            }
             if (this.chartType != 'bar') {
                 this.commonChartOptions.adjustChartHeight(currentChart, this.percentageHeightDesktop, this.percentageHeightMobile);
             }
@@ -208,7 +242,6 @@ class HighchartsBaseChart {
             if (this.extraLines > 0) {
                 currentChart.series.forEach((series) => {
                     if (series.type === 'line') {
-                        this.lineChart.updateLastPointMarker([series]);
                         this.commonChartOptions.hideDataLabels([series]);
                     }
                 });

package/components/chart/column-chart.js

@@ -1,10 +1,9 @@
 class ColumnChart {
-    getColumnChartOptions = (useStackedLayout) => {
+    getColumnChartOptions = (config, useStackedLayout, extraLines) => {
         return {
             plotOptions: {
                 column: {
-                    pointPadding: 0,
-                    groupPadding: 0,
+                    ...this.getPointPadding(config, useStackedLayout, extraLines, false),
                     borderRadius: 0,
                     borderWidth: 0,
                 },
@@ -15,33 +14,43 @@ class ColumnChart {
         };
     };
 
-    // Set the point padding between each bar to be 3% (an overall gap of 6%)
-    // For charts with fewer than 5 categories, we use a wider point padding of 4% (8% gap between bars)
-    // For cluster charts we use 0 for the point padding and a group padding of 4% (8% gap between bars)
-    updatePointPadding = (config, currentChart, stackedLayout, numberOfExtraLines) => {
-        const numberOfCategories = config.xAxis.categories.length;
-        const numberOfSeries = currentChart.series.length - numberOfExtraLines; // Get number of column series
+    getColumnChartMobileOptions = (config, useStackedLayout, extraLines) => {
+        return {
+            plotOptions: {
+                column: {
+                    ...this.getPointPadding(config, useStackedLayout, extraLines, true),
+                },
+            },
+        };
+    };
+
+    // Set spacing between bars based on screen size and number of categories:
+    // - For charts with enough categories (≥ 10 on mobile, ≥ 20 on desktop), use 10% spacing (0.1), i.e. 20% total gap between bars
+    // - For charts with fewer categories, use 20% spacing (0.2), i.e. 40% total gap
+    // - For non-clustered or stacked charts, spacing is applied as pointPadding
+    // - For clustered charts, spacing is applied as groupPadding
+    // - Max bar width: 75px (desktop), 55px (mobile)
+    getPointPadding = (config, stackedLayout, numberOfExtraLines, isMobile) => {
+        const numberOfCategories = config.xAxis.categories ? config.xAxis.categories.length : 0;
+        const numberOfSeries = config.series.length - numberOfExtraLines; // Get number of column series
+
+        const categoryThreshold = isMobile ? 10 : 20;
+        const maxPointWidth = isMobile ? 55 : 75;
+
         let pointPadding = 0;
         let groupPadding = 0;
+        let spacing = numberOfCategories >= categoryThreshold ? 0.1 : 0.2;
+
         // non-clustered charts or stacked charts
         if (numberOfSeries === 1 || stackedLayout === true) {
-            if (numberOfCategories > 5) {
-                pointPadding = 0.03;
-            } else {
-                pointPadding = 0.04;
-            }
-        } else {
-            // clustered charts
-            groupPadding = 0.04;
+            pointPadding = spacing;
+        }
+        // clustered charts
+        else {
+            groupPadding = spacing;
         }
 
-        // update the point width and padding
-        currentChart.series.forEach((series) => {
-            series.update({
-                pointPadding: pointPadding,
-                groupPadding: groupPadding,
-            });
-        });
+        return { pointPadding: pointPadding, groupPadding: groupPadding, maxPointWidth: maxPointWidth };
     };
 }
 

package/components/chart/common-chart-options.js

@@ -2,7 +2,7 @@ import ChartConstants from './chart-constants';
 
 // Options that are common to all chart types - these are set once in the Highcharts.setOptions() method
 class CommonChartOptions {
-    constructor() {
+    constructor(xAxisTickInterval, yAxisTickInterval) {
         this.constants = ChartConstants.constants();
 
         this.options = {
@@ -22,7 +22,6 @@ class CommonChartOptions {
                 symbolWidth: 20,
                 margin: 50,
                 navigation: {
-                    // ensures that when the legend is long, there is no pagination or scrollbar
                     enabled: false,
                 },
                 itemDistance: 30,
@@ -30,9 +29,8 @@ class CommonChartOptions {
                     color: this.constants.labelColor, // Prevents the text from changing color on hover
                 },
                 itemStyle: {
-                    cursor: 'default', // ensures that it does not change to a hand (pointer) on hover.
                     color: this.constants.labelColor,
-                    fontSize: this.constants.desktopFontSize,
+                    fontSize: this.constants.defaultFontSize,
                     fontWeight: 'normal',
                 },
                 // Disable click event on legend
@@ -64,7 +62,7 @@ class CommonChartOptions {
                 labels: {
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 title: {
@@ -78,7 +76,7 @@ class CommonChartOptions {
                     y: -25,
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 lineColor: this.constants.gridLineColor,
@@ -87,7 +85,7 @@ class CommonChartOptions {
                 plotLines: [
                     {
                         color: this.constants.zeroLineColor,
-                        width: 1,
+                        width: 1.5,
                         value: 0,
                         zIndex: 2,
                     },
@@ -96,19 +94,22 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
+                tickInterval: yAxisTickInterval,
             },
             xAxis: {
                 labels: {
+                    useHTML: true,
+                    rotation: 0,
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 title: {
                     align: 'high',
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 lineColor: this.constants.gridLineColor,
@@ -117,6 +118,7 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
+                tickInterval: xAxisTickInterval,
             },
             plotOptions: {
                 series: {
@@ -141,36 +143,13 @@ class CommonChartOptions {
 
     getOptions = () => this.options;
 
-    getMobileOptions = () => {
+    getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
         return {
-            legend: {
-                itemStyle: {
-                    fontSize: this.constants.mobileFontSize,
-                },
-            },
             xAxis: {
-                labels: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
-                title: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
+                tickInterval: xAxisTickInterval,
             },
             yAxis: {
-                labels: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
-                title: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
+                tickInterval: yAxisTickInterval,
             },
         };
     };

package/components/chart/example-area-chart.njk

@@ -0,0 +1,68 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "area",
+        "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": "true",
+        "series": [
+        {
+                "data": [
+                    39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
+                    43.9, 41.8
+                ],
+                "name": "Test series 3"
+            },
+            {
+                "data": [
+                    28.8, 23.2, 33.0, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7,
+                    43.9, 41.8
+                ],
+                "name": "Test series 2"
+            },
+            {
+                "data": [
+                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
+                    33.9, 31.8
+                ],
+                "name": "Test series 1"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Y axis title"
+        },
+        "percentageHeightDesktop": 50,
+        "percentageHeightMobile": 120
+    })
+}}

package/components/chart/example-clustered-column-chart.njk

@@ -63,7 +63,8 @@
                 "Non-store retailing ",
                 "Automotive fuel"
             ],
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "2022"

package/components/chart/example-column-chart-with-annotations.njk

@@ -43,7 +43,8 @@
                 "Mar 1911", "Mar 1912"
             ],
             "title":  "Years",
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percentage of GDP"

package/components/chart/example-column-chart.njk

@@ -43,7 +43,8 @@
                 "Mar 1911", "Mar 1912"
             ],
             "title":  "Years",
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percentage of GDP"

package/components/chart/example-column-with-line-chart.njk

@@ -29,7 +29,8 @@
         "legend": true,
         "xAxis": {
             "categories": ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"],
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percent (%)"
@@ -57,6 +58,8 @@
                 "name": "Another test data source",
                 "type": "line"
             }
-        ]
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
     })
 }}

package/components/chart/example-line-chart-with-markers.njk

@@ -0,0 +1,138 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "primary",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": "true",
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015'
+            ]
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}"
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, null, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, -0.2, -1.0, null, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            }
+            ,
+            {
+                "name": 'Extra test series 1',
+                "data": [
+                    3.2, 3.7, 3.8, 3.9, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 2',
+                "data": [
+                    4.5, 4.3, 4.4, 4.5, 4.4, 4.2, 4.1, 4.2, 4.0, 4.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 3',
+                "data": [
+                    5.5, 5.3, 5.4, 5.5, 5.4, 5.2, 5.1, 5.2, 5.0, 5.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 4',
+                "data": [
+                    -3.5, -3.3, -3.4, -3.5, -3.4, -3.2, -3.1, -3.2, -3.0, -3.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 5',
+                "data": [
+                    -4.5, -4.3, -4.4, -4.5, -4.4, -4.2, -4.1, -4.2, -4.0, -4.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 6',
+                "data": [
+                    -5.5, -5.3, -5.4, -5.5, -5.4, -5.2, -5.1, -5.2, -5.0, -5.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/example-line-chart.njk

@@ -154,7 +154,9 @@
                 'Aug 2024',
                 'Sep 2024',
                 'Oct 2024'
-            ]
+            ],
+            "tickIntervalDesktop": 15,
+            "tickIntervalMobile": 30
         },
         "yAxis": {
             "title": "Sales",