@ons/design-system 72.8.0 → 72.9.0

package/components/chart/_chart.scss

@@ -83,3 +83,8 @@
     display: block !important;
     white-space: nowrap !important;
 }
+
+// Enforce cursor as auto in the legend
+.highcharts-a11y-proxy-group-legend button {
+    cursor: auto !important;
+}

package/components/chart/_macro.njk

@@ -1,7 +1,7 @@
 {% from "components/list/_macro.njk" import onsList %}
 
 {% macro onsChart(params) %}
-    {% set supportedChartTypes = ['line', 'bar', 'column'] %}
+    {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area'] %}
 
     {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
         {% set headingLevel = params.headingLevel %}
@@ -22,7 +22,6 @@
         data-highcharts-title="{{ params.title }}"
         data-highcharts-id="{{ params.id }}"
         {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
-        id="{{ params.id }}"
         {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
             data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
         {% endif %}
@@ -42,32 +41,34 @@
             data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
         {% endif %}
     >
-        {% if params.chartType in supportedChartTypes %}
-            <figure class="ons-chart">
-                {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
-                {{ openingSubtitleTag | safe }}
-                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
-                {% if params.description %}
-                    <p class="ons-u-vh">{{ params.description }}</p>
-                {% endif %}
+        <figure class="ons-chart">
+            {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
+            {{ openingSubtitleTag | safe }}
+            class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% if params.description %}
+                <p class="ons-u-vh">{{ params.description }}</p>
+            {% endif %}
+            {% if params.chartType in supportedChartTypes %}
                 <div data-highcharts-chart></div>
-                {#
-                    Footnotes for the annotations at mobile
-                    Hidden from screen readers because the full text will be read out where they appear in the chart
-                #}
-                <ul class="ons-chart__footnotes" aria-hidden="true">
-                    {% for annotation in params.annotations %}
-                        <li class="ons-chart__footnote_item">
-                            <span class="ons-chart__footnote-number">{{ loop.index }}</span>
-                            {{ annotation.text }}
-                        </li>
-                    {% endfor %}
-                </ul>
-                {% if params.caption %}
-                    <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
-                {% endif %}
-            </figure>
-        {% endif %}
+            {% else %}
+                <p data-invalid-chart-type><b>Chart type "{{ params.chartType }}" is not supported</b></p>
+            {% endif %}
+            {#
+                Footnotes for the annotations at mobile
+                Hidden from screen readers because the full text will be read out where they appear in the chart
+            #}
+            <ul class="ons-chart__footnotes" aria-hidden="true">
+                {% for annotation in params.annotations %}
+                    <li class="ons-chart__footnote_item">
+                        <span class="ons-chart__footnote-number">{{ loop.index }}</span>
+                        {{ annotation.text }}
+                    </li>
+                {% endfor %}
+            </ul>
+            {% if params.caption %}
+                <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
+            {% endif %}
+        </figure>
 
         {% if params.download.title and params.download.itemsList | length > 0 %}
             {{ openingDownloadTitleTag | safe }}
@@ -79,6 +80,7 @@
                 })
             }}
         {% endif %}
+        {% if params.chartType in supportedChartTypes %}
         {% set series = [] %}
         {% for item in params.series %}
             {%
@@ -91,6 +93,7 @@
                     "dataLabels": {
                         "enabled": item.dataLabels if item.dataLabels else false
                     },
+                    "connectNulls": item.connectNulls if item.connectNulls else false,
                     "type": item.type if item.type and item.type == 'line' else params.chartType
                 }
             %}
@@ -126,9 +129,10 @@
 
         <!-- Set scripts to pass the config values as json to the javascript -->
         <!-- prettier-ignore-start -->
-        <script type="application/json" data-highcharts-config--{{ params.id }}>
-            {{ config | tojson }}
-        </script>
+            <script type="application/json" data-highcharts-config--{{ params.id }}>
+                {{ config | tojson }}
+            </script>
+        {% endif %}
         {% if params.annotations %}
             <script type="application/json" data-highcharts-annotations--{{ params.id }}>
                 {{ params.annotations | tojson }}

package/components/chart/_macro.spec.js

@@ -15,6 +15,9 @@ import {
     EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
     EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+    EXAMPLE_SCATTER_CHART_PARAMS,
+    EXAMPLE_AREA_CHART_PARAMS,
+    EXAMPLE_INVALID_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -28,6 +31,10 @@ describe('Macro: Chart', () => {
                     expect(results).toHaveNoViolations();
                 });
 
+                test('THEN: it renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Line Chart');
+                });
+
                 test('THEN: it renders the subtitle', () => {
                     expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
                 });
@@ -153,6 +160,9 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"data":[5,15,25]');
                     expect(configScript).toContain('"name":"Category 2"');
                     expect(configScript).toContain('"data":[10,20,30]');
+                    expect(configScript).toContain('"connectNulls":true');
+                    expect(configScript).toContain('"marker":{"enabled":true}');
+                    expect(configScript).toContain('"dataLabels":{"enabled":true}');
                 });
             });
         });
