@ons/design-system 72.9.1 → 72.10.0

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

@@ -0,0 +1,236 @@
+{% 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": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": true,
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "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',
+                'Oct 2015',
+                'Nov 2015',
+                'Dec 2015',
+                'Jan 2016',
+                'Feb 2016',
+                'Mar 2016',
+                'Apr 2016',
+                'May 2016',
+                'Jun 2016',
+                'Jul 2016',
+                'Aug 2016',
+                'Sep 2016',
+                'Oct 2016',
+                'Nov 2016',
+                'Dec 2016',
+                'Jan 2017',
+                'Feb 2017',
+                'Mar 2017',
+                'Apr 2017',
+                'May 2017',
+                'Jun 2017',
+                'Jul 2017',
+                'Aug 2017',
+                'Sep 2017',
+                'Oct 2017',
+                'Nov 2017',
+                'Dec 2017',
+                'Jan 2018',
+                'Feb 2018',
+                'Mar 2018',
+                'Apr 2018',
+                'May 2018',
+                'Jun 2018',
+                'Jul 2018',
+                'Aug 2018',
+                'Sep 2018',
+                'Oct 2018',
+                'Nov 2018',
+                'Dec 2018',
+                'Jan 2019',
+                'Feb 2019',
+                'Mar 2019',
+                'Apr 2019',
+                'May 2019',
+                'Jun 2019',
+                'Jul 2019',
+                'Aug 2019',
+                'Sep 2019',
+                'Oct 2019',
+                'Nov 2019',
+                'Dec 2019',
+                'Jan 2020',
+                'Feb 2020',
+                'Mar 2020',
+                'Apr 2020',
+                'May 2020',
+                'Jun 2020',
+                'Jul 2020',
+                'Aug 2020',
+                'Sep 2020',
+                'Oct 2020',
+                'Nov 2020',
+                'Dec 2020',
+                'Jan 2021',
+                'Feb 2021',
+                'Mar 2021',
+                'Apr 2021',
+                'May 2021',
+                'Jun 2021',
+                'Jul 2021',
+                'Aug 2021',
+                'Sep 2021',
+                'Oct 2021',
+                'Nov 2021',
+                'Dec 2021',
+                'Jan 2022',
+                'Feb 2022',
+                'Mar 2022',
+                'Apr 2022',
+                'May 2022',
+                'Jun 2022',
+                'Jul 2022',
+                'Aug 2022',
+                'Sep 2022',
+                'Oct 2022',
+                'Nov 2022',
+                'Dec 2022',
+                'Jan 2023',
+                'Feb 2023',
+                'Mar 2023',
+                'Apr 2023',
+                'May 2023',
+                'Jun 2023',
+                'Jul 2023',
+                'Aug 2023',
+                'Sep 2023',
+                'Oct 2023',
+                'Nov 2023',
+                'Dec 2023',
+                'Jan 2024',
+                'Feb 2024',
+                'Mar 2024',
+                'Apr 2024',
+                'May 2024',
+                'Jun 2024',
+                'Jul 2024',
+                'Aug 2024',
+                'Sep 2024',
+                'Oct 2024'
+            ],
+            "tickIntervalDesktop": 15,
+            "tickIntervalMobile": 30
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}"
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90,
+        "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, 0.2, 0.4, 0.5, 0.6,
+                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
+                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
+                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
+                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
+                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
+                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
+                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.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.4, -2.1,
+                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
+                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
+                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
+                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
+                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
+                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
+                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
+                    -1.4, -0.5, -0.9, -1.4, -0.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, 2.1, 2.2, 2.5, 2.2,
+                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
+                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
+                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
+                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
+                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
+                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
+                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
+                ]
+            },
+            {
+                "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, 1.3, 1.4, 1.5, 1.4,
+                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
+                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
+                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
+                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
+                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
+                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
+                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
+                ]
+            }
+        ],
+        "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
+            }
+        ]
+    })
+}}

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

@@ -33,7 +33,7 @@
         "yAxis": {
             "title": "Weight"
         },
