@ons/design-system 73.0.3 → 73.2.0

package/components/accordion/_macro.njk

@@ -8,6 +8,8 @@
             {%
                 set attributes = attributes | setAttributes({
                     "data-close-all": params.allButton.close,
+                    "data-open-aria-label": params.allButton.openAriaLabel | default("Show all buttons"),
+                    "data-close-aria-label": params.allButton.closeAriaLabel | default("Hide all buttons"),
                     "data-group": params.id
                 })
             %}

package/components/accordion/_macro.spec.js

@@ -202,7 +202,46 @@ describe('FOR: Macro: Accordion', () => {
                 expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
             });
         });
+
+        describe('WHEN: openAriaLabel and closeAriaLabel are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                        openAriaLabel: 'Open all sections',
+                        closeAriaLabel: 'Close all sections',
+                    },
+                }),
+            );
+            test('THEN: renders toggle all button with provided openAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-open-aria-label')).toBe('Open all sections');
+            });
+            test('THEN: renders toggle all button with provided closeAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-aria-label')).toBe('Close all sections');
+            });
+        });
+
+        describe('WHEN: openAriaLabel and closeAriaLabel are NOT provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+            test('THEN: renders toggle all button with default openAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-open-aria-label')).toBe('Show all buttons');
+            });
+            test('THEN: renders toggle all button with default closeAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-aria-label')).toBe('Hide all buttons');
+            });
+        });
     });