@@ -854,4 +864,163 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Scatter chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_SCATTER_CHART_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('scatter');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Scatter Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('scatter-chart-123');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Area Chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_AREA_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes at least one area series', () => {
+                    expect(configScript).toContain('"type":"area"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('area');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Area Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('area-chart-123');
+                });
+
+                test('THEN: it includes the Highcharts JSON config', () => {
+                    expect(configScript).toContain('"text":"X Axis Title"');
+                    expect(configScript).toContain('"text":"Y Axis Title"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Legend', () => {
+            describe('WHEN: legend is enabled', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_AREA_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        caption: 'This is an example caption for the chart.',
+                    }),
+                );
+
+                test('THEN: it renders the caption when provided', () => {
+                    expect($('figcaption').text()).toBe('This is an example caption for the chart.');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Description', () => {
+            describe('WHEN: description is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        description: 'An accessible description for screen readers.',
+                    }),
+                );
+
+                test('THEN: it renders the description for accessibility', () => {
+                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Download', () => {
+            describe('WHEN: download object are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        download: {
+                            title: 'Download Chart Data',
+                            itemsList: [
+                                { text: 'Download as PNG', url: 'https://example.com/chart.png' },
+                                { text: 'Download as CSV', url: 'https://example.com/chart.csv' },
+                            ],
+                        },
+                    }),
+                );
+
+                test('THEN: it renders the download section correctly', () => {
+                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+
+                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    expect(downloadLinks.eq(0).text()).toBe('Download as PNG');
+                    expect(downloadLinks.eq(0).attr('href')).toBe('https://example.com/chart.png');
+                    expect(downloadLinks.eq(1).text()).toBe('Download as CSV');
+                    expect(downloadLinks.eq(1).attr('href')).toBe('https://example.com/chart.csv');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Invalid Chart', () => {
+        describe('GIVEN: Invalid chart type', () => {
+            describe('WHEN: an invalid chart type is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_INVALID_CHART_PARAMS));
+
+                test('THEN: it does not render the chart', () => {
+                    expect($('[data-highcharts-chart]').length).toBe(0);
+                });
+
+                test('THEN: it renders the error message', () => {
+                    expect($('[data-invalid-chart-type]').text()).toBe('Chart type "invalid" is not supported');
+                });
+
+                test('THEN: it does not include the Highcharts JSON config', () => {
+                    const configScript = $(`script[data-highcharts-config--invalid-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: it still renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Invalid Chart');
+                });
+
+                test('THEN: it still renders the subtitle', () => {
+                    expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
+                });
+
+                test('THEN: it still renders the description', () => {
+                    expect($('.ons-u-vh').text()).toBe('A detailed description');
+                });
+
+                test('THEN: it still renders the caption', () => {
+                    expect($('figcaption').text()).toBe('A detailed caption');
+                });
+
+                test('THEN: it still renders the download', () => {
+                    expect($('.ons-chart__download-title').text()).toBe('Download this chart');
+                });
+            });
+        });
+    });
 });

package/components/chart/annotations-options.js

@@ -16,7 +16,7 @@ class AnnotationsOptions {
                     padding: 3,
                     style: {
                         color: this.constants.labelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                         width: 150,
                         textAlign: 'left',
                     },

package/components/chart/area-chart.js

@@ -0,0 +1,26 @@
+class AreaChart {
+    getAreaChartOptions = () => {
+        return {
+            legend: {
+                symbolWidth: 12,
+                symbolHeight: 12,
+            },
+            plotOptions: {
+                area: {
+                    fillOpacity: 1,
+                    // Use a circle instead of the default blob plus line icon
+                    // 'rectangle' counterintuitively gives a circle, because the legend icon has a border radius of half it's height by default
+                    legendSymbol: 'rectangle',
+                    stacking: 'normal',
+                },
+                series: {
+                    marker: {
+                        enabled: false,
+                    },
+                },
+            },
+        };
+    };
+}
+
+export default AreaChart;

package/components/chart/bar-chart.js

@@ -26,7 +26,7 @@ class BarChart {
                             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
                             fontWeight: '700',
                             color: this.constants.labelColor,
-                            fontSize: this.constants.mobileFontSize,
+                            fontSize: this.constants.defaultFontSize,
                         },
                     },
                 },
@@ -119,7 +119,7 @@ class BarChart {
             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
             fontWeight: '700',
             color: this.constants.labelColor,
-            fontSize: this.constants.mobileFontSize,
+            fontSize: this.constants.defaultFontSize,
         },
     });
 

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,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());
@@ -142,27 +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(
-            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,
                 },
@@ -203,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);
             }
@@ -215,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 };
     };
 }