@ons/design-system 72.8.0 → 72.9.1

package/components/card/_macro.njk

@@ -5,7 +5,7 @@
     {% set placeholderSrcset = (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/large/placeholder-card.png 2x" %}
 
     <div class="ons-card {% if params.variant == "feature" %}ons-card--feature ons-u-flex-grow{% endif %}">
-        <a href="{{ params.title.url }}" class="ons-card__link {% if params.title.subtitle %}ons-u-mb-xs{% endif %}">
+        {% set imageBlock %}
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
                     <img
@@ -29,10 +29,23 @@
                     />
                 {% endif %}
             {%- endif -%}
+        {% endset %}
+
+        {% set titleBlock %}
             {{ openingHeadingTag | safe }}
             class="ons-card__title {{ params.title.classes | default('ons-u-fs-m') }}" id="{{ params.title.id }}"> {{ params.title.text }}
             {{ closingHeadingTag | safe }}
-        </a>
+        {% endset %}
+
+        {% if params.title.url %}
+            <a href="{{ params.title.url }}" class="ons-card__link {% if params.title.subtitle %}ons-u-mb-xs{% endif %}">
+                {{ imageBlock | safe }}
+                {{ titleBlock | safe }}
+            </a>
+        {% else %}
+            {{ imageBlock | safe }}
+            {{ titleBlock | safe }}
+        {% endif %}
 
         {% if params.title.subtitle %}
             <p class="ons-card__subtitle ons-u-fs-s">{{ params.title.subtitle }}</p>

package/components/card/example-card-set-with-headline-figures.njk

@@ -9,7 +9,6 @@
                     "title": {
                         "id": 'card-set-1',
                         "text": 'Deaths registered annually',
-                        "url": '#0',
                         "subtitle": 'England and Wales'
                     },
                     "body":{
@@ -28,7 +27,6 @@
                     "title": {
                         "id": 'card-set-2',
                         "text": 'Alcohol-specific deaths',
-                        "url": '#0',
                         "subtitle": 'UK'
                     },
                     "body":{
@@ -47,8 +45,7 @@
                     "title": {
                         "id": 'card-set-3',
                         "text": 'Suicides registered',
-                        "subtitle": 'England and Wales',
-                        "url": '#0'
+                        "subtitle": 'England and Wales'
                     },
                     "body":{
                         "id": 'text3',

package/components/chart/_chart.scss

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

package/components/chart/_macro.njk

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

package/components/chart/_macro.spec.js

@@ -13,8 +13,10 @@ import {
     EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
-    EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
     EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+    EXAMPLE_SCATTER_CHART_PARAMS,
+    EXAMPLE_AREA_CHART_PARAMS,
+    EXAMPLE_INVALID_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -28,6 +30,10 @@ describe('Macro: Chart', () => {
                     expect(results).toHaveNoViolations();
                 });
 
+                test('THEN: it renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Line Chart');
+                });
+
                 test('THEN: it renders the subtitle', () => {
                     expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
                 });
@@ -153,6 +159,9 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"data":[5,15,25]');
                     expect(configScript).toContain('"name":"Category 2"');
                     expect(configScript).toContain('"data":[10,20,30]');
+                    expect(configScript).toContain('"connectNulls":true');
+                    expect(configScript).toContain('"marker":{"enabled":true}');
+                    expect(configScript).toContain('"dataLabels":{"enabled":true}');
                 });
             });
         });
@@ -615,27 +624,27 @@ describe('Macro: Chart', () => {
         });
     });
 
