@ons/design-system 72.8.0 → 72.9.1

package/components/chart/chart-constants.js

@@ -9,9 +9,90 @@ class ChartConstants {
             categoryLabelColor: '#414042',
             gridLineColor: '#d9d9d9',
             zeroLineColor: '#b3b3b3',
-            // Responsive font sizes
-            mobileFontSize: '0.75rem', // 12px
-            desktopFontSize: '0.875rem', // 14px
+            defaultFontSize: '0.875rem', // 14px
+            lineMarkerStyles: [
+                {
+                    radius: 4,
+                    symbol: 'circle',
+                },
+                {
+                    radius: 4,
+                    symbol: 'square',
+                },
+                {
+                    radius: 5,
+                    symbol: 'diamond',
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle',
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle-down',
+                },
+                {
+                    radius: 4,
+                    symbol: 'circle',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 4,
+                    symbol: 'square',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'diamond',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle-down',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+            ],
+            scatterMarkerStyles: [
+                {
+                    radius: 5,
+                    symbol: 'circle',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 5,
+                    symbol: 'square',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 6,
+                    symbol: 'diamond',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 6,
+                    symbol: 'triangle',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+            ],
         };
 
         return constants;

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);
@@ -37,6 +43,8 @@ class HighchartsBaseChart {
         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();
@@ -100,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);
 
@@ -117,15 +127,20 @@ 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());
             if (this.chartType === 'column') {
                 this.config = this.mergeConfigs(this.config, columnChartOptions);
             }
-            if (this.chartType === 'bar') {
-                this.config = this.mergeConfigs(this.config, barChartOptions);
-            }
         }
 
         // Disable the legend for single series charts
@@ -142,27 +157,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(
-            this.xAxisTickIntervalMobile,
-            this.yAxisTickIntervalMobile,
-        );
+        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,
                 },
@@ -195,7 +217,7 @@ class HighchartsBaseChart {
                 this.commonChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'bar') {
-                this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout, this.extraLines);
+                this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout);
                 if (!this.hideDataLabels) {
                     this.barChart.postLoadDataLabels(currentChart);
                 } else {
@@ -203,9 +225,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);
             }
@@ -215,7 +239,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

@@ -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,
                     },
@@ -104,14 +102,14 @@ class CommonChartOptions {
                     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,
@@ -147,35 +145,10 @@ class CommonChartOptions {
 
     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-column-with-line-chart.njk

@@ -58,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
+    })
+}}