@ons/design-system 72.5.0 → 72.6.0

package/components/chart/_chart.scss

@@ -1,5 +1,7 @@
 .ons-chart {
     margin: 0;
+    container-type: inline-size;
+    max-width: $grid-max-width;
 
     &__download-title {
         @extend .ons-u-pt-l;
@@ -21,6 +23,55 @@
         line-height: 1.2rem;
         color: var(--ons-color-grey-75);
     }
+
+    &__footnote-number {
+        display: flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.125rem; // 18px
+        min-height: 1.125rem; // 18px
+        padding: 0.2143em; // 3px;
+        aspect-ratio: 1;
+        border: 1px solid var(--ons-color-grey-100);
+        border-radius: 50%;
+        font-size: 0.875rem; // 14px
+        line-height: 0;
+        background-color: var(--ons-color-white);
+        color: var(--ons-color-grey-100);
+    }
+
+    /* Override Highcharts styling */
+    &__footnote-number span {
+        position: static !important;
+        transform-origin: 0 0 !important;
+        font-size: inherit !important;
+        color: inherit !important;
+        top: 0 !important;
+        left: 0 !important;
+    }
+
+    &__footnotes {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 1rem;
+
+        // We need to use a container query here in order to match the responsive rules for Highcharts
+        // which is based on the width that the chart renders not the viewport
+        // Update the breakpoint value here if the Highcharts responsive rules change
+        @container (min-width: 601px) {
+            display: none;
+        }
+    }
+
+    &__footnote_item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem; // 14px
+        color: var(--ons-color-grey-100);
+    }
 }
 
 // This is a workaround to position the axis title to the left

package/components/chart/_macro.njk

@@ -23,6 +23,12 @@
         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 %}
+        {% if params.percentageHeightMobile and params.chartType != 'bar' %}
+            data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
+        {% endif %}
     >
         {% if params.chartType in supportedChartTypes %}
             <figure class="ons-chart">
@@ -33,6 +39,18 @@
                     <p class="ons-u-vh">{{ params.description }}</p>
                 {% endif %}
                 <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 %}