-    describe('FOR: Bar Chart with Line', () => {
+    describe('FOR: Column Chart with Line', () => {
         describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_WITH_LINE_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
 
                 test('THEN: it passes jest-axe checks', async () => {
                     const results = await axe($.html());
                     expect(results).toHaveNoViolations();
                 });
 
-                test('THEN: it includes one series of type "bar" and another of type "line"', () => {
-                    expect(configScript).toContain('"type":"bar"');
+                test('THEN: it includes one series of type "column" and another of type "line"', () => {
+                    expect(configScript).toContain('"type":"column"');
                     expect(configScript).toContain('"type":"line"');
                 });
 
                 test('THEN: it renders the chart container with correct data attributes', () => {
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('bar');
+                    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 Bar Chart');
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('bar-chart-123');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Column Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('column-chart-123');
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -647,10 +656,10 @@ describe('Macro: Chart', () => {
 
         describe('GIVEN: Params: Legend', () => {
             describe('WHEN: legend is enabled', () => {
-                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS, legend: false }));
+                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--bar-chart-123]`).html();
+                    const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
                     expect(configScript).toContain('"enabled":false');
                 });
             });
@@ -660,7 +669,7 @@ describe('Macro: Chart', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
                         caption: 'This is an example caption for the chart.',
                     }),
                 );
@@ -675,7 +684,7 @@ describe('Macro: Chart', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
                         description: 'An accessible description for screen readers.',
                     }),
                 );
@@ -686,32 +695,11 @@ describe('Macro: Chart', () => {
             });
         });
 
-        describe('GIVEN: Params: Series: Type', () => {
-            describe('WHEN: a series has an invalid type', () => {
-                const invalidTypeParams = {
-                    ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
-                    series: [
-                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
-                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
-                    ],
-                };
-
-                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
-                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
-
-                test('THEN: it defaults non-line series type to the chartType', () => {
-                    expect(configScript).not.toContain('"type":"scatter"');
-                    expect(configScript).toContain('"type":"bar"');
-                    expect(configScript).toContain('"type":"line"');
-                });
-            });
-        });
-
         describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
+            describe('WHEN: download object is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
                         download: {
                             title: 'Download Chart Data',
                             itemsList: [
@@ -733,29 +721,86 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: Series: Type', () => {
+            describe('WHEN: a series has an invalid type', () => {
+                const invalidTypeParams = {
+                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                    series: [
+                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
+                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
+                    ],
+                };
+
+                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it defaults non-line series type to the chartType', () => {
+                    expect(configScript).not.toContain('"type":"scatter"');
+                    expect(configScript).toContain('"type":"column"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+            });
+        });
+
+        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: Column Chart with Line', () => {
+    describe('FOR: Scatter chart', () => {
         describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_SCATTER_CHART_PARAMS));
 
                 test('THEN: it passes jest-axe checks', async () => {
                     const results = await axe($.html());
                     expect(results).toHaveNoViolations();
                 });
 
-                test('THEN: it includes one series of type "column" and another of type "line"', () => {
-                    expect(configScript).toContain('"type":"column"');
-                    expect(configScript).toContain('"type":"line"');
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('scatter');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Scatter Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('scatter-chart-123');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Area Chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_AREA_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes at least one area series', () => {
+                    expect(configScript).toContain('"type":"area"');
                 });
 
                 test('THEN: it renders the chart container with correct data attributes', () => {
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('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');
+                    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', () => {
@@ -767,10 +812,10 @@ describe('Macro: Chart', () => {
 
         describe('GIVEN: Params: Legend', () => {
             describe('WHEN: legend is enabled', () => {
-                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS, legend: false }));
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_AREA_CHART_PARAMS, legend: false }));
 
                 test('THEN: it renders the legend', () => {
-                    const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                    const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
                     expect(configScript).toContain('"enabled":false');
                 });
             });
@@ -780,7 +825,7 @@ describe('Macro: Chart', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_AREA_CHART_PARAMS,
                         caption: 'This is an example caption for the chart.',
                     }),
                 );
@@ -795,7 +840,7 @@ describe('Macro: Chart', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_AREA_CHART_PARAMS,
                         description: 'An accessible description for screen readers.',
                     }),
                 );
@@ -807,10 +852,10 @@ describe('Macro: Chart', () => {
         });
 
         describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object is provided', () => {
+            describe('WHEN: download object are provided', () => {
                 const $ = cheerio.load(
                     renderComponent('chart', {
-                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                        ...EXAMPLE_AREA_CHART_PARAMS,
                         download: {
                             title: 'Download Chart Data',
                             itemsList: [
@@ -832,24 +877,44 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+    });
 
-        describe('GIVEN: Params: Series: Type', () => {
-            describe('WHEN: a series has an invalid type', () => {
-                const invalidTypeParams = {
-                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
-                    series: [
-                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
-                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
-                    ],
-                };
+    describe('FOR: Invalid Chart', () => {
+        describe('GIVEN: Invalid chart type', () => {
+            describe('WHEN: an invalid chart type is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_INVALID_CHART_PARAMS));
 
-                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
-                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                test('THEN: it does not render the chart', () => {
+                    expect($('[data-highcharts-chart]').length).toBe(0);
+                });
 
-                test('THEN: it defaults non-line series type to the chartType', () => {
-                    expect(configScript).not.toContain('"type":"scatter"');
-                    expect(configScript).toContain('"type":"column"');
-                    expect(configScript).toContain('"type":"line"');
+                test('THEN: it renders the error message', () => {
+                    expect($('[data-invalid-chart-type]').text()).toBe('Chart type "invalid" is not supported');
+                });
+
+                test('THEN: it does not include the Highcharts JSON config', () => {
+                    const configScript = $(`script[data-highcharts-config--invalid-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: it still renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Invalid Chart');
+                });
+
+                test('THEN: it still renders the subtitle', () => {
+                    expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
+                });
+
+                test('THEN: it still renders the description', () => {
+                    expect($('.ons-u-vh').text()).toBe('A detailed description');
+                });
+
+                test('THEN: it still renders the caption', () => {
+                    expect($('figcaption').text()).toBe('A detailed caption');
+                });
+
+                test('THEN: it still renders the download', () => {
+                    expect($('.ons-chart__download-title').text()).toBe('Download this chart');
                 });
             });
         });

package/components/chart/annotations-options.js

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

package/components/chart/area-chart.js

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

package/components/chart/bar-chart.js

@@ -26,7 +26,7 @@ class BarChart {
                             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
                             fontWeight: '700',
                             color: this.constants.labelColor,
-                            fontSize: this.constants.mobileFontSize,
+                            fontSize: this.constants.defaultFontSize,
                         },
                     },
                 },
@@ -119,15 +119,15 @@ class BarChart {
             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
             fontWeight: '700',
             color: this.constants.labelColor,
-            fontSize: this.constants.mobileFontSize,
+            fontSize: this.constants.defaultFontSize,
         },
     });
 
     // This updates the height of the vertical axis and overall chart to fit the number of categories
     // Note that the vertical axis on a bar chart is the x axis
-    updateBarChartHeight = (config, currentChart, useStackedLayout, numberOfExtraLines) => {
+    updateBarChartHeight = (config, currentChart, useStackedLayout) => {
         const numberOfCategories = config.xAxis.categories.length;
-        const numberOfSeries = currentChart.series.length - numberOfExtraLines; // Get number of bar series
+        const numberOfSeries = currentChart.series.length; // Get number of bar series
         let barHeight = 30; // Height of each individual bar - set in bar-chart-plot-options
         let groupSpacing = 0; // Space we want between category groups, or between series groups for cluster charts
         let categoriesTotalHeight = 0;