@ons/design-system 72.10.5 → 72.10.7

package/components/chart/_macro.spec.js

@@ -25,6 +25,7 @@ import {
     EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS,
     EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS,
     EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS,
+    EXAMPLE_IFRAME_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -207,6 +208,30 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: unsupportedChartText', () => {
+            describe('WHEN: unsupportedChartText is provided', () => {
+                const params = { ...EXAMPLE_INVALID_CHART_PARAMS, unsupportedChartText: 'this chart type is not valid' };
+                const $ = cheerio.load(renderComponent('chart', params));
+
+                test('THEN: it renders the unsupported chart text in the correct element', () => {
+                    const invalid = $('[data-invalid-chart-type]');
+                    expect(invalid.length).toBe(1);
+                    expect(invalid.text().trim()).toContain('- this chart type is not valid');
+                });
+            });
+
+            describe('WHEN: unsupportedChartText is not provided', () => {
+                const params = { ...EXAMPLE_INVALID_CHART_PARAMS };
+                const $ = cheerio.load(renderComponent('chart', params));
+
+                test('THEN: it renders the default unsupported chart text', () => {
+                    const invalid = $('[data-invalid-chart-type]');
+                    expect(invalid.length).toBe(1);
+                    expect(invalid.text().trim()).toBe('"invalid" - chart type is not supported');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
@@ -604,14 +629,14 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('Another test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('Another test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -634,12 +659,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -663,12 +688,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -953,6 +978,26 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: Footnotes', () => {
+            describe('WHEN: footnotes are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        footnotes: {
+                            title: 'Footnotes',
+                            content:
+                                '<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>',
+                        },
+                    }),
+                );
+                test('THEN: it renders the footnotes', () => {
+                    expect($('#footnotes--area-chart-123').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').find('ol').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').text()).toContain('Footnotes');
+                });
+            });
+        });
     });
 
     describe('FOR: Boxplot Chart', () => {
@@ -1146,7 +1191,7 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the error message', () => {
-                    expect($('[data-invalid-chart-type]').text()).toBe('Chart type "invalid" is not supported');
+                    expect($('[data-invalid-chart-type]').text().trim()).toBe('"invalid" - chart type is not supported');
                 });
 
                 test('THEN: it does not include the Highcharts JSON config', () => {
@@ -1280,16 +1325,327 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes sequentially', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test point annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis range annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('3');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis range annotation with the label inside');
-                    expect($('.ons-chart__footnotes').text()).toContain('4');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis reference line annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('5');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test point annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis range annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('3');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis range annotation with the label inside');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('4');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('5');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis reference line annotation');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Axis Min, Max, startOnTick, endOnTick', () => {
+        const BASE_PARAMS = {
+            id: 'test-chart',
+            title: 'Test Chart',
+            xAxis: {
+                title: 'X Axis Title',
+                categories: ['A', 'B', 'C'],
+                type: 'linear',
+                labelFormat: '{value}',
+            },
+            yAxis: {
+                title: 'Y Axis Title',
+                labelFormat: '{value}',
+            },
+            series: [],
+        };
+
+        describe('GIVEN: chartType supports xAxis min/max (bar, scatter)', () => {
+            test('THEN: xAxis min and max are included in config when provided', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'scatter',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: 1,
+                        max: 10,
+                        startOnTick: true,
+                        endOnTick: false,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).toContain('"min":1');
+                expect(configScript).toContain('"max":10');
+                expect(configScript).toContain('"startOnTick":true');
+                expect(configScript).toContain('"endOnTick":false');
+            });
+
+            test('THEN: xAxis min and max are NOT included if not defined', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'scatter',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: undefined,
+                        max: undefined,
+                        startOnTick: undefined,
+                        endOnTick: undefined,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                const config = JSON.parse(configScript);
+
+                expect(config.xAxis.min).toBeUndefined();
+                expect(config.xAxis.max).toBeUndefined();
+                expect(config.xAxis.startOnTick).toBeUndefined();
+                expect(config.xAxis.endOnTick).toBeUndefined();
+            });
+        });
+
+        describe('GIVEN: chartType supports yAxis min/max (line, bar, column, scatter, area, columnrange, boxplot)', () => {
+            test('THEN: yAxis min and max are included in config when provided', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    yAxis: {
+                        ...BASE_PARAMS.yAxis,
+                        min: 0,
+                        max: 100,
+                        startOnTick: false,
+                        endOnTick: true,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).toContain('"min":0');
+                expect(configScript).toContain('"max":100');
+                expect(configScript).toContain('"startOnTick":false');
+                expect(configScript).toContain('"endOnTick":true');
+            });
+
+            test('THEN: yAxis min and max are NOT included if not defined', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    yAxis: {
+                        ...BASE_PARAMS.yAxis,
+                        min: undefined,
+                        max: undefined,
+                        startOnTick: undefined,
+                        endOnTick: undefined,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                const config = JSON.parse(configScript);
+
+                expect(config.yAxis.min).toBeUndefined();
+                expect(config.yAxis.max).toBeUndefined();
+                expect(config.yAxis.startOnTick).toBeUndefined();
+                expect(config.yAxis.endOnTick).toBeUndefined();
+            });
+        });
+
+        describe('GIVEN: chartType does NOT support axis min/max', () => {
+            test('THEN: xAxis min and max are ignored', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: 1,
+                        max: 10,
+                        startOnTick: true,
+                        endOnTick: true,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).not.toContain('"min":1');
+                expect(configScript).not.toContain('"max":10');
+                expect(configScript).not.toContain('"startOnTick":true');
+                expect(configScript).not.toContain('"endOnTick":true');
+            });
+        });
+    });
+
+    describe('FOR: Iframe chart', () => {
+        describe('GIVEN: Params: Iframe chart', () => {
+            describe('WHEN: an iframe url param is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the iframe', () => {
+                    expect($('[data-chart-iframe]').length).toBe(1);
+                });
+
+                test('THEN: it includes the iframe title as a data attribute', () => {
+                    const iframe = $('[data-chart-iframe]');
+                    expect(iframe.attr('data-title')).toBe(EXAMPLE_IFRAME_CHART_PARAMS.title);
+                });
+
+                test('THEN: the theme parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            theme: 'secondary',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-theme]').length).toBe(0);
+                });
+
+                test('THEN: the percentageHeightDesktop and percentageHeightMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            percentageHeightDesktop: 50,
+                            percentageHeightMobile: 10,
+                        }),
+                    );
+
+                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            xAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                            yAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-x-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-x-axis-tick-interval-mobile]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
+                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
+                });
+
+                test('THEN: the customReferenceLineValue parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            yAxis: {
+                                customReferenceLineValue: 10,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
+                });
+
+                test('THEN: the legend for boxplot charts is not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'boxplot',
+                            legend: true,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('.ons-chart__boxplot-legend').length).toBe(0);
+                });
+
+                test('THEN: the Highcharts config is not included', () => {
+                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: the annotations footnotes and scripts are not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            annotations: [
+                                {
+                                    text: 'A test point annotation',
+                                    point: { x: 2, y: 3 },
+                                    labelOffsetX: 10,
+                                    labelOffsetY: -50,
+                                },
+                            ],
+                            rangeAnnotations: [
+                                {
+                                    text: 'A test x axis range annotation',
+                                    range: { axisValue1: 10, axisValue2: 15 },
+                                    axis: 'x',
+                                    labelOffsetX: 150,
+                                    labelOffsetY: 0,
+                                },
+                                {
+                                    text: 'A test y axis range annotation with the label inside',
+                                    range: { axisValue1: 5, axisValue2: 10 },
+                                    axis: 'y',
+                                    labelInside: true,
+                                    labelWidth: 250,
+                                },
+                            ],
+                            referenceLineAnnotations: [
+                                {
+                                    text: 'A test x axis reference line annotation',
+                                    value: 34,
+                                    axis: 'x',
+                                },
+                                {
+                                    text: 'A test y axis reference line annotation',
+                                    value: 12,
+                                    axis: 'y',
+                                    labelWidth: 100,
+                                },
+                            ],
+                        }),
+                    );
+
+                    expect($('[data-annotations-footnotes]').length).toBe(0);
+                    expect($('[data-highcharts-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-range-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-reference-line-annotations--iframe-chart-123]').length).toBe(0);
+                });
+
+                test('THEN: invalid chart type is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'foobar',
+                        }),
+                    );
+
+                    expect($('[data-invalid-chart-type]').length).toBe(0);
                 });
             });
         });