-        "legend": 'true',
+        "legend": true,
         "series": [
             {
                 "name": "Female",

package/components/chart/range-annotations-options.js

@@ -0,0 +1,216 @@
+import ChartConstants from './chart-constants';
+
+class RangeAnnotationsOptions {
+    constructor(rangeAnnotations) {
+        this.constants = ChartConstants.constants();
+        this.rangeAnnotations = rangeAnnotations;
+    }
+
+    getRangeAnnotationsOptionsDesktop = (chartType) => {
+        let xAxisPlotBands = [];
+        let yAxisPlotBands = [];
+        this.rangeAnnotations.forEach((rangeAnnotation) => {
+            let adjustedRangeValues = this.adjustRangeForCategoryAxis(rangeAnnotation, chartType);
+            let rangeConfig = {
+                from: adjustedRangeValues.axisValue1,
+                to: adjustedRangeValues.axisValue2,
+                label: {
+                    text: rangeAnnotation.text,
+                    useHTML: true,
+                    className: rangeAnnotation.labelInside
+                        ? `ons-chart__range-annotation-label ons-chart__range-annotation-label--${rangeAnnotation.axis}`
+                        : 'ons-chart__range-annotation-label--outside',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                        width: rangeAnnotation.labelWidth ? rangeAnnotation.labelWidth : 150,
+                    },
+                },
+                color: this.constants.shadingColor,
+            };
+            if (!rangeAnnotation.labelInside && rangeAnnotation.labelOffsetX) {
+                rangeConfig.label.x = rangeAnnotation.labelOffsetX;
+            }
+            if (!rangeAnnotation.labelInside && rangeAnnotation.labelOffsetY) {
+                rangeConfig.label.y = rangeAnnotation.labelOffsetY;
+            }
+            if (rangeAnnotation.axis === 'x') {
+                xAxisPlotBands.push(rangeConfig);
+            } else if (rangeAnnotation.axis === 'y') {
+                yAxisPlotBands.push(rangeConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotBands.length > 0 ? { plotBands: xAxisPlotBands } : undefined,
+            yAxis: yAxisPlotBands.length > 0 ? { plotBands: yAxisPlotBands } : undefined,
+        };
+    };
+
+    getRangeAnnotationsOptionsMobile = (annotationsLength, chartType) => {
+        let xAxisPlotBands = [];
+        let yAxisPlotBands = [];
+        this.rangeAnnotations.forEach((rangeAnnotation, index) => {
+            let adjustedRangeValues = this.adjustRangeForCategoryAxis(rangeAnnotation, chartType);
+            let rangeConfig = {
+                from: adjustedRangeValues.axisValue1,
+                to: adjustedRangeValues.axisValue2,
+                label: {
+                    // Add the number of point annotations to the current range annotation loop
+                    // So that if we have both types of annotations, the numbers will be sequential
+                    text: `${annotationsLength + index + 1}`,
+                    useHTML: true,
+                    className: 'ons-chart__footnote-number',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                    },
+                },
+                color: this.constants.shadingColor,
+            };
+            if (rangeAnnotation.axis === 'x') {
+                xAxisPlotBands.push(rangeConfig);
+            } else if (rangeAnnotation.axis === 'y') {
+                yAxisPlotBands.push(rangeConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotBands.length > 0 ? { plotBands: xAxisPlotBands } : undefined,
+            yAxis: yAxisPlotBands.length > 0 ? { plotBands: yAxisPlotBands } : undefined,
+        };
+    };
+
+    // Returns the position of the label relative to the plotBand
+    getLabelPosition = (chartType, labelRect, plotBandRect, isXaxis) => {
+        let isToLeft = false;
+        let isToRight = false;
+        let isToTop = false;
+        let isToBottom = false;
+        let isVertical = chartType === 'bar' ? !isXaxis : isXaxis;
+        if (isVertical) {
+            // vertical plotBand
+            if (labelRect.right < plotBandRect.left) {
+                isToLeft = true;
+            }
+            if (labelRect.left > plotBandRect.right) {
+                isToRight = true;
+            }
+        } else {
+            // horizontal plotBand
+            if (labelRect.bottom < plotBandRect.top) {
+                isToTop = true;
+            }
+            if (labelRect.top > plotBandRect.bottom) {
+                isToBottom = true;
+            }
+        }
+        return { isToLeft, isToRight, isToTop, isToBottom };
+    };
+
+    // Draws the line connecting the label to the plotBand
+    // Also adds a custom class to the label based on its position
+    addLine = (currentChart) => {
+        // If there is already a line in the chart, remove it before redrawing it
+        const lines = currentChart.container.querySelectorAll('[data-range-annotation-line]');
+        if (lines.length > 0) {
+            lines.forEach((line) => {
+                line.remove();
+            });
+        }
+
+        // Get all plotBands from both axes
+        // The filter ensures that plotLines are not included as they will have a `value` property rather than `from` and `to` properties
+        const xAxisPlotBands = currentChart.xAxis[0].plotLinesAndBands.filter((band) => band.options.from !== undefined);
+        const yAxisPlotBands = currentChart.yAxis[0].plotLinesAndBands.filter((band) => band.options.from !== undefined);
+
+        // Combine all plotBands
+        const allPlotBands = [...xAxisPlotBands, ...yAxisPlotBands];
+
+        allPlotBands.forEach((plotBand) => {
+            // If the label is set to be inside the plotBand, exit early and don't draw a line
+            if (plotBand.options.label.x === undefined && plotBand.options.label.y === undefined) {
+                return;
+            }
+
+            // Get the plotBand element
+            const plotBandElement = plotBand.svgElem.element;
+            const plotBandRect = plotBandElement.getBoundingClientRect();
+
+            // Get the label element
+            const labelElement = plotBand.label.element;
+            const labelRect = labelElement.getBoundingClientRect();
+
+            // Get the label position relative to the plotBand (left, right, top or bottom)
+            const labelPosition = this.getLabelPosition(
+                currentChart.userOptions.chart.type,
+                labelRect,
+                plotBandRect,
+                plotBand.axis.isXAxis,
+            );
+
+            // Only draw a line in the label doesn't overlap the plot band
+            if (!(labelPosition.isToLeft || labelPosition.isToRight || labelPosition.isToTop || labelPosition.isToBottom)) {
+                return;
+            }
+
+            // Create and add the connecting line
+            const line = document.createElement('div');
+            line.classList.add('ons-chart__connector-line');
+            line.setAttribute('data-range-annotation-line', true);
+            labelElement.appendChild(line);
+
+            // Draw the line based on the label position
+            if (labelPosition.isToRight) {
+                let divWidth = labelRect.left - plotBandRect.right;
+                line.style.width = `${divWidth}px`;
+                line.style.height = '1px';
+                line.style.top = `${labelRect.height / 2}px`;
+                line.style.left = `-${divWidth}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--right');
+            }
+
+            if (labelPosition.isToLeft) {
+                let divWidth = plotBandRect.left - labelRect.right;
+                line.style.width = `${divWidth}px`;
+                line.style.height = '1px';
+                line.style.top = `${labelRect.height / 2}px`;
+                line.style.right = `-${divWidth}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--left');
+            }
+
+            if (labelPosition.isToTop) {
+                let divHeight = plotBandRect.top - labelRect.bottom;
+                line.style.height = `${divHeight}px`;
+                line.style.width = '1px';
+                line.style.top = `${labelRect.height}px`;
+                line.style.left = `${labelRect.width / 2}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--top');
+            }
+
+            if (labelPosition.isToBottom) {
+                let divHeight = labelRect.top - plotBandRect.bottom;
+                line.style.height = `${divHeight}px`;
+                line.style.width = '1px';
+                line.style.top = `-${divHeight}px`;
+                line.style.left = `${labelRect.width / 2}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--bottom');
+            }
+        });
+    };
+
+    // For bar and column charts, we want the range to
+    // start and end flush with the edges of the columns / bars,
+    // not halfway through as is the Highcharts default.
+    adjustRangeForCategoryAxis = (rangeAnnotation, chartType) => {
+        let axisValue1 = rangeAnnotation.range.axisValue1;
+        let axisValue2 = rangeAnnotation.range.axisValue2;
+        if ((chartType === 'bar' && rangeAnnotation.axis === 'x') || (chartType === 'column' && rangeAnnotation.axis === 'x')) {
+            axisValue1 = rangeAnnotation.range.axisValue1 - 0.5;
+            axisValue2 = rangeAnnotation.range.axisValue2 - 0.5;
+        }
+        return { axisValue1, axisValue2 };
+    };
+}
+
+export default RangeAnnotationsOptions;

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

@@ -0,0 +1,93 @@
+import ChartConstants from './chart-constants';
+
+class ReferenceLineAnnotationsOptions {
+    constructor(referenceLineAnnotations) {
+        this.constants = ChartConstants.constants();
+        this.referenceLineAnnotations = referenceLineAnnotations;
+    }
+
+    getReferenceLineAnnotationsOptionsDesktop = () => {
+        let xAxisPlotLines = [];
+        let yAxisPlotLines = [];
+        this.referenceLineAnnotations.forEach((referenceLineAnnotation) => {
+            let referenceLineConfig = {
+                label: {
+                    text: referenceLineAnnotation.text,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                        width: referenceLineAnnotation.labelWidth ? referenceLineAnnotation.labelWidth : 150,
+                    },
+                    x: referenceLineAnnotation.labelOffsetX ? referenceLineAnnotation.labelOffsetX : 10,
+                    y: referenceLineAnnotation.labelOffsetY ? referenceLineAnnotation.labelOffsetY : 20,
+                    rotation: 0,
+                    align: 'left',
+                    textAlign: 'left',
+                },
+                color: this.constants.zeroLineColor,
+                // note this works to give a dashed line with 4px and a 4px gap, but
+                // this way of styling it is undocumented
+                dashStyle: '2 2',
+                width: 2,
+                value: referenceLineAnnotation.value,
+                zIndex: 3,
+            };
+            if (referenceLineAnnotation.axis === 'x') {
+                xAxisPlotLines.push(referenceLineConfig);
+            } else if (referenceLineAnnotation.axis === 'y') {
+                yAxisPlotLines.push(referenceLineConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotLines.length > 0 ? { plotLines: xAxisPlotLines } : undefined,
+            yAxis: yAxisPlotLines.length > 0 ? { plotLines: yAxisPlotLines } : undefined,
+        };
+    };
+
+    getReferenceLineAnnotationsOptionsMobile = (annotationsLength, chartType) => {
+        let xAxisPlotLines = [];
+        let yAxisPlotLines = [];
+        this.referenceLineAnnotations.forEach((referenceLineAnnotation, index) => {
+            let isVertical = referenceLineAnnotation.axis === 'x' ? true : false;
+            if (chartType === 'bar') {
+                isVertical = !isVertical;
+            }
+            let referenceLineConfig = {
+                label: {
+                    // Add the number of point and range annotations to the current reference line annotation loop
+                    // So that if we have more than one type of annotations, the numbers will be sequential
+                    text: `${annotationsLength + index + 1}`,
+                    useHTML: true,
+                    className: 'ons-chart__footnote-number',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                    },
+                    x: isVertical ? 7 : 0,
+                    y: isVertical ? 13 : -10, // 13 works with the height of the styled number
+                    rotation: 0,
+                    zIndex: 3,
+                },
+                color: this.constants.zeroLineColor,
+                // note this works to give a dashed line with 4px and a 4px gap, but
+                // this way of styling it is undocumented
+                dashStyle: '2 2',
+                width: 2,
+                value: referenceLineAnnotation.value,
+                zIndex: 3,
+            };
+            if (referenceLineAnnotation.axis === 'x') {
+                xAxisPlotLines.push(referenceLineConfig);
+            } else if (referenceLineAnnotation.axis === 'y') {
+                yAxisPlotLines.push(referenceLineConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotLines.length > 0 ? { plotLines: xAxisPlotLines } : undefined,
+            yAxis: yAxisPlotLines.length > 0 ? { plotLines: yAxisPlotLines } : undefined,
+        };
+    };
+}
+
+export default ReferenceLineAnnotationsOptions;

package/components/chart/scatter-chart.js

@@ -4,6 +4,7 @@ class ScatterChart {
     constructor() {
         this.chartConstants = ChartConstants.constants();
         this.markerStyles = this.chartConstants.scatterMarkerStyles;
+        this.confidenceLevelMarkerStyles = this.chartConstants.confidenceLevelMarkerStyles;
     }
 
     getScatterChartOptions = () => {
@@ -29,6 +30,20 @@ class ScatterChart {
             series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
         });
     };
+
+    updateMarkersForConfidenceLevels = (series) => {
+        series.forEach((series, i) => {
+            series.update(
+                {
+                    marker:
+                        this.confidenceLevelMarkerStyles[i] != undefined
+                            ? this.confidenceLevelMarkerStyles[i]
+                            : this.confidenceLevelMarkerStyles[0],
+                },
+                false,
+            );
+        });
+    };
 }
 
 export default ScatterChart;

package/components/chart/specific-chart-options.js

@@ -11,7 +11,7 @@ class SpecificChartOptions {
             colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
             chart: {
                 type: type,
-                marginTop: this.config.legend.enabled ? undefined : 50,
+                marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
             },
         };
     }