@@ -60,14 +78,15 @@
                     },
                     "dataLabels": {
                         "enabled": item.dataLabels if item.dataLabels else false
-                    }
+                    },
+                    "type": item.type if item.type and item.type == 'line' else params.chartType
                 })
             %}
         {% endfor %}
         {%
             set config = {
                 "legend": {
-                    "enabled" : params.legend
+                    "enabled" : params.legend if params.legend else true
                 },
                 "yAxis": {
                     "title": {
@@ -94,8 +113,13 @@
         <!-- 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 | dump | safe }}
+            {{ config | tojson }}
         </script>
+        {% if params.annotations %}
+            <script type="application/json" data-highcharts-annotations--{{ params.id }}>
+                {{ params.annotations | tojson }}
+            </script>
+        {% endif %}
         <!-- prettier-ignore-end -->
     </div>
 {% endmacro %}

package/components/chart/_macro.spec.js

@@ -8,7 +8,13 @@ import {
     EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
     EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
     EXAMPLE_BAR_CHART_PARAMS,
+    EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS,
     EXAMPLE_COLUMN_CHART_PARAMS,
+    EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+    EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -119,6 +125,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                test('THEN: it includes correct percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe('50');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                test('THEN: it includes correct percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe('120');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -229,6 +253,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS));
+                test('THEN: it does not include percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe(undefined);
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS));
+                test('THEN: it does not include percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -358,6 +400,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                test('THEN: it includes correct percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe('50');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                test('THEN: it includes correct percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe('120');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -434,4 +494,332 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Line chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                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');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--line-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":10,"y":1.3}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Bar chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS));
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes', () => {
+                    expect($('.ons-chart__footnotes').text()).toContain('1');
+                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--bar-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":2,"y":3}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Column chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes', () => {
+                    expect($('.ons-chart__footnotes').text()).toContain('1');
+                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--column-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":11,"y":31.8}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Bar Chart with Line', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_WITH_LINE_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes one series of type "bar" and another of type "line"', () => {
+                    expect(configScript).toContain('"type":"bar"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('bar');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('alternate');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Bar Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('bar-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_BAR_WITH_LINE_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_WITH_LINE_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_BAR_WITH_LINE_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: Series: Type', () => {
+            describe('WHEN: a series has an invalid type', () => {
+                const invalidTypeParams = {
+                    ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+                    series: [
+                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
+                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
+                    ],
+                };
+
+                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it defaults non-line series type to the chartType', () => {
+                    expect(configScript).not.toContain('"type":"scatter"');
+                    expect(configScript).toContain('"type":"bar"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Download', () => {
+            describe('WHEN: download object are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_WITH_LINE_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: Column Chart with Line', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes one series of type "column" and another of type "line"', () => {
+                    expect(configScript).toContain('"type":"column"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('column');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('alternate');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Column Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('column-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_COLUMN_WITH_LINE_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_COLUMN_WITH_LINE_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_COLUMN_WITH_LINE_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 is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_COLUMN_WITH_LINE_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('GIVEN: Params: Series: Type', () => {
+            describe('WHEN: a series has an invalid type', () => {
+                const invalidTypeParams = {
+                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                    series: [
+                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
+                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
+                    ],
+                };
+
+                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it defaults non-line series type to the chartType', () => {
+                    expect(configScript).not.toContain('"type":"scatter"');
+                    expect(configScript).toContain('"type":"column"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+            });
+        });
+    });
 });

package/components/chart/annotations-options.js

@@ -0,0 +1,78 @@
+import ChartConstants from './chart-constants';
+
+class AnnotationsOptions {
+    constructor(annotations) {
+        this.constants = ChartConstants.constants();
+        this.annotations = annotations;
+    }
+
+    getAnnotationsOptionsDesktop = () => {
+        let annotations = [
+            {
+                labels: [],
+                labelOptions: {
+                    shape: 'connector',
+                    borderColor: this.constants.labelColor,
+                    padding: 3,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.desktopFontSize,
+                        width: 150,
+                        textAlign: 'left',
+                    },
+                },
+                draggable: '',
+            },
+        ];
+        this.annotations.forEach((annotation) => {
+            annotations[0].labels.push({
+                point: {
+                    x: annotation.point.x,
+                    y: annotation.point.y,
+                    xAxis: 0,
+                    yAxis: 0,
+                },
+                text: annotation.text,
+                x: annotation.labelOffsetX,
+                y: annotation.labelOffsetY,
+            });
+        });
+        return annotations;
+    };
+
+    getAnnotationsOptionsMobile = () => {
+        let annotations = [
+            {
+                labels: [],
+                labelOptions: {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    // We use css styling for the rounded number annotation at mobile
+                    useHTML: true,
+                    className: 'ons-chart__footnote-number',
+                },
+                draggable: '',
+            },
+        ];
+        this.annotations.forEach((annotation, index) => {
+            annotations[0].labels.push({
+                point: {
+                    x: annotation.point.x,
+                    y: annotation.point.y,
+                    xAxis: 0,
+                    yAxis: 0,
+                },
+                text: index + 1,
+                x: 0,
+                y: 0,
+                // Ensures the full label is read out by screen readers
+                accessibility: {
+                    description: annotation.text,
+                },
+            });
+        });
+        return annotations;
+    };
+}
+
+export default AnnotationsOptions;

package/components/chart/bar-chart.js

@@ -76,6 +76,10 @@ class BarChart {
                 // Get the actual width of the data label
                 const labelWidth = point.dataLabel && point.dataLabel.getBBox().width;
                 // Move the data labels inside the bar if the bar is wider than the label plus some padding
+                if (series.type == 'line') {
+                    // If we have a bar chart with an extra line, exit early for the line series
+                    return;
+                }
                 if (point.shapeArgs.height > labelWidth + 20) {
                     point.update(insideOptions, false);
                 } else {
@@ -112,9 +116,9 @@ class BarChart {
 
     // This updates the height of the vertical axis and overall chart to fit the number of categories
     // Note that the vertical axis on a bar chart is the x axis
-    updateBarChartHeight = (config, currentChart, useStackedLayout) => {
+    updateBarChartHeight = (config, currentChart, useStackedLayout, numberOfExtraLines) => {
         const numberOfCategories = config.xAxis.categories.length;
-        const numberOfSeries = currentChart.series.length; // Get number of bar series
+        const numberOfSeries = currentChart.series.length - numberOfExtraLines; // Get number of bar series
         let barHeight = 30; // Height of each individual bar - set in bar-chart-plot-options
         let groupSpacing = 0; // Space we want between category groups, or between series groups for cluster charts
         let categoriesTotalHeight = 0;