package/components/chart/annotations-options.js

@@ -49,7 +49,7 @@ class AnnotationsOptions {
                     borderColor: 'transparent',
                     // We use css styling for the rounded number annotation at mobile
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                 },
                 draggable: '',
             },

package/components/chart/bar-chart.js

@@ -38,6 +38,7 @@ class BarChart {
                 // Update the category label colours for bar charts
                 labels: {
                     style: {
+                        textOverflow: 'ellipsis',
                         color: this.constants.categoryLabelColor,
                     },
                     useHTML: false,

package/components/chart/chart-iframe-resize.dom.js

@@ -0,0 +1,8 @@
+import ChartIframeResize from './chart-iframe-resize';
+import domready from '../../js/domready';
+
+domready(async () => {
+    [ChartIframeResize].forEach((Component) => {
+        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+    });
+});

package/components/chart/chart-iframe-resize.js

@@ -0,0 +1,16 @@
+import pym from 'pym.js';
+
+class ChartIframeResize {
+    static selector() {
+        return '[data-chart-iframe]';
+    }
+
+    constructor(node) {
+        this.node = node;
+        new pym.Parent(this.node.getAttribute('id'), this.node.dataset.url, {
+            title: this.node.dataset.title,
+        });
+    }
+}
+
+export default ChartIframeResize;

package/components/chart/chart.js

@@ -31,6 +31,11 @@ class HighchartsBaseChart {
             console.error('No chart node found');
             return;
         }
+
+        // Add a CSS class to the chart based on the chart type (e.g., 'bar-chart-container', 'line-chart-container')
+        // This allows type-specific styling in CSS.
+        chartNode.classList.add(`${this.chartType}-chart-container`);
+
         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);

package/components/chart/example-area-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,72 @@
+{% 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",
+            "min": -25,
+            "max": 150,
+            "startOnTick": true,
+            "endOnTick": false
+        },
+        "percentageHeightDesktop": 50,
+        "percentageHeightMobile": 120
+    })
+}}

package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,59 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "uuid",
+        "caption": "Source: Monthly Business Survey, Retail 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": "#"
+                }
+            ]
+        },
+        "xAxis": {
+            "categories": [
+                "All retailing",
+                "All retailing excluding Automotive fuel",
+                "Food stores",
+                "Department stores",
+                "Other non-food stores",
+                "Textile clothing \u0026 footwear stores",
+                "Household goods stores",
+                "Non-store retailing",
+                "Automotive fuel"
+            ],
+            "title": "Retailing",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)",
+            "min": -5,
+            "max": 10,
+            "startOnTick": true,
+            "endOnTick": false
+        },
+        "series": [
+            {
+                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
+                "dataLabels": true,
+                "name": "Jan-25"
+            }
+        ]
+    })
+}}

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

@@ -26,6 +26,10 @@
                 }
             ]
         },
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
         "xAxis": {
             "categories": [
                 "All retailing",