@ons/design-system 72.10.8 → 72.10.10

package/components/chart/_macro.spec.js

@@ -63,10 +63,40 @@ describe('Macro: Chart', () => {
                     expect($('figcaption').length).toBe(0);
                     expect($('.ons-chart__download-title').length).toBe(0);
                 });
+
+                test('THEN: it renders the chart container with the correct aria attributes', () => {
+                    expect($('.ons-chart__container').attr('aria-label')).toBe('chart container');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: instructions', () => {
+            describe('WHEN: instructions is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                        instructions: 'Some custom instructions for the chart.',
+                    }),
+                );
+
+                test('THEN: it renders the chart with the correct instructions text', () => {
+                    const expectedText = 'Some custom instructions for the chart.';
+                    expect($('#chart-instructions-chart-123').text().trim()).toBe(expectedText);
+                });
+            });
+
+            describe('WHEN: instructions is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_REQUIRED_PARAMS));
+
+                test('THEN: it renders the chart with the default instructions text', () => {
+                    const expectedText =
+                        'Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.';
+                    expect($('#chart-instructions-chart-123').text().trim()).toBe(expectedText);
+                });
             });
         });
 
-        describe('GIVEN: Params: Theme', () => {
+        describe('GIVEN: Params: theme', () => {
             describe('WHEN: theme is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -81,7 +111,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Heading Level', () => {
+        describe('GIVEN: Params: headingLevel', () => {
             describe('WHEN: heading level is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -111,7 +141,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Tick Interval', () => {
+        describe('GIVEN: Params: tickInterval', () => {
             describe('WHEN: tick interval is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -143,39 +173,146 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Config', () => {
-            describe('WHEN: config params are provided', () => {
+        describe('GIVEN: Params: xAxis', () => {
+            describe('WHEN: xAxis options are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
                 const configScript = $(`script[data-highcharts-config--chart-456]`).html();
 
-                test('THEN: it renders the legend when enabled', () => {
-                    expect(configScript).toContain('"enabled":true');
-                });
-
-                test('THEN: it includes correct xAxis properties', () => {
+                test('THEN: it renders the xAxis correctly', () => {
                     expect(configScript).toContain('"text":"X Axis Label"');
                     expect(configScript).toContain('"categories":["A","B","C"]');
-                    expect(configScript).toContain('"type":"linear"');
                 });
+            });
+
+            describe('WHEN: xAxis min and max are provided', () => {
+                test('THEN: xAxis min and max are ignored', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        chartType: 'line',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                            min: 1,
+                            max: 10,
+                            startOnTick: true,
+                            endOnTick: true,
+                        },
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                        },
+                        series: [],
+                    };
+
+                    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('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis options are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                const configScript = $(`script[data-highcharts-config--chart-456]`).html();
 
-                test('THEN: it includes correct yAxis properties', () => {
+                test('THEN: it renders the yAxis correctly', () => {
                     expect(configScript).toContain('"text":"Y Axis Label"');
                     expect(configScript).toContain('"labels":{"format":"{value:,.f}"}');
                 });
+            });
+
+            describe('WHEN: yAxis min and max are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'line',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+
+            describe('WHEN: yAxis min and max are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'line',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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: Params: series', () => {
+            describe('WHEN: series data is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                const configScript = $(`script[data-highcharts-config--chart-456]`).html();
 
-                test('THEN: it includes correct series data', () => {
+                test('THEN: it renders the series correctly', () => {
                     expect(configScript).toContain('"name":"Category 1"');
                     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}');
                 });
             });
         });
 
-        describe('GIVEN: Params: Percentage Height Desktop', () => {
+        describe('GIVEN: Params: percentageHeightDesktop', () => {
             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', () => {
@@ -184,7 +321,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Percentage Height Mobile', () => {
+        describe('GIVEN: Params: percentageHeightMobile', () => {
             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', () => {
@@ -222,9 +359,7 @@ describe('Macro: Chart', () => {
                     expect(noScriptFallbackImage).toContain('alt="A description of the fallback image for screen readers"');
                 });
             });
-        });
 
-        describe('GIVEN: Params: no fallbackImageAlt', () => {
             describe('WHEN: fallbackImageAlt is not provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -239,7 +374,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Caption', () => {
+        describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -278,7 +413,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Description', () => {
+        describe('GIVEN: Params: description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -288,13 +423,13 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
 
-        describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
+        describe('GIVEN: Params: download', () => {
+            describe('WHEN: download object is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
@@ -320,7 +455,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Legend', () => {
+        describe('GIVEN: Params: legend', () => {
             describe('WHEN: legend parameter is provided and set to true', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -362,12 +497,145 @@ describe('Macro: Chart', () => {
                         legend: 'false',
                     }),
                 );
-                test('THEN: it renders the legend', () => {
+                test('THEN: it renders the legend default value', () => {
                     const configScript = $(`script[data-highcharts-config--line-chart-legend-tests-123]`).html();
                     expect(configScript).toContain('"legend":{"enabled":true}');
                 });
             });
         });
+
+        describe('GIVEN: Params: rangeAnnotations', () => {
+            describe('WHEN: range annotations params are provided on the yAxis with label width', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_ON_Y_AXIS_WITH_LABEL_WIDTH_PARAMS),
+                );
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes the range annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-range-annotations--line-chart-range-annotations-y-axis-123]`).html();
+                    expect(configScript).toContain('"text":"A test y axis range annotation with a label width of 250px"');
+                    expect(configScript).toContain('"axis":"y"');
+                    expect(configScript).toContain('"labelWidth":250');
+                });
+            });
+
+            describe('WHEN: range annotations params are provided on the xAxis', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_ON_X_AXIS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes the range annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-range-annotations--line-chart-range-annotations-x-axis-123]`).html();
+                    expect(configScript).toContain('"text":"A test x axis range annotation"');
+                    expect(configScript).toContain('"range":{"axisValue1":10,"axisValue2":15}');
+                    expect(configScript).toContain('"axis":"x"');
+                    expect(configScript).toContain('"labelOffsetX":150');
+                    expect(configScript).toContain('"labelOffsetY":0');
+                });
+            });
+
+            describe('WHEN: range annotations params are provided with label inside', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes the range annotations JSON config', () => {
+                    const configScript = $(
+                        `script[data-highcharts-range-annotations--line-chart-range-annotations-label-inside-123]`,
+                    ).html();
+                    expect(configScript).toContain('"text":"A test y axis range annotation with the label inside"');
+                    expect(configScript).toContain('"axis":"y"');
+                    expect(configScript).toContain('"labelInside":true');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: referenceLineAnnotations', () => {
+            describe('WHEN: reference line annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes the reference line annotations JSON config', () => {
+                    const configScript = $(
+                        `script[data-highcharts-reference-line-annotations--line-chart-reference-line-annotations-123]`,
+                    ).html();
+                    expect(configScript).toContain('"text":"A test x axis reference line annotation"');
+                    expect(configScript).toContain('"value":34');
+                    expect(configScript).toContain('"axis":"x"');
+                    expect(configScript).toContain('"text":"A test y axis reference line annotation"');
+                    expect(configScript).toContain('"value":12');
+                    expect(configScript).toContain('"axis":"y"');
+                    expect(configScript).toContain('"labelWidth":100');
+                });
+            });
+        });
+
+        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__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__annotations-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('GIVEN: Params: mixedAnnotations', () => {
+            describe('WHEN: mixed annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes sequentially', () => {
+                    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: Bar Chart', () => {
@@ -400,29 +668,159 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Config', () => {
-            describe('WHEN: config params are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_BAR_CHART_PARAMS,
-                        legend: true,
-                    }),
-                );
+        describe('GIVEN: Params: legend', () => {
+            describe('WHEN: legend is true', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_BAR_CHART_PARAMS, legend: true }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+                    expect(configScript).toContain('"legend":{"enabled":true}');
+                });
+            });
 
-                test('THEN: it renders the legend when enabled', () => {
+            describe('WHEN: legend is false', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_BAR_CHART_PARAMS, legend: false }));
+
+                test('THEN: it disables the legend', () => {
                     const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
-                    expect(configScript).toContain('"enabled":true');
+                    expect(configScript).toContain('"legend":{"enabled":false}');
                 });
+            });
+
+            describe('WHEN: legend is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_PARAMS));
 
-                test('THEN: it includes correct xAxis and yAxis titles', () => {
+                test('THEN: it defaults to enabled', () => {
                     const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+                    expect(configScript).toContain('"legend":{"enabled":true}');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: xAxis', () => {
+            describe('WHEN: xAxis options are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it renders the xAxis correctly', () => {
                     expect(configScript).toContain('"text":"X Axis Title"');
+                });
+            });
+
+            describe('WHEN: xAxis min and max are provided', () => {
+                test('THEN: xAxis min and max are ignored', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        chartType: 'bar',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                            min: 1,
+                            max: 10,
+                            startOnTick: true,
+                            endOnTick: true,
+                        },
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                        },
+                        series: [],
+                    };
+
+                    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('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis options are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it renders the yAxis correctly', () => {
                     expect(configScript).toContain('"text":"Y Axis Title"');
                 });
             });
+
+            describe('WHEN: yAxis min and max are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'line',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+
+            describe('WHEN: yAxis min and max are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'line',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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: Params: Percentage Height Desktop', () => {
+        describe('GIVEN: Params: percentageHeightDesktop', () => {
             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', () => {
@@ -431,7 +829,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Percentage Height Mobile', () => {
+        describe('GIVEN: Params: percentageHeightMobile', () => {
             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', () => {
@@ -440,7 +838,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Caption', () => {
+        describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -455,7 +853,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Description', () => {
+        describe('GIVEN: Params: description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -465,13 +863,13 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-bar-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
 
-        describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
+        describe('GIVEN: Params: download', () => {
+            describe('WHEN: download object is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_BAR_CHART_PARAMS,
@@ -497,8 +895,8 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Stacked Bar Chart', () => {
-            describe('WHEN: Stacked layout is enabled', () => {
+        describe('GIVEN: Params: useStackedLayout', () => {
+            describe('WHEN: useStackedLayout is set to true', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_BAR_CHART_PARAMS,
@@ -515,26 +913,69 @@ describe('Macro: Chart', () => {
                 });
             });
         });
-    });
-
-    describe('FOR: Column Chart', () => {
-        describe('GIVEN: Params: required', () => {
-            describe('WHEN: required params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
 
+        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 chart container with the 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 renders the footnotes', () => {
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
-                test('THEN: it does NOT render optional fields', () => {
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__annotations-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('GIVEN: Params: Series', () => {
+            describe('WHEN: chartType is not compatible with line series', () => {
+                const params = {
+                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                    chartType: 'bar',
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $('script[data-highcharts-config--column-chart-123]').html();
+
+                test('THEN: it falls back to chartType and does not include "line" series', () => {
+                    expect(configScript).not.toContain('"type":"line"');
+                    expect(configScript).toContain('"type":"bar"');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Column Chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_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 the 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 does NOT render optional fields', () => {
                     expect($('figcaption').length).toBe(0);
                     expect($('.ons-chart__download-title').length).toBe(0);
                 });
@@ -547,29 +988,124 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Config', () => {
-            describe('WHEN: config params are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_COLUMN_CHART_PARAMS,
-                        legend: true,
-                    }),
-                );
+        describe('GIVEN: Params: legend', () => {
+            describe('WHEN: legend is true', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_COLUMN_CHART_PARAMS, legend: true }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                    expect(configScript).toContain('"legend":{"enabled":true}');
+                });
+            });
+
+            describe('WHEN: legend is false', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_COLUMN_CHART_PARAMS, legend: false }));
 
-                test('THEN: it renders the legend when enabled', () => {
+                test('THEN: it disables the legend', () => {
                     const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
-                    expect(configScript).toContain('"enabled":true');
+                    expect(configScript).toContain('"legend":{"enabled":false}');
                 });
+            });
+
+            describe('WHEN: legend is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
 
-                test('THEN: it includes correct xAxis and yAxis titles', () => {
+                test('THEN: it defaults to enabled', () => {
                     const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                    expect(configScript).toContain('"legend":{"enabled":true}');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: xAxis', () => {
+            describe('WHEN: xAxis options are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it renders the xAxis correctly', () => {
                     expect(configScript).toContain('"text":"X Axis Title"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis options are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it renders the yAxis correctly', () => {
                     expect(configScript).toContain('"text":"Y Axis Title"');
                 });
             });
+            describe('WHEN: yAxis min and max are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'column',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+            describe('WHEN: yAxis min and max are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'column',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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: Params: Percentage Height Desktop', () => {
+        describe('GIVEN: Params: percentageHeightDesktop', () => {
             describe('WHEN: percentage height desktop is provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
                 test('THEN: it includes correct percentage height desktop', () => {
@@ -578,7 +1114,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Percentage Height Mobile', () => {
+        describe('GIVEN: Params: percentageHeightMobile', () => {
             describe('WHEN: percentage height mobile is provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
                 test('THEN: it includes correct percentage height mobile', () => {
@@ -587,7 +1123,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Caption', () => {
+        describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -602,7 +1138,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Description', () => {
+        describe('GIVEN: Params: description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -612,13 +1148,13 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-column-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
 
-        describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
+        describe('GIVEN: Params: download', () => {
+            describe('WHEN: download object is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_COLUMN_CHART_PARAMS,
@@ -644,7 +1180,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Stacked Column Chart', () => {
+        describe('GIVEN: Params: useStackedLayout', () => {
             describe('WHEN: Stacked layout is enabled', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -662,69 +1198,8 @@ 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__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__annotations-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__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__annotations-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('GIVEN: Params: annotations', () => {
             describe('WHEN: annotations params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS));
 
@@ -742,7 +1217,7 @@ describe('Macro: Chart', () => {
                     expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
-                test('THEN: it includes the Annotations JSON config', () => {
+                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}');
@@ -750,11 +1225,9 @@ describe('Macro: Chart', () => {
                 });
             });
         });
-    });
 
-    describe('FOR: Column Chart with Line', () => {
-        describe('GIVEN: Params: required', () => {
-            describe('WHEN: required params are provided', () => {
+        describe('GIVEN: Params: series', () => {
+            describe('WHEN: seriesType is line and 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();
 
@@ -781,7 +1254,8 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"text":"Y Axis Title"');
                 });
             });
-            describe('WHEN: more than one line is provided', () => {
+
+            describe('WHEN: seriesType is line and more than one line is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
@@ -799,78 +1273,8 @@ describe('Macro: Chart', () => {
                     expect(lineTypeMatches).toBe(1);
                 });
             });
-        });
-
-        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', () => {
+            describe('WHEN: a series item has an invalid type', () => {
                 const invalidTypeParams = {
                     ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
                     series: [
@@ -889,23 +1293,6 @@ describe('Macro: Chart', () => {
                 });
             });
         });
-
-        describe('GIVEN: Params: ChartType', () => {
-            describe('WHEN: chartType is not compatible with line series', () => {
-                const params = {
-                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
-                    chartType: 'bar',
-                };
-
-                const $ = cheerio.load(renderComponent('chart', params));
-                const configScript = $('script[data-highcharts-config--column-chart-123]').html();
-
-                test('THEN: it falls back to chartType and does not include "line" series', () => {
-                    expect(configScript).not.toContain('"type":"line"');
-                    expect(configScript).toContain('"type":"bar"');
-                });
-            });
-        });
     });
 
     describe('FOR: Scatter chart', () => {
@@ -926,38 +1313,175 @@ describe('Macro: Chart', () => {
                 });
             });
         });
-    });
-
-    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();
-                });
+        describe('GIVEN: Params: xAxis', () => {
+            describe('WHEN: xAxis options are provided', () => {
+                test('THEN: xAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        chartType: 'scatter',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                            min: 1,
+                            max: 10,
+                            startOnTick: true,
+                            endOnTick: false,
+                        },
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                        },
+                        series: [],
+                    };
 
-                test('THEN: it includes at least one area series', () => {
-                    expect(configScript).toContain('"type":"area"');
-                });
+                    const $ = cheerio.load(renderComponent('chart', params));
+                    const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
 
-                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');
+                    expect(configScript).toContain('"min":1');
+                    expect(configScript).toContain('"max":10');
+                    expect(configScript).toContain('"startOnTick":true');
+                    expect(configScript).toContain('"endOnTick":false');
                 });
+            });
 
-                test('THEN: it includes the Highcharts JSON config', () => {
+            describe('WHEN: xAxis options are not provided', () => {
+                test('THEN: xAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        chartType: 'scatter',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                        },
+                        series: [],
+                    };
+
+                    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('WHEN: yAxis options are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'scatter',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+
+            describe('WHEN: yAxis options are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'scatter',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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('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('GIVEN: Params: legend', () => {
             describe('WHEN: legend is enabled', () => {
                 const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_AREA_CHART_PARAMS, legend: false }));
 
@@ -968,7 +1492,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Caption', () => {
+        describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -983,7 +1507,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Description', () => {
+        describe('GIVEN: Params: description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -993,13 +1517,13 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-area-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
 
-        describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
+        describe('GIVEN: Params: download', () => {
+            describe('WHEN: download object is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_AREA_CHART_PARAMS,
@@ -1025,7 +1549,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Footnotes', () => {
+        describe('GIVEN: Params: footnotes', () => {
             describe('WHEN: footnotes are provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -1044,13 +1568,82 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis options are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'area',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+            describe('WHEN: yAxis options are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'area',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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('FOR: Boxplot Chart', () => {
         describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_BOXPLOT_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--uuid]`).html();
+                const configScript = $(`script[data-highcharts-config--boxplot-chart-123]`).html();
 
                 test('THEN: it passes jest-axe checks', async () => {
                     const results = await axe($.html());
@@ -1066,7 +1659,7 @@ describe('Macro: Chart', () => {
                     expect(chartContainer.attr('data-highcharts-type')).toBe('boxplot');
                     expect(chartContainer.attr('data-highcharts-theme')).toBe('primary');
                     expect(chartContainer.attr('data-highcharts-title')).toBe('Example Boxplot Chart');
-                    expect(chartContainer.attr('data-highcharts-id')).toBe('uuid');
+                    expect(chartContainer.attr('data-highcharts-id')).toBe('boxplot-chart-123');
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -1076,7 +1669,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Legend', () => {
+        describe('GIVEN: Params: legend', () => {
             describe('WHEN: both labels are provided and legend is enabled', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
@@ -1159,7 +1752,7 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Description', () => {
+        describe('GIVEN: Params: description', () => {
             describe('WHEN: description is provided', () => {
                 const accessibleDescription = 'An accessible description for screen readers.';
                 const $ = cheerio.load(
@@ -1170,18 +1763,17 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe(accessibleDescription);
+                    expect($('#chart-audio-description-boxplot-chart-123').text()).toBe(accessibleDescription);
                 });
             });
         });
 
-        describe('GIVEN: Params: Estimate Line and Uncertainty Range Labels', () => {
-            describe('WHEN: both labels are provided', () => {
+        describe('GIVEN: Params: estimateLineLabel', () => {
+            describe('WHEN: estimateLineLabel is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_BOXPLOT_CHART_PARAMS,
                         estimateLineLabel: 'Estimated value',
-                        uncertaintyRangeLabel: '95% Confidence Interval',
                     }),
                 );
 
@@ -1189,6 +1781,17 @@ describe('Macro: Chart', () => {
                     const baseChart = $('[data-highcharts-base-chart]');
                     expect(baseChart.attr('data-highcharts-estimate-line-label')).toBe('Estimated value');
                 });
+            });
+        });
+
+        describe('GIVEN: Params: uncertaintyRangeLabel', () => {
+            describe('WHEN: uncertaintyRangeLabel is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BOXPLOT_CHART_PARAMS,
+                        uncertaintyRangeLabel: '95% Confidence Interval',
+                    }),
+                );
 
                 test('THEN: it sets the uncertainty range label as a data attribute', () => {
                     const baseChart = $('[data-highcharts-base-chart]');
@@ -1196,13 +1799,82 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis min and max are provided', () => {
+                test('THEN: yAxis min and max are included in config ', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'boxplot',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+            describe('WHEN: yAxis min and max are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'boxplot',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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('FOR: Column Range Chart', () => {
-        describe('GIVEN: Params: Required', () => {
+        describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_RANGE_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--uuid]`).html();
+                const configScript = $(`script[data-highcharts-config--column-range-chart-123]`).html();
 
                 test('THEN: it passes jest-axe accessibility checks', async () => {
                     const results = await axe($.html());
@@ -1216,7 +1888,7 @@ describe('Macro: Chart', () => {
                     expect(baseChart.attr('data-highcharts-title')).toBe(
                         'Food stores showed a strong rise on the month, while non-food stores fell',
                     );
-                    expect(baseChart.attr('data-highcharts-id')).toBe('uuid');
+                    expect(baseChart.attr('data-highcharts-id')).toBe('column-range-chart-123');
                 });
 
                 test('THEN: it includes columnrange and scatter series types', () => {
@@ -1225,10 +1897,79 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: yAxis', () => {
+            describe('WHEN: yAxis min and max are provided', () => {
+                test('THEN: yAxis min and max are included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'columnrange',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 0,
+                            max: 100,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    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');
+                });
+            });
+            describe('WHEN: yAxis min and max are not provided', () => {
+                test('THEN: yAxis min and max are not included in config', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'columnrange',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: undefined,
+                            max: undefined,
+                            startOnTick: undefined,
+                            endOnTick: undefined,
+                        },
+                        series: [],
+                    };
+
+                    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('FOR: Invalid Chart', () => {
-        describe('GIVEN: Invalid chart type', () => {
+        describe('GIVEN: Params: chartType', () => {
             describe('WHEN: an invalid chart type is provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_INVALID_CHART_PARAMS));
 
@@ -1254,7 +1995,7 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it still renders the description', () => {
-                    expect($('.ons-u-vh').text()).toBe('A detailed description');
+                    expect($('#chart-audio-description-invalid-chart-123').text()).toBe('A detailed description');
                 });
 
                 test('THEN: it still renders the caption', () => {
@@ -1268,443 +2009,240 @@ describe('Macro: Chart', () => {
         });
     });
 
-    describe('FOR: Line chart with range annotation on the x axis', () => {
-        describe('GIVEN: Params: Range annotations', () => {
-            describe('WHEN: range annotations params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_ON_X_AXIS_PARAMS));
+    describe('FOR: Iframe Chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: iframeUrl 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 includes the range annotations JSON config', () => {
-                    const configScript = $(`script[data-highcharts-range-annotations--line-chart-range-annotations-x-axis-123]`).html();
-                    expect(configScript).toContain('"text":"A test x axis range annotation"');
-                    expect(configScript).toContain('"range":{"axisValue1":10,"axisValue2":15}');
-                    expect(configScript).toContain('"axis":"x"');
-                    expect(configScript).toContain('"labelOffsetX":150');
-                    expect(configScript).toContain('"labelOffsetY":0');
+                test('THEN: it renders the iframe', () => {
+                    expect($('.ons-chart__iframe-wrapper').length).toBe(1);
+                });
+
+                test('THEN: the Highcharts config is not included', () => {
+                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
+                    expect(configScript).toBeNull();
                 });
             });
         });
-    });
 
-    describe('FOR: Line chart with range annotation on the y axis with label width', () => {
-        describe('GIVEN: Params: Range annotations', () => {
-            describe('WHEN: range annotations params are provided', () => {
+        describe('GIVEN: Params: theme', () => {
+            describe('WHEN: theme is provided', () => {
                 const $ = cheerio.load(
-                    renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_ON_Y_AXIS_WITH_LABEL_WIDTH_PARAMS),
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        theme: 'secondary',
+                    }),
                 );
 
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
-
-                test('THEN: it includes the range annotations JSON config', () => {
-                    const configScript = $(`script[data-highcharts-range-annotations--line-chart-range-annotations-y-axis-123]`).html();
-                    expect(configScript).toContain('"text":"A test y axis range annotation with a label width of 250px"');
-                    expect(configScript).toContain('"axis":"y"');
-                    expect(configScript).toContain('"labelWidth":250');
+                test('THEN: the theme parameter is ignored', () => {
+                    expect($('[data-highcharts-theme]').length).toBe(0);
                 });
             });
         });
-    });
-
-    describe('FOR: Line chart with range annotation with the label inside', () => {
-        describe('GIVEN: Params: Range annotations', () => {
-            describe('WHEN: range annotations params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS));
 
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
+        describe('GIVEN: Params: percentageHeightDesktop', () => {
+            describe('WHEN: percentageHeightDesktop is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        percentageHeightDesktop: 50,
+                    }),
+                );
 
-                test('THEN: it includes the range annotations JSON config', () => {
-                    const configScript = $(
-                        `script[data-highcharts-range-annotations--line-chart-range-annotations-label-inside-123]`,
-                    ).html();
-                    expect(configScript).toContain('"text":"A test y axis range annotation with the label inside"');
-                    expect(configScript).toContain('"axis":"y"');
-                    expect(configScript).toContain('"labelInside":true');
+                test('THEN: the percentageHeightDesktop parameter is ignored', () => {
+                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
                 });
             });
         });
-    });
-
-    describe('FOR: Line chart with reference line annotations', () => {
-        describe('GIVEN: Params: Reference line annotations', () => {
-            describe('WHEN: reference line annotations params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS));
 
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
+        describe('GIVEN: Params: percentageHeightMobile', () => {
+            describe('WHEN: percentageHeightMobile is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        percentageHeightMobile: 10,
+                    }),
+                );
 
-                test('THEN: it includes the reference line annotations JSON config', () => {
-                    const configScript = $(
-                        `script[data-highcharts-reference-line-annotations--line-chart-reference-line-annotations-123]`,
-                    ).html();
-                    expect(configScript).toContain('"text":"A test x axis reference line annotation"');
-                    expect(configScript).toContain('"value":34');
-                    expect(configScript).toContain('"axis":"x"');
-                    expect(configScript).toContain('"text":"A test y axis reference line annotation"');
-                    expect(configScript).toContain('"value":12');
-                    expect(configScript).toContain('"axis":"y"');
-                    expect(configScript).toContain('"labelWidth":100');
+                test('THEN: the percentageHeightMobile parameter is ignored', () => {
+                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
                 });
             });
         });
-    });
-
-    describe('FOR: Line chart with mixed annotation types', () => {
-        describe('GIVEN: Params: Mixed annotations', () => {
-            describe('WHEN: mixed annotations params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS));
 
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
+        describe('GIVEN: Params: tickInterval', () => {
+            describe('WHEN: tickIntervalDesktop and tickIntervalMobile are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        xAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
+                        yAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
+                    }),
+                );
 
-                test('THEN: it renders the footnotes sequentially', () => {
-                    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');
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    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);
                 });
             });
         });
-    });
 
-    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);
+        describe('GIVEN: Params: estimateLineLabel', () => {
+            describe('WHEN: estimateLineLabel is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        estimateLineLabel: 'Estimated value',
+                    }),
+                );
 
-                expect(config.xAxis.min).toBeUndefined();
-                expect(config.xAxis.max).toBeUndefined();
-                expect(config.xAxis.startOnTick).toBeUndefined();
-                expect(config.xAxis.endOnTick).toBeUndefined();
+                test('THEN: the estimateLineLabel parameter is ignored', () => {
+                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
+                });
             });
         });
 
-        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);
+        describe('GIVEN: Params: uncertaintyRangeLabel', () => {
+            describe('WHEN: uncertaintyRangeLabel is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        uncertaintyRangeLabel: '95% Confidence Interval',
+                    }),
+                );
 
-                expect(config.yAxis.min).toBeUndefined();
-                expect(config.yAxis.max).toBeUndefined();
-                expect(config.yAxis.startOnTick).toBeUndefined();
-                expect(config.yAxis.endOnTick).toBeUndefined();
+                test('THEN: the uncertaintyRangeLabel parameter is ignored', () => {
+                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
+                });
             });
         });
 
-        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();
+        describe('GIVEN: Params: customReferenceLineValue', () => {
+            describe('WHEN: customReferenceLineValue is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        yAxis: { customReferenceLineValue: 10 },
+                    }),
+                );
 
-                expect(configScript).not.toContain('"min":1');
-                expect(configScript).not.toContain('"max":10');
-                expect(configScript).not.toContain('"startOnTick":true');
-                expect(configScript).not.toContain('"endOnTick":true');
+                test('THEN: the customReferenceLineValue parameter is ignored', () => {
+                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
+                });
             });
         });
-    });
-
-    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($('.ons-chart__iframe-wrapper').length).toBe(1);
-                });
-
-                test('THEN: it includes the iframe title as a data attribute', () => {
-                    const iframe = $('.ons-chart__iframe-wrapper');
-                    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,
-                        }),
-                    );
+        describe('GIVEN: Params: chartType', () => {
+            describe('WHEN: chartType is boxplot and legend params are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        chartType: 'boxplot',
+                        legend: true,
+                        estimateLineLabel: 'Estimated value',
+                        uncertaintyRangeLabel: '95% Confidence Interval',
+                    }),
+                );
 
-                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
-                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
+                test('THEN: the boxplot legend is not rendered', () => {
+                    expect($('.ons-chart__boxplot-legend').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,
-                            },
-                        }),
-                    );
+        describe('GIVEN: Params: invalidChartType', () => {
+            describe('WHEN: an invalid chart type is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        chartType: 'foobar',
+                    }),
+                );
 
-                    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 invalid chart type is ignored', () => {
+                    expect($('[data-invalid-chart-type]').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',
-                        }),
-                    );
+        describe('GIVEN: Params: annotations', () => {
+            describe('WHEN: annotations, rangeAnnotations and referenceLineAnnotations are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        annotations: [{ text: 'A test point annotation', point: { x: 2, y: 3 } }],
+                        rangeAnnotations: [{ text: 'Range annotation', range: { axisValue1: 10, axisValue2: 15 }, axis: 'x' }],
+                        referenceLineAnnotations: [{ text: 'Reference line', value: 34, axis: 'x' }],
+                    }),
+                );
 
-                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
-                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
+                test('THEN: annotations footnotes are not rendered', () => {
+                    expect($('[data-annotations-footnotes]').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: annotation scripts are not rendered', () => {
+                    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: 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);
-                });
+        describe('GIVEN: Params: iframeAspectRatio', () => {
+            describe('WHEN: iframeAspectRatio is not set', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
 
-                test('THEN: the Highcharts config is not included', () => {
-                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
-                    expect(configScript).toBeNull();
+                test('THEN: it defaults to 16-9', () => {
+                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
                 });
+            });
 
-                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,
-                                },
-                            ],
-                        }),
-                    );
+            describe('WHEN: iframeAspectRatio is unsupported', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        iframeAspectRatio: '16-10',
+                    }),
+                );
 
-                    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: it defaults to 16-9', () => {
+                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
                 });
+            });
 
-                test('THEN: invalid chart type is ignored', () => {
-                    const $ = cheerio.load(
-                        renderComponent('chart', {
-                            ...EXAMPLE_IFRAME_CHART_PARAMS,
-                            chartType: 'foobar',
-                        }),
-                    );
+            describe('WHEN: iframeAspectRatio is supported', () => {
+                const aspectRatio = '21-9';
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        iframeAspectRatio: aspectRatio,
+                    }),
+                );
 
-                    expect($('[data-invalid-chart-type]').length).toBe(0);
+                test('THEN: it applies the aspect ratio class', () => {
+                    expect($('.ons-chart__iframe').hasClass(`ons-chart__iframe--${aspectRatio}`)).toBe(true);
                 });
             });
+        });
 
-            describe('WHEN: Params: fallbackImageUrl is set', () => {
+        describe('GIVEN: Params: fallbackImageUrl', () => {
+            describe('WHEN: fallbackImageUrl is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
                         ...EXAMPLE_IFRAME_CHART_PARAMS,
                         fallbackImageUrl: '/img/small/line-chart-screenshot.png',
                     }),
                 );
-                const iframe = $(`.ons-chart__iframe-wrapper`);
-                test('THEN: the iframe is hidden when JavaScript is disabled', () => {
-                    expect(iframe.attr('class')).toContain('ons-chart__non-js-hide');
+
+                test('THEN: the iframe wrapper is hidden when JavaScript is disabled', () => {
+                    expect($('.ons-chart__iframe-wrapper').attr('class')).toContain('ons-chart__non-js-hide');
                 });
             });
         });