+
     describe('GIVEN: Params: saveState', () => {
         describe('WHEN: saveState param is not provided', () => {
             const $ = cheerio.load(

package/components/accordion/accordion.js

@@ -55,9 +55,11 @@ export default class Accordion {
         if (this.canClose()) {
             this.buttonInner.innerHTML = DOMPurify.sanitize(this.closeButton);
             this.button.setAttribute('data-ga-label', this.buttonOpen);
+            this.button.setAttribute('aria-label', this.button.getAttribute('data-close-aria-label'));
             this.button.setAttribute('aria-expanded', 'true');
         } else {
             this.buttonInner.innerHTML = DOMPurify.sanitize(this.buttonOpen);
+            this.button.setAttribute('aria-label', this.button.getAttribute('data-open-aria-label'));
             this.button.setAttribute('data-ga-label', this.closeButton);
             this.button.setAttribute('aria-expanded', 'false');
         }

package/components/accordion/example-accordion.njk

@@ -5,7 +5,12 @@
         "id": "accordion-example",
         "allButton": {
             "open": "Show all",
-            "close": "Hide all"
+            "close": "Hide all",
+            "openAriaLabel": "Show all sections",
+            "closeAriaLabel": "Hide all sections",
+            "attributes": {
+                "data-toggle-button": "accordion-toggle-all"
+            }
         },
         "itemsList": [
             {

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -189,8 +189,8 @@ layout: ~
                                 },
                                 {
                                     "url": '#0',
-                                    "text": 'Twitter',
-                                    "iconType": 'twitter',
+                                    "text": 'X',
+                                    "iconType": 'x',
                                     "rel": 'noreferrer external'
                                 }
                             ]

package/components/button/example-button-new-window.njk

@@ -1,4 +1,5 @@
 {% from "components/button/_macro.njk" import onsButton %}
+
 {{
     onsButton({
         "text": 'Web chat',

package/components/chart/_chart.scss

@@ -12,8 +12,8 @@
             fill: var(--ons-color-grey-75); /* Forces the color used for text in high contrast mode */
         }
         .highcharts-annotation-label text,
-        .highcharts-plot-line-label,
-        .highcharts-plot-band-label {
+        .highcharts-plot-band-label,
+        .highcharts-plot-line-label {
             fill: CanvasText !important; /* Forces the color used for text in high contrast mode */
         }
 

package/components/chart/_macro.spec.js

@@ -260,6 +260,38 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"startOnTick":false');
                     expect(configScript).toContain('"endOnTick":true');
                 });
+
+                test('THEN: yAxis min and max are included in config with the correct values', () => {
+                    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: 20.5,
+                            max: 99.5,
+                            tickIntervalDesktop: 0.5,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    const $ = cheerio.load(renderComponent('chart', params));
+                    const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                    expect(configScript).toContain('"min":20.5');
+                    expect(configScript).toContain('"max":99.5');
+                    expect(configScript).toContain('"startOnTick":false');
+                    expect(configScript).toContain('"endOnTick":true');
+                });
             });
 
             describe('WHEN: yAxis min and max are not provided', () => {

package/components/chart/annotations-options.js

@@ -11,6 +11,7 @@ class AnnotationsOptions {
             {
                 labels: [],
                 labelOptions: {
+                    useHTML: true,
                     shape: 'connector',
                     borderColor: this.constants.labelColor,
                     padding: 3,

package/components/chart/area-chart.js

@@ -5,6 +5,9 @@ class AreaChart {
                 symbolWidth: 12,
                 symbolHeight: 12,
             },
+            yAxis: {
+                reversedStacks: false,
+            },
             plotOptions: {
                 area: {
                     fillOpacity: 1,

package/components/chart/bar-chart.js

@@ -73,6 +73,7 @@ class BarChart {
                     reserveSpace: true,
                     useHTML: false,
                 },
+                reversedStacks: false,
             },
         };
     };

package/components/chart/chart-constants.js

@@ -1,7 +1,8 @@
 class ChartConstants {
     static constants() {
         const constants = {
-            primaryTheme: ['#206095', '#27a0cc', '#003c57', '#118c7b', '#a8bd3a', '#871a5b', '#f66068', '#746cb1', '#22d0b6'],
+            primaryTheme: ['#206095', '#a8bd3a', '#871a5b', '#f66068', '#05341a', '#27a0cc'],
+            linePrimaryTheme: ['#206095', '#a8bd3a', '#871a5b', '#f66068', '#27a0cc', '#05341a'],
             // Alternate theme colours from https://service-manual.ons.gov.uk/data-visualisation/colours/using-colours-in-charts
             alternateTheme: ['#206095', '#27A0CC', '#871A5B', '#A8BD3A', '#F66068'],
             labelColor: '#414042',

package/components/chart/chart.js

@@ -56,16 +56,16 @@ class HighchartsBaseChart {
         this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
         this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
         this.xAxisTickIntervalMobile = this.node.dataset.highchartsXAxisTickIntervalMobile
-            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile)
+            ? parseFloat(this.node.dataset.highchartsXAxisTickIntervalMobile)
             : undefined;
         this.xAxisTickIntervalDesktop = this.node.dataset.highchartsXAxisTickIntervalDesktop
-            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop)
+            ? parseFloat(this.node.dataset.highchartsXAxisTickIntervalDesktop)
             : undefined;
         this.yAxisTickIntervalMobile = this.node.dataset.highchartsYAxisTickIntervalMobile
-            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile)
+            ? parseFloat(this.node.dataset.highchartsYAxisTickIntervalMobile)
             : undefined;
         this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
-            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop)
+            ? parseFloat(this.node.dataset.highchartsYAxisTickIntervalDesktop)
             : undefined;
         this.commonChartOptions = new CommonChartOptions();
         this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
@@ -167,6 +167,7 @@ class HighchartsBaseChart {
         if (this.chartType === 'scatter') {
             // Merge the scatter chart options with the existing config
             this.config = mergeConfigs(this.config, scatterChartOptions);
+            this.specificChartOptions.limitSeriesForScatterChart();
         }
         if (this.chartType === 'boxplot') {
             // Merge the boxplot chart options with the existing config
@@ -187,6 +188,9 @@ class HighchartsBaseChart {
             }
         }
 
+        // Limit the number of series to the theme length
+        this.specificChartOptions.limitSeriesToThemeLength();
+
         // Disable the legend for single series charts
         this.specificChartOptions.disableLegendForSingleSeries(this.config);
     };

package/components/chart/column-chart.js

@@ -1,6 +1,9 @@
 class ColumnChart {
     getColumnChartOptions = (config, useStackedLayout, extraLines) => {
         return {
+            yAxis: {
+                reversedStacks: false,
+            },
             plotOptions: {
                 column: {
                     ...this.getPointPadding(config, useStackedLayout, extraLines, false),

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

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "area",
         "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

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

@@ -34,7 +34,7 @@
                     39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
                     43.9, 41.8
                 ],
-                "name": "Test series 3"
+                "name": "Test series 1"
             },
             {
                 "data": [
@@ -48,7 +48,7 @@
                     37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
                     33.9, 31.8
                 ],
-                "name": "Test series 1"
+                "name": "Test series 3"
             }
         ],
         "xAxis": {

package/components/chart/example-clustered-column-chart.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "column",
         "description": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Clothing stores fell back, following three months of growth",
         "subtitle": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
         "id": "uuid",

package/components/chart/example-line-chart-with-annotations.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

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

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-custom-reference-line-value.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-label-format.njk

@@ -0,0 +1,89 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "primary",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
+        "legend": true,
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:.2f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015',
+                'Aug 2015',
+                'Sep 2015'
+            ],
+            "tickIntervalMobile": 3
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.2f}"
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2
+                ]
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, 0.2, 1.0, 1.5, 2.0, 2.1, 1.9, 1.8, 2.0, 1.8, 2.0, 2.3
+                ]
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2
+                ]
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2
+                ]
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90,
+        "fallbackImageUrl": '/img/small/line-chart-screenshot.png'
+    })
+}}

package/components/chart/example-line-chart-with-markers.njk

@@ -38,11 +38,7 @@
                 'Dec 2014',
                 'Jan 2015',
                 'Feb 2015',
-                'Mar 2015',
-                'Apr 2015',
-                'May 2015',
-                'Jun 2015',
-                'Jul 2015'
+                'Mar 2015'
             ]
         },
         "yAxis": {
@@ -98,38 +94,6 @@
                 ],
                 "marker": true,
                 "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 3',
-                "data": [
-                    5.5, 5.3, 5.4, 5.5, 5.4, 5.2, 5.1, 5.2, 5.0, 5.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 4',
-                "data": [
-                    -3.5, -3.3, -3.4, -3.5, -3.4, -3.2, -3.1, -3.2, -3.0, -3.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 5',
-                "data": [
-                    -4.5, -4.3, -4.4, -4.5, -4.4, -4.2, -4.1, -4.2, -4.0, -4.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 6',
-                "data": [
-                    -5.5, -5.3, -5.4, -5.5, -5.4, -5.2, -5.1, -5.2, -5.0, -5.3
-                ],
-                "marker": true,
-                "connectNulls": true
             }
         ],
         "percentageHeightDesktop": 35,

package/components/chart/example-line-chart-with-range-annotations-inside.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-range-annotations-outside-left-right.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-range-annotations-outside-top-bottom.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-reference-line-annotations.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

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

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

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

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "scatter",
         "description": "Example scatter chart",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Example scatter chart",
         "subtitle": "Scatter chart subtitle",
         "id": "id",

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

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "scatter",
         "description": "Example scatter chart",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Example scatter chart",
         "subtitle": "Scatter chart subtitle",
         "id": "id",

package/components/chart/example-stacked-column-chart.njk

@@ -2,66 +2,55 @@
 {{
     onsChart({
         "chartType": "column",
-        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "description": "Monthly percentage change in retail sales volume by store type, Great Britain, January to June 2025",
         "theme": "primary",
         "title": "Food stores showed a strong rise on the month, while non-food stores fell",
-        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "subtitle": "Figure 6: Upward contribution to monthly percentage change in total retail sales",
         "id": "uuid",
         "useStackedLayout": true,
         "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
         "download": {
-            'title': 'Download Figure 1 data',
-            'itemsList': [
-                {
-                    "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
-                },
-                {
-                    "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
-                },
-                {
-                    "text": "Image (PNG format, 25KB)",
-                    "url": "#"
-                }
+            "title": "Download Figure 6 data",
+            "itemsList": [
+                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#" },
+                { "text": "Simple text file (CSV format, 28KB)", "url": "#" },
+                { "text": "Image (PNG format, 32KB)", "url": "#" }
             ]
         },
         "legend": true,
         "series": [
             {
-                "data": [5, 3, 4, 6, 2, 2, 3, 7],
-                "dataLabels": false,
-                "name": "2022"
+                "name": "Food stores",
+                "data": [1.5, 0.8, 1.2, 0.9, 1.1, 1.4]
             },
             {
-                "data": [2, 2, 3, 7, 3, 4, 4, 1],
-                "dataLabels": false,
-                "name": "2023"
+                "name": "Non-food stores",
+                "data": [0.5, -0.2, 0.6, 0.8, 0.3, 0.4]
             },
             {
-                "data": [3, 4, 4, 1, 5, 3, 4, 6],
-                "dataLabels": false,
-                "name": "2024"
+                "name": "Non-store retailing",
+                "data": [0.2, 0.1, 0.3, 0.2, 0.4, 0.3]
+            },
+            {
+                "name": "Automotive fuel",
+                "data": [0.3, 0.2, -0.1, 0.4, 0.2, 0.5]
             }
         ],
         "xAxis": {
             "categories": [
-                "Food stores",
-                "Non-food stores",
-                "Non-store retailing ",
-                "Automotive fuel",
-                "Household goods stores",
-                "Clothing stores",
-                "Other stores",
-                "All retailing"
+                "Jan 2025",
+                "Feb 2025",
+                "Mar 2025",
+                "Apr 2025",
+                "May 2025",
+                "Jun 2025"
             ],
-            "title": "Items",
-            "type": "linear"
+            "title": "Month"
         },
         "yAxis": {
-            "title": "Percentage of GDP (%)"
+            "title": "Monthly percentage change (%)"
         },
-        "percentageHeightDesktop": 35,
+        "percentageHeightDesktop": 40,
         "percentageHeightMobile": 90
     })
 }}

package/components/chart/reference-line-annotations-options.js

@@ -13,6 +13,7 @@ class ReferenceLineAnnotationsOptions {
             let referenceLineConfig = {
                 label: {
                     text: referenceLineAnnotation.text,
+                    useHTML: true,
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,