@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-chart.mjs

@@ -1,1519 +1,1438 @@
-import * as i0 from '@angular/core';
-import { Injectable, ViewChild, Input, HostBinding, Component, NgModule } from '@angular/core';
-import { ResizeObserverFactory } from '@kirbydesign/designsystem/shared';
-import { mergeDeepAll, ColorHelper, DesignTokenHelper, deepCopy, chartConfigHasType } from '@kirbydesign/designsystem/helpers';
-import { CategoryScale, LinearScale, TimeScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Tooltip, Chart, Legend } from 'chart.js';
-import 'chartjs-adapter-date-fns';
-import annotationPlugin from 'chartjs-plugin-annotation';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { valueOrDefault } from 'chart.js/helpers';
-import { toDate } from 'date-fns';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Injectable, Input, NgModule, ViewChild } from "@angular/core";
+import { ResizeObserverFactory } from "@kirbydesign/designsystem/shared";
+import { ColorHelper, DesignTokenHelper, chartConfigHasType, deepCopy, mergeDeepAll } from "@kirbydesign/designsystem/helpers";
+import { BarController, BarElement, CategoryScale, Chart, Chart as Chart$1, Filler, Legend, LineController, LineElement, LinearScale, PointElement, TimeScale, Tooltip } from "chart.js";
+import "chartjs-adapter-date-fns";
+import annotationPlugin from "chartjs-plugin-annotation";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { valueOrDefault } from "chart.js/helpers";
+import { toDate } from "date-fns";
 function isNumberArray(value) {
-    return Array.isArray(value) && value.every((item) => typeof item === 'number');
-}
-
-class AnnotationsDelegate {
-    constructor(chartConfigService) {
-        this.chartConfigService = chartConfigService;
-    }
-    applyDefaultsToAnnotations(annotations) {
-        return annotations.map((annotation) => {
-            const annotationTypeDefaults = this.chartConfigService.getAnnotationDefaults(annotation.type);
-            return mergeDeepAll(annotationTypeDefaults, annotation);
-        });
-    }
-    createAnnotationPluginOptionsObject(annotations) {
-        const annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
-        return {
-            plugins: {
-                annotation: {
-                    annotations: annotationsWithDefaults,
-                },
-            },
-        };
-    }
-    getExistingChartAnnotations(chart) {
-        const annotations = chart.options.plugins?.annotation?.annotations;
-        /* In browser chart.js might return annotations as a Proxy object; force it to be an array.
-           Each annotationOption in the resulting array  will also be a Proxy object.
-           But internally chart.js will just work with them as normal values */
-        if (annotations !== undefined) {
-            return Object.keys(annotations).map((key) => annotations[key]);
-        }
-        else {
-            return [];
-        }
-    }
+	return Array.isArray(value) && value.every((item) => typeof item === "number");
 }
-
+var AnnotationsDelegate = class {
+	constructor(chartConfigService) {
+		this.chartConfigService = chartConfigService;
+	}
+	applyDefaultsToAnnotations(annotations) {
+		return annotations.map((annotation) => {
+			const annotationTypeDefaults = this.chartConfigService.getAnnotationDefaults(annotation.type);
+			return mergeDeepAll(annotationTypeDefaults, annotation);
+		});
+	}
+	createAnnotationPluginOptionsObject(annotations) {
+		return { plugins: { annotation: { annotations: this.applyDefaultsToAnnotations(annotations) } } };
+	}
+	getExistingChartAnnotations(chart) {
+		const annotations = chart.options.plugins?.annotation?.annotations;
+		if (annotations !== void 0) return Object.keys(annotations).map((key) => annotations[key]);
+		else return [];
+	}
+};
 const { getThemeColorHexString: getThemeColorHexString$5 } = ColorHelper;
-const hoverBackgroundColor = getThemeColorHexString$5('primary');
-const backgroundColor = getThemeColorHexString$5('secondary');
+const hoverBackgroundColor = getThemeColorHexString$5("primary");
+const backgroundColor = getThemeColorHexString$5("secondary");
 function scriptedBackgroundColor(context) {
-    const dataset = context.dataset;
-    const highlightedElements = dataset?.kirbyOptions?.highlightedElements;
-    if (highlightedElements && highlightedElements.includes(context.dataIndex)) {
-        return hoverBackgroundColor;
-    }
-    else {
-        return backgroundColor;
-    }
+	const highlightedElements = context.dataset?.kirbyOptions?.highlightedElements;
+	if (highlightedElements && highlightedElements.includes(context.dataIndex)) return hoverBackgroundColor;
+	else return backgroundColor;
 }
-// Only adds a hovercolor if an onClick handler is provided
 function scriptedHoverBackgroundColor(context) {
-    if (context.chart.options.onClick) {
-        return hoverBackgroundColor;
-    }
+	if (context.chart.options.onClick) return hoverBackgroundColor;
 }
 const CHART_GLOBAL_DEFAULTS = {
-    maintainAspectRatio: false,
-    color: getThemeColorHexString$5('black'),
-    resizeDelay: 10,
-    elements: {
-        bar: {
-            backgroundColor: scriptedBackgroundColor,
-            hoverBackgroundColor: scriptedHoverBackgroundColor,
-        },
-        line: {
-            borderColor: scriptedBackgroundColor,
-            borderWidth: 2,
-            tension: 0.3,
-        },
-    },
-    scales: {
-        linear: {
-            display: false,
-            ticks: {
-                display: false,
-            },
-        },
-        category: {
-            display: true,
-            grid: {
-                display: false,
-            },
-        },
-    },
-    font: {
-        family: 'Roboto',
-    },
-    plugins: {
-        legend: {
-            display: false,
-        },
-        datalabels: {
-            display: false,
-        },
-        tooltip: {
-            enabled: false,
-        },
-    },
+	maintainAspectRatio: false,
+	color: getThemeColorHexString$5("black"),
+	resizeDelay: 10,
+	elements: {
+		bar: {
+			backgroundColor: scriptedBackgroundColor,
+			hoverBackgroundColor: scriptedHoverBackgroundColor
+		},
+		line: {
+			borderColor: scriptedBackgroundColor,
+			borderWidth: 2,
+			tension: .3
+		}
+	},
+	scales: {
+		linear: {
+			display: false,
+			ticks: { display: false }
+		},
+		category: {
+			display: true,
+			grid: { display: false }
+		}
+	},
+	font: { family: "Roboto" },
+	plugins: {
+		legend: { display: false },
+		datalabels: { display: false },
+		tooltip: { enabled: false }
+	}
 };
-
-/*
-  The marker plugin is heavily inspired by https://chartjs-plugin-crosshair.netlify.app
-  The project appears stale and only the vertical line feature is needed
-   part of the plugin that was actually needed is implemented here.
-*/
 const defaultOptions = {
-    line: {
-        color: 'black',
-        width: 1,
-        dashPattern: [],
-    },
-    snap: {
-        enabled: false,
-    },
+	line: {
+		color: "black",
+		width: 1,
+		dashPattern: []
+	},
+	snap: { enabled: false }
 };
 const hasMarkerConfiguration = (chart) => {
-    /*
-      Hacky solution. Should be fixed in this issue: https://github.com/kirbydesign/designsystem/issues/1967
-    */
-    return chart.data.datasets.some((dataset) => !!dataset?.kirbyOptions?.isStockChart);
+	return chart.data.datasets.some((dataset) => !!dataset?.kirbyOptions?.isStockChart);
 };
-var MarkerPlugin = {
-    id: 'marker',
-    afterInit: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        const xScaleType = chart.config.options.scales.x.type;
-        if (xScaleType !== 'linear' &&
-            xScaleType !== 'time' &&
-            xScaleType !== 'category' &&
-            xScaleType !== 'logarithmic') {
-            return;
-        }
-        if (chart.options.plugins.marker === undefined) {
-            chart.options.plugins.marker = defaultOptions;
-        }
-        chart.marker = {
-            enabled: false,
-            suppressUpdate: false,
-            x: null,
-            originalData: [],
-            originalXRange: {},
-            dragStarted: false,
-            dragStartX: null,
-            dragEndX: null,
-            suppressTooltips: false,
-            ignoreNextEvents: 0,
-        };
-    },
-    getOption: function (chart, category, name) {
-        return valueOrDefault(chart.options.plugins.marker[category]
-            ? chart.options.plugins.marker[category][name]
-            : undefined, defaultOptions[category][name]);
-    },
-    getXScale: function (chart) {
-        return chart.data.datasets.length ? chart.scales[chart.getDatasetMeta(0).xAxisID] : null;
-    },
-    getYScale: function (chart) {
-        return chart.scales[chart.getDatasetMeta(0).yAxisID];
-    },
-    afterEvent: function (chart, event) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        if (chart.config.options.scales.x.length == 0) {
-            return;
-        }
-        const e = event.event;
-        const xScaleType = chart.config.options.scales.x.type;
-        if (xScaleType !== 'linear' &&
-            xScaleType !== 'time' &&
-            xScaleType !== 'category' &&
-            xScaleType !== 'logarithmic') {
-            return;
-        }
-        const xScale = this.getXScale(chart);
-        if (!xScale) {
-            return;
-        }
-        if (chart.marker.ignoreNextEvents > 0) {
-            chart.marker.ignoreNextEvents -= 1;
-            return;
-        }
-        chart.marker.enabled =
-            e.type !== 'mouseout' &&
-                e.x > xScale.getPixelForValue(xScale.min) &&
-                e.x < xScale.getPixelForValue(xScale.max);
-        if (!chart.marker.enabled && !chart.marker.suppressUpdate) {
-            if (e.x > xScale.getPixelForValue(xScale.max)) {
-                // suppress future updates to prevent endless redrawing of chart
-                chart.marker.suppressUpdate = true;
-                chart.update('none');
-            }
-            chart.marker.dragStarted = false; // cancel zoom in progress
-            return false;
-        }
-        chart.marker.suppressUpdate = false;
-        chart.marker.x = e.x;
-        chart.draw();
-    },
-    doDraw: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        if (!chart.marker.enabled) {
-            return;
-        }
-        this.drawTraceLine(chart);
-        this.interpolateValues(chart);
-        this.drawTracePoints(chart);
-        return true;
-    },
-    beforeDraw: function (chart) {
-        return this.doDraw(chart);
-    },
-    // Logic moved to beforeDraw in order
-    // for the vertical line to be drawn
-    // under tooltip and datalabels.
-    // afterDraw: function(chart) {
-    //   return this.doDraw(chart);
-    // },
-    drawTraceLine: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        const yScale = this.getYScale(chart);
-        const lineWidth = this.getOption(chart, 'line', 'width');
-        const color = this.getOption(chart, 'line', 'color');
-        const dashPattern = this.getOption(chart, 'line', 'dashPattern');
-        const snapEnabled = this.getOption(chart, 'snap', 'enabled');
-        let lineX = chart.marker.x;
-        if (snapEnabled && chart._active.length) {
-            lineX = chart._active[0].element.x;
-        }
-        chart.ctx.beginPath();
-        chart.ctx.setLineDash(dashPattern);
-        chart.ctx.moveTo(lineX, yScale.getPixelForValue(yScale.max));
-        chart.ctx.lineWidth = lineWidth;
-        chart.ctx.strokeStyle = color;
-        chart.ctx.lineTo(lineX, yScale.getPixelForValue(yScale.min));
-        chart.ctx.stroke();
-        chart.ctx.setLineDash([]);
-    },
-    drawTracePoints: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
-            const dataset = chart.data.datasets[chartIndex];
-            const meta = chart.getDatasetMeta(chartIndex);
-            const yScale = chart.scales[meta.yAxisID];
-            if (meta.hidden || !dataset.interpolate) {
-                continue;
-            }
-            chart.ctx.beginPath();
-            chart.ctx.arc(chart.marker.x, yScale.getPixelForValue(dataset.interpolatedValue), 3, 0, 2 * Math.PI, false);
-            chart.ctx.fillStyle = 'white';
-            chart.ctx.lineWidth = 2;
-            chart.ctx.strokeStyle = dataset.borderColor;
-            chart.ctx.fill();
-            chart.ctx.stroke();
-        }
-    },
-    interpolateValues: function (chart) {
-        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
-            const dataset = chart.data.datasets[chartIndex];
-            const meta = chart.getDatasetMeta(chartIndex);
-            const xScale = chart.scales[meta.xAxisID];
-            const xValue = xScale.getValueForPixel(chart.marker.x);
-            if (meta.hidden || !dataset.interpolate) {
-                continue;
-            }
-            const data = dataset.data;
-            const index = data.findIndex(function (o) {
-                return o.x >= xValue;
-            });
-            const prev = data[index - 1];
-            const next = data[index];
-            if (chart.data.datasets[chartIndex].steppedLine && prev) {
-                dataset.interpolatedValue = prev.y;
-            }
-            else if (prev && next) {
-                const slope = (next.y - prev.y) / (next.x - prev.x);
-                dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
-            }
-            else {
-                dataset.interpolatedValue = NaN;
-            }
-        }
-    },
+var chartjs_plugin_marker_default = {
+	id: "marker",
+	afterInit: function(chart) {
+		if (!hasMarkerConfiguration(chart)) return;
+		const xScaleType = chart.config.options.scales.x.type;
+		if (xScaleType !== "linear" && xScaleType !== "time" && xScaleType !== "category" && xScaleType !== "logarithmic") return;
+		if (chart.options.plugins.marker === void 0) chart.options.plugins.marker = defaultOptions;
+		chart.marker = {
+			enabled: false,
+			suppressUpdate: false,
+			x: null,
+			originalData: [],
+			originalXRange: {},
+			dragStarted: false,
+			dragStartX: null,
+			dragEndX: null,
+			suppressTooltips: false,
+			ignoreNextEvents: 0
+		};
+	},
+	getOption: function(chart, category, name) {
+		return valueOrDefault(chart.options.plugins.marker[category] ? chart.options.plugins.marker[category][name] : void 0, defaultOptions[category][name]);
+	},
+	getXScale: function(chart) {
+		return chart.data.datasets.length ? chart.scales[chart.getDatasetMeta(0).xAxisID] : null;
+	},
+	getYScale: function(chart) {
+		return chart.scales[chart.getDatasetMeta(0).yAxisID];
+	},
+	afterEvent: function(chart, event) {
+		if (!hasMarkerConfiguration(chart)) return;
+		if (chart.config.options.scales.x.length == 0) return;
+		const e = event.event;
+		const xScaleType = chart.config.options.scales.x.type;
+		if (xScaleType !== "linear" && xScaleType !== "time" && xScaleType !== "category" && xScaleType !== "logarithmic") return;
+		const xScale = this.getXScale(chart);
+		if (!xScale) return;
+		if (chart.marker.ignoreNextEvents > 0) {
+			chart.marker.ignoreNextEvents -= 1;
+			return;
+		}
+		chart.marker.enabled = e.type !== "mouseout" && e.x > xScale.getPixelForValue(xScale.min) && e.x < xScale.getPixelForValue(xScale.max);
+		if (!chart.marker.enabled && !chart.marker.suppressUpdate) {
+			if (e.x > xScale.getPixelForValue(xScale.max)) {
+				chart.marker.suppressUpdate = true;
+				chart.update("none");
+			}
+			chart.marker.dragStarted = false;
+			return false;
+		}
+		chart.marker.suppressUpdate = false;
+		chart.marker.x = e.x;
+		chart.draw();
+	},
+	doDraw: function(chart) {
+		if (!hasMarkerConfiguration(chart)) return;
+		if (!chart.marker.enabled) return;
+		this.drawTraceLine(chart);
+		this.interpolateValues(chart);
+		this.drawTracePoints(chart);
+		return true;
+	},
+	beforeDraw: function(chart) {
+		return this.doDraw(chart);
+	},
+	drawTraceLine: function(chart) {
+		if (!hasMarkerConfiguration(chart)) return;
+		const yScale = this.getYScale(chart);
+		const lineWidth = this.getOption(chart, "line", "width");
+		const color = this.getOption(chart, "line", "color");
+		const dashPattern = this.getOption(chart, "line", "dashPattern");
+		const snapEnabled = this.getOption(chart, "snap", "enabled");
+		let lineX = chart.marker.x;
+		if (snapEnabled && chart._active.length) lineX = chart._active[0].element.x;
+		chart.ctx.beginPath();
+		chart.ctx.setLineDash(dashPattern);
+		chart.ctx.moveTo(lineX, yScale.getPixelForValue(yScale.max));
+		chart.ctx.lineWidth = lineWidth;
+		chart.ctx.strokeStyle = color;
+		chart.ctx.lineTo(lineX, yScale.getPixelForValue(yScale.min));
+		chart.ctx.stroke();
+		chart.ctx.setLineDash([]);
+	},
+	drawTracePoints: function(chart) {
+		if (!hasMarkerConfiguration(chart)) return;
+		for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+			const dataset = chart.data.datasets[chartIndex];
+			const meta = chart.getDatasetMeta(chartIndex);
+			const yScale = chart.scales[meta.yAxisID];
+			if (meta.hidden || !dataset.interpolate) continue;
+			chart.ctx.beginPath();
+			chart.ctx.arc(chart.marker.x, yScale.getPixelForValue(dataset.interpolatedValue), 3, 0, 2 * Math.PI, false);
+			chart.ctx.fillStyle = "white";
+			chart.ctx.lineWidth = 2;
+			chart.ctx.strokeStyle = dataset.borderColor;
+			chart.ctx.fill();
+			chart.ctx.stroke();
+		}
+	},
+	interpolateValues: function(chart) {
+		for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+			const dataset = chart.data.datasets[chartIndex];
+			const meta = chart.getDatasetMeta(chartIndex);
+			const xValue = chart.scales[meta.xAxisID].getValueForPixel(chart.marker.x);
+			if (meta.hidden || !dataset.interpolate) continue;
+			const data = dataset.data;
+			const index = data.findIndex(function(o) {
+				return o.x >= xValue;
+			});
+			const prev = data[index - 1];
+			const next = data[index];
+			if (chart.data.datasets[chartIndex].steppedLine && prev) dataset.interpolatedValue = prev.y;
+			else if (prev && next) {
+				const slope = (next.y - prev.y) / (next.x - prev.x);
+				dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
+			} else dataset.interpolatedValue = NaN;
+		}
+	}
 };
-
-const CHART_SCALES = [CategoryScale, LinearScale, TimeScale];
-const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
+const CHART_SCALES = [
+	CategoryScale,
+	LinearScale,
+	TimeScale
+];
+const CHART_ELEMENTS = [
+	BarElement,
+	LineElement,
+	PointElement
+];
 const CHART_CONTROLLERS = [BarController, LineController];
-const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin].map((plugin) => (plugin?.__esModule ? plugin.default : plugin));
-/* Order matters; defaults must be merged after register as
-   register modifies the Chart.defaults objects */
-Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
-/* Chart.defaults is read only; set each key modified in
-   CHART_GLOBAL_DEFAULTS manually */
-const mergedDefaults = mergeDeepAll(Chart.defaults, CHART_GLOBAL_DEFAULTS);
+const CHART_PLUGINS = [
+	annotationPlugin,
+	Filler,
+	ChartDataLabels,
+	Tooltip,
+	chartjs_plugin_marker_default
+].map((plugin) => plugin?.__esModule ? plugin.default : plugin);
+Chart$1.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
+const mergedDefaults = mergeDeepAll(Chart$1.defaults, CHART_GLOBAL_DEFAULTS);
 Object.entries(CHART_GLOBAL_DEFAULTS).forEach(([key]) => {
-    Chart.defaults[key] = mergedDefaults[key];
+	Chart$1.defaults[key] = mergedDefaults[key];
 });
-
 const { getThemeColorHexString: getThemeColorHexString$4 } = ColorHelper;
-/* The chart.js annotation does not allow for changing the
-defaults it comes with. In order to have sensible defaults
-this object is used instead and manually merged with the
-rest of the annotations object */
-const borderColor = getThemeColorHexString$4('semi-dark');
+const borderColor = getThemeColorHexString$4("semi-dark");
 const borderDash = [6, 3];
 const borderWidth = 1;
 const CHART_ANNOTATIONS_CONFIG = {
-    line: {
-        borderDash,
-        borderWidth,
-        borderColor,
-    },
-    ellipse: {
-        borderDash,
-        borderWidth,
-        borderColor,
-        backgroundColor: 'transparent',
-    },
-    box: {
-        borderDash,
-        borderWidth,
-        borderColor,
-        backgroundColor: 'transparent',
-    },
-    point: {
-        backgroundColor: 'initial',
-    },
-};
-
-/* Allows for adding functionality to interactions chart.js while
-preserving the interaction functionality the consumer of the component has
-passed by being provided as a callback. */
-const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
-    onHover: (_event, activeElements, _chart, callback) => {
-        if (_chart.options.onClick) {
-            _chart.canvas.style.cursor = activeElements[0] ? 'pointer' : 'default';
-        }
-        if (callback)
-            callback(_event, activeElements, _chart);
-    },
+	line: {
+		borderDash,
+		borderWidth,
+		borderColor
+	},
+	ellipse: {
+		borderDash,
+		borderWidth,
+		borderColor,
+		backgroundColor: "transparent"
+	},
+	box: {
+		borderDash,
+		borderWidth,
+		borderColor,
+		backgroundColor: "transparent"
+	},
+	point: { backgroundColor: "initial" }
 };
-
+const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = { onHover: (_event, activeElements, _chart, callback) => {
+	if (_chart.options.onClick) _chart.canvas.style.cursor = activeElements[0] ? "pointer" : "default";
+	if (callback) callback(_event, activeElements, _chart);
+} };
 const { fontSize: fontSize$2 } = DesignTokenHelper;
 const { getThemeColorHexString: getThemeColorHexString$3, getThemeColorRgbString: getThemeColorRgbString$1 } = ColorHelper;
-/**
- * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
- */
 const getChartPointFromContext = (context) => {
-    return context.dataset.data[context.dataIndex];
+	return context.dataset.data[context.dataIndex];
 };
 const CHART_TYPES_CONFIG = {
-    bar: {
-        type: 'bar',
-        options: {
-            datasets: {
-                bar: {
-                    barPercentage: 0.6,
-                },
-                line: {
-                    spanGaps: true,
-                },
-            },
-            indexAxis: 'y',
-            scales: {
-                y: {
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        font: {
-                            size: parseInt(fontSize$2('s')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                point: {
-                    radius: 0,
-                },
-                line: {
-                    borderColor: getThemeColorHexString$3('medium'),
-                },
-            },
-        },
-    },
-    column: {
-        type: 'bar',
-        options: {
-            datasets: {
-                bar: {
-                    barPercentage: 0.6,
-                },
-                line: {
-                    spanGaps: true,
-                },
-            },
-            indexAxis: 'x',
-            scales: {
-                x: {
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        font: {
-                            size: parseInt(fontSize$2('xs')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                line: {
-                    tension: 0.2,
-                    borderColor: getThemeColorHexString$3('medium'),
-                },
-                point: {
-                    radius: 0,
-                },
-            },
-        },
-    },
-    line: {
-        type: 'line',
-        options: {
-            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
-            scales: {
-                x: {
-                    grid: {
-                        borderColor: getThemeColorHexString$3('medium'),
-                        borderWidth: 1,
-                    },
-                    ticks: {
-                        font: {
-                            size: parseInt(fontSize$2('xs')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                point: {
-                    radius: 0,
-                },
-            },
-        },
-    },
-    stock: {
-        type: 'line',
-        options: {
-            responsive: true,
-            animation: {
-                duration: 0,
-            },
-            layout: {
-                padding: {
-                    left: 20,
-                    right: 20,
-                    top: 30,
-                    bottom: 0,
-                },
-            },
-            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
-            scales: {
-                x: {
-                    grid: {
-                        lineWidth: 0,
-                    },
-                    ticks: {
-                        maxRotation: 0,
-                        autoSkipPadding: 120,
-                        font: {
-                            size: parseInt(fontSize$2('xs')),
-                        },
-                    },
-                },
-                y: {
-                    position: 'right',
-                    display: true,
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        display: true,
-                        font: {
-                            size: parseInt(fontSize$2('xs')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                line: {
-                    tension: 0, // Smooth curve (0 = no smoothing)
-                    borderWidth: 2,
-                },
-                point: {
-                    hitRadius: 20,
-                    radius: 0,
-                    hoverRadius: 0,
-                    hoverBorderWidth: 0,
-                },
-            },
-            normalized: true,
-            plugins: {
-                tooltip: {
-                    padding: 10,
-                    enabled: true,
-                    mode: 'index',
-                    intersect: false,
-                    backgroundColor: getThemeColorHexString$3('semi-light'),
-                    titleColor: getThemeColorHexString$3('semi-light-contrast'),
-                    bodyColor: getThemeColorHexString$3('semi-light-contrast'),
-                    caretSize: 0,
-                    bodySpacing: 5,
-                    titleSpacing: 5,
-                    borderColor: 'transparent',
-                    callbacks: {
-                        labelColor: (tooltipItem) => {
-                            return {
-                                backgroundColor: tooltipItem.dataset.borderColor,
-                                borderColor: getThemeColorHexString$3('semi-light'),
-                                borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
-                                // An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
-                            };
-                        },
-                    },
-                },
-                datalabels: {
-                    backgroundColor: (context) => context.dataset.borderColor,
-                    color: getThemeColorHexString$3('white'),
-                    borderRadius: 3,
-                    font: {
-                        lineHeight: 1,
-                        size: parseInt(fontSize$2('xs')),
-                    },
-                    padding: {
-                        top: 6,
-                        left: 5,
-                        right: 5,
-                        bottom: 5,
-                    },
-                    offset: 5,
-                    align: (context) => getChartPointFromContext(context)?.datalabel.position,
-                    display: (context) => !!getChartPointFromContext(context)?.datalabel,
-                    formatter: (value) => value.datalabel.value,
-                },
-            },
-        },
-    },
+	bar: {
+		type: "bar",
+		options: {
+			datasets: {
+				bar: { barPercentage: .6 },
+				line: { spanGaps: true }
+			},
+			indexAxis: "y",
+			scales: { y: {
+				grid: { drawBorder: false },
+				ticks: { font: { size: parseInt(fontSize$2("s")) } }
+			} },
+			elements: {
+				point: { radius: 0 },
+				line: { borderColor: getThemeColorHexString$3("medium") }
+			}
+		}
+	},
+	column: {
+		type: "bar",
+		options: {
+			datasets: {
+				bar: { barPercentage: .6 },
+				line: { spanGaps: true }
+			},
+			indexAxis: "x",
+			scales: { x: {
+				grid: { drawBorder: false },
+				ticks: { font: { size: parseInt(fontSize$2("xs")) } }
+			} },
+			elements: {
+				line: {
+					tension: .2,
+					borderColor: getThemeColorHexString$3("medium")
+				},
+				point: { radius: 0 }
+			}
+		}
+	},
+	line: {
+		type: "line",
+		options: {
+			backgroundColor: getThemeColorRgbString$1("semi-light", .5),
+			scales: { x: {
+				grid: {
+					borderColor: getThemeColorHexString$3("medium"),
+					borderWidth: 1
+				},
+				ticks: { font: { size: parseInt(fontSize$2("xs")) } }
+			} },
+			elements: { point: { radius: 0 } }
+		}
+	},
+	stock: {
+		type: "line",
+		options: {
+			responsive: true,
+			animation: { duration: 0 },
+			layout: { padding: {
+				left: 20,
+				right: 20,
+				top: 30,
+				bottom: 0
+			} },
+			backgroundColor: getThemeColorRgbString$1("semi-light", .5),
+			scales: {
+				x: {
+					grid: { lineWidth: 0 },
+					ticks: {
+						maxRotation: 0,
+						autoSkipPadding: 120,
+						font: { size: parseInt(fontSize$2("xs")) }
+					}
+				},
+				y: {
+					position: "right",
+					display: true,
+					grid: { drawBorder: false },
+					ticks: {
+						display: true,
+						font: { size: parseInt(fontSize$2("xs")) }
+					}
+				}
+			},
+			elements: {
+				line: {
+					tension: 0,
+					borderWidth: 2
+				},
+				point: {
+					hitRadius: 20,
+					radius: 0,
+					hoverRadius: 0,
+					hoverBorderWidth: 0
+				}
+			},
+			normalized: true,
+			plugins: {
+				tooltip: {
+					padding: 10,
+					enabled: true,
+					mode: "index",
+					intersect: false,
+					backgroundColor: getThemeColorHexString$3("semi-light"),
+					titleColor: getThemeColorHexString$3("semi-light-contrast"),
+					bodyColor: getThemeColorHexString$3("semi-light-contrast"),
+					caretSize: 0,
+					bodySpacing: 5,
+					titleSpacing: 5,
+					borderColor: "transparent",
+					callbacks: { labelColor: (tooltipItem) => {
+						return {
+							backgroundColor: tooltipItem.dataset.borderColor,
+							borderColor: getThemeColorHexString$3("semi-light"),
+							borderWidth: 2
+						};
+					} }
+				},
+				datalabels: {
+					backgroundColor: (context) => context.dataset.borderColor,
+					color: getThemeColorHexString$3("white"),
+					borderRadius: 3,
+					font: {
+						lineHeight: 1,
+						size: parseInt(fontSize$2("xs"))
+					},
+					padding: {
+						top: 6,
+						left: 5,
+						right: 5,
+						bottom: 5
+					},
+					offset: 5,
+					align: (context) => getChartPointFromContext(context)?.datalabel.position,
+					display: (context) => !!getChartPointFromContext(context)?.datalabel,
+					formatter: (value) => value.datalabel.value
+				}
+			}
+		}
+	}
 };
-
-class ChartConfigService {
-    getTypeConfig(chartType) {
-        /* Deep copy to avoid Chart object modifying parts of CHART_TYPES_CONFIG
-        as it copies by reference when initialized */
-        return deepCopy(CHART_TYPES_CONFIG[chartType]);
-    }
-    getAnnotationDefaults(type) {
-        return CHART_ANNOTATIONS_CONFIG[type];
-    }
-    /* Our types does not always map 1 to 1 to the same type
-    that the chart.js chart is actually configured with. Therefore this function
-    for looking up the ChartJSType of a type.  */
-    chartTypeToChartJSType(chartType) {
-        return CHART_TYPES_CONFIG[chartType]['type'];
-    }
-    applyInteractionFunctionsExtensions(options) {
-        const interactionFunctionsExtensions = CHART_INTERACTION_FUNCTIONS_EXTENSIONS;
-        Object.entries(interactionFunctionsExtensions).forEach(([key]) => {
-            const callback = options[key];
-            options[key] = (e, a, c) => {
-                interactionFunctionsExtensions[key](e, a, c, callback);
-            };
-        });
-        return options;
-    }
-    getStockChartOptions(dataLabelOptions, locale) {
-        return {
-            locale: locale,
-            plugins: {
-                tooltip: {
-                    callbacks: {
-                        title: (tooltipItems) => {
-                            const date = toDate(tooltipItems[0]?.raw?.x);
-                            if (date.valueOf()) {
-                                return date.toLocaleTimeString(locale, {
-                                    day: 'numeric',
-                                    month: 'short',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                });
-                            }
-                        },
-                        label: (context) => {
-                            // It's not possible to add spacing between color legend and text so we
-                            // prefix with a space.
-                            return ' ' + context.formattedValue + (dataLabelOptions.valueSuffix || '');
-                        },
-                    },
-                },
-            },
-            scales: {
-                y: {
-                    ticks: {
-                        callback: (value) => {
-                            return value + (dataLabelOptions.valueSuffix || '');
-                        },
-                    },
-                },
-            },
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartConfigService, decorators: [{
-            type: Injectable
-        }] });
-
-class ChartJSService {
-    constructor(chartConfigService) {
-        this.chartConfigService = chartConfigService;
-        this.annotationsDelegate = new AnnotationsDelegate(chartConfigService);
-    }
-    renderChart(args) {
-        const { targetElement, type, data, labels, customOptions, annotations, highlightedElements } = args;
-        this.highlightedElements = highlightedElements || null;
-        this.chartType = type;
-        const datasets = this.createDatasets(data);
-        const options = this.createOptionsObject({
-            customOptions,
-            annotations,
-        });
-        const config = this.createConfigurationObject(type, datasets, options, labels);
-        this.initializeNewChart(targetElement.nativeElement, config);
-    }
-    redrawChart() {
-        this.chart.update();
-    }
-    destroyChart() {
-        this.chart?.destroy();
-    }
-    updateData(data) {
-        const datasets = this.createDatasets(data);
-        this.chart.data.datasets = datasets;
-    }
-    updateLabels(labels) {
-        /* As labels provided via the 'labels' input property always has
-        highest priority - we can just set the property directly */
-        this.chart.data.labels = labels;
-    }
-    updateType(type, customOptions) {
-        if (type === 'bar' || type === 'column') {
-            /* indexAxis does not update predictably; update by replacing
-               the chart entirely instead */
-            this.destructivelyUpdateType(type, customOptions);
-        }
-        else {
-            this.nonDestructivelyUpdateType(type, customOptions);
-        }
-    }
-    updateOptions(customOptions, type) {
-        const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
-        this.chartType = type;
-        this.chart.options = this.createOptionsObject({ customOptions, annotations });
-    }
-    updateAnnotations(annotations) {
-        const annotationsWithDefaults = this.annotationsDelegate.applyDefaultsToAnnotations(annotations);
-        this.chart.options.plugins.annotation.annotations = annotationsWithDefaults;
-    }
-    updateHighlightedElements(highlightedElements) {
-        this.highlightedElements = highlightedElements;
-        const oldDatasets = this.chart.data.datasets;
-        // Clear old datasets of highlighted elements
-        oldDatasets.map((dataset) => {
-            if (dataset?.kirbyOptions?.highlightedElements) {
-                delete dataset.kirbyOptions.highlightedElements;
-            }
-        });
-        this.chart.data.datasets = this.createDatasets(oldDatasets);
-    }
-    createOptionsObject(args) {
-        const { customOptions, annotations } = args;
-        const typeConfig = this.chartConfigService.getTypeConfig(this.chartType);
-        const typeConfigOptions = typeConfig?.options;
-        const annotationPluginOptions = annotations
-            ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations)
-            : {};
-        const mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
-        return this.chartConfigService.applyInteractionFunctionsExtensions(mergedOptions);
-    }
-    getDefaultLabels(datasets) {
-        /*
-          Chart.js requires labels along the index axis to render anything therefore
-          use blank labels
-        */
-        const largestDataset = datasets.reduce((previousDataset, currentDataset) => previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset);
-        return Array(largestDataset.data.length).fill('');
-    }
-    createConfigurationObject(type, datasets, options, labels) {
-        const typeConfig = this.chartConfigService.getTypeConfig(type);
-        const indexAxis = typeConfig?.options?.indexAxis ?? 'x';
-        const labelsToApply = this.getLabelsToApply({ labels, datasets, type, indexAxis });
-        return mergeDeepAll(typeConfig, {
-            data: {
-                labels: labelsToApply,
-                datasets,
-            },
-            options,
-        });
-    }
-    createDatasets(data) {
-        const datasets = isNumberArray(data) ? [{ data }] : data;
-        if (this.highlightedElements)
-            this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
-        return datasets;
-    }
-    destructivelyUpdateType(type, customOptions) {
-        const datasets = this.chart.data.datasets;
-        const labels = this.chart.data.labels; // chart.js stores labels as unknown[]; cast it to ChartLabel[]
-        const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
-        this.chartType = type;
-        const options = this.createOptionsObject({ customOptions, annotations });
-        const config = this.createConfigurationObject(type, datasets, options, labels);
-        const canvasElement = this.chart.canvas;
-        this.chart.destroy();
-        this.initializeNewChart(canvasElement, config);
-    }
-    nonDestructivelyUpdateType(chartType, customOptions) {
-        const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
-        this.chartType = chartType;
-        const options = this.createOptionsObject({
-            customOptions,
-            annotations,
-        });
-        this.chart.options = options;
-        if (chartConfigHasType(this.chart.config)) {
-            this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
-        }
-    }
-    initializeNewChart(canvasElement, config) {
-        this.chart = new Chart(canvasElement, config);
-    }
-    addHighlightedElementsToDatasets(highlightedElements, datasets) {
-        highlightedElements.forEach(([datasetIndex, dataIndex]) => {
-            const dataset = datasets[datasetIndex];
-            if (!dataset)
-                return;
-            if (dataset?.kirbyOptions?.highlightedElements) {
-                dataset.kirbyOptions.highlightedElements.push(dataIndex);
-            }
-            else {
-                dataset.kirbyOptions = {
-                    ...dataset.kirbyOptions,
-                    highlightedElements: [dataIndex],
-                };
-            }
-        });
-    }
-    getLabelsToApply(args) {
-        const { datasets, labels, indexAxis } = args;
-        const datasetHasLabels = ({ data }) => !!data?.some((datapoint) => typeof datapoint === 'object' && typeof datapoint[indexAxis] === 'string');
-        /*
-           Labels can be provided by the user two ways:
-           1. As a seperate ChartLabel[] via the 'labels' input prop - this has highest priority
-           2. Together with the dataset via the 'data' input prop - here each datapoint contains
-           a label for the indexAxis.
-           For example: { x: 'label1', y: 1} in the case where the index axis is 'x'.
-    
-           If no labels are provided then default labels are used.
-        */
-        const labelsAreGivenAsSeperateArray = labels !== undefined;
-        const labelsAreGivenTogetherWithDataset = datasets.some(datasetHasLabels);
-        if (labelsAreGivenAsSeperateArray) {
-            return labels;
-        }
-        else if (labelsAreGivenTogetherWithDataset) {
-            return null;
-        }
-        else {
-            return this.getDefaultLabels(datasets);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartJSService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: ChartConfigService }] });
-
+var ChartConfigService = class ChartConfigService {
+	getTypeConfig(chartType) {
+		return deepCopy(CHART_TYPES_CONFIG[chartType]);
+	}
+	getAnnotationDefaults(type) {
+		return CHART_ANNOTATIONS_CONFIG[type];
+	}
+	chartTypeToChartJSType(chartType) {
+		return CHART_TYPES_CONFIG[chartType]["type"];
+	}
+	applyInteractionFunctionsExtensions(options) {
+		const interactionFunctionsExtensions = CHART_INTERACTION_FUNCTIONS_EXTENSIONS;
+		Object.entries(interactionFunctionsExtensions).forEach(([key]) => {
+			const callback = options[key];
+			options[key] = (e, a, c) => {
+				interactionFunctionsExtensions[key](e, a, c, callback);
+			};
+		});
+		return options;
+	}
+	getStockChartOptions(dataLabelOptions, locale) {
+		return {
+			locale,
+			plugins: { tooltip: { callbacks: {
+				title: (tooltipItems) => {
+					const date = toDate(tooltipItems[0]?.raw?.x);
+					if (date.valueOf()) return date.toLocaleTimeString(locale, {
+						day: "numeric",
+						month: "short",
+						hour: "2-digit",
+						minute: "2-digit"
+					});
+				},
+				label: (context) => {
+					return " " + context.formattedValue + (dataLabelOptions.valueSuffix || "");
+				}
+			} } },
+			scales: { y: { ticks: { callback: (value) => {
+				return value + (dataLabelOptions.valueSuffix || "");
+			} } } }
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartConfigService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartConfigService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartConfigService,
+	decorators: [{ type: Injectable }]
+});
+var ChartJSService = class ChartJSService {
+	constructor(chartConfigService) {
+		this.chartConfigService = chartConfigService;
+		this.annotationsDelegate = new AnnotationsDelegate(chartConfigService);
+	}
+	renderChart(args) {
+		const { targetElement, type, data, labels, customOptions, annotations, highlightedElements } = args;
+		this.highlightedElements = highlightedElements || null;
+		this.chartType = type;
+		const datasets = this.createDatasets(data);
+		const options = this.createOptionsObject({
+			customOptions,
+			annotations
+		});
+		const config = this.createConfigurationObject(type, datasets, options, labels);
+		this.initializeNewChart(targetElement.nativeElement, config);
+	}
+	redrawChart() {
+		this.chart.update();
+	}
+	destroyChart() {
+		this.chart?.destroy();
+	}
+	updateData(data) {
+		const datasets = this.createDatasets(data);
+		this.chart.data.datasets = datasets;
+	}
+	updateLabels(labels) {
+		this.chart.data.labels = labels;
+	}
+	updateType(type, customOptions) {
+		if (type === "bar" || type === "column") this.destructivelyUpdateType(type, customOptions);
+		else this.nonDestructivelyUpdateType(type, customOptions);
+	}
+	updateOptions(customOptions, type) {
+		const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
+		this.chartType = type;
+		this.chart.options = this.createOptionsObject({
+			customOptions,
+			annotations
+		});
+	}
+	updateAnnotations(annotations) {
+		const annotationsWithDefaults = this.annotationsDelegate.applyDefaultsToAnnotations(annotations);
+		this.chart.options.plugins.annotation.annotations = annotationsWithDefaults;
+	}
+	updateHighlightedElements(highlightedElements) {
+		this.highlightedElements = highlightedElements;
+		const oldDatasets = this.chart.data.datasets;
+		oldDatasets.map((dataset) => {
+			if (dataset?.kirbyOptions?.highlightedElements) delete dataset.kirbyOptions.highlightedElements;
+		});
+		this.chart.data.datasets = this.createDatasets(oldDatasets);
+	}
+	createOptionsObject(args) {
+		const { customOptions, annotations } = args;
+		const typeConfigOptions = this.chartConfigService.getTypeConfig(this.chartType)?.options;
+		const annotationPluginOptions = annotations ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations) : {};
+		const mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
+		return this.chartConfigService.applyInteractionFunctionsExtensions(mergedOptions);
+	}
+	getDefaultLabels(datasets) {
+		const largestDataset = datasets.reduce((previousDataset, currentDataset) => previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset);
+		return Array(largestDataset.data.length).fill("");
+	}
+	createConfigurationObject(type, datasets, options, labels) {
+		const typeConfig = this.chartConfigService.getTypeConfig(type);
+		const indexAxis = typeConfig?.options?.indexAxis ?? "x";
+		const labelsToApply = this.getLabelsToApply({
+			labels,
+			datasets,
+			type,
+			indexAxis
+		});
+		return mergeDeepAll(typeConfig, {
+			data: {
+				labels: labelsToApply,
+				datasets
+			},
+			options
+		});
+	}
+	createDatasets(data) {
+		const datasets = isNumberArray(data) ? [{ data }] : data;
+		if (this.highlightedElements) this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
+		return datasets;
+	}
+	destructivelyUpdateType(type, customOptions) {
+		const datasets = this.chart.data.datasets;
+		const labels = this.chart.data.labels;
+		const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
+		this.chartType = type;
+		const options = this.createOptionsObject({
+			customOptions,
+			annotations
+		});
+		const config = this.createConfigurationObject(type, datasets, options, labels);
+		const canvasElement = this.chart.canvas;
+		this.chart.destroy();
+		this.initializeNewChart(canvasElement, config);
+	}
+	nonDestructivelyUpdateType(chartType, customOptions) {
+		const annotations = this.annotationsDelegate.getExistingChartAnnotations(this.chart);
+		this.chartType = chartType;
+		const options = this.createOptionsObject({
+			customOptions,
+			annotations
+		});
+		this.chart.options = options;
+		if (chartConfigHasType(this.chart.config)) this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
+	}
+	initializeNewChart(canvasElement, config) {
+		this.chart = new Chart$1(canvasElement, config);
+	}
+	addHighlightedElementsToDatasets(highlightedElements, datasets) {
+		highlightedElements.forEach(([datasetIndex, dataIndex]) => {
+			const dataset = datasets[datasetIndex];
+			if (!dataset) return;
+			if (dataset?.kirbyOptions?.highlightedElements) dataset.kirbyOptions.highlightedElements.push(dataIndex);
+			else dataset.kirbyOptions = {
+				...dataset.kirbyOptions,
+				highlightedElements: [dataIndex]
+			};
+		});
+	}
+	getLabelsToApply(args) {
+		const { datasets, labels, indexAxis } = args;
+		const datasetHasLabels = ({ data }) => !!data?.some((datapoint) => typeof datapoint === "object" && typeof datapoint[indexAxis] === "string");
+		const labelsAreGivenAsSeperateArray = labels !== void 0;
+		const labelsAreGivenTogetherWithDataset = datasets.some(datasetHasLabels);
+		if (labelsAreGivenAsSeperateArray) return labels;
+		else if (labelsAreGivenTogetherWithDataset) return null;
+		else return this.getDefaultLabels(datasets);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartJSService,
+			deps: [{ token: ChartConfigService }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartJSService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartJSService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: ChartConfigService }]
+});
 const TEST_CHART_TYPES_CONFIG = {
-    bar: {
-        type: 'bar',
-        options: {
-            indexAxis: 'y',
-            elements: {
-                line: {
-                    borderColor: 'blue',
-                },
-            },
-        },
-    },
-    column: {
-        type: 'bar',
-        options: {
-            backgroundColor: 'red',
-        },
-    },
-    line: {
-        type: 'line',
-        options: {
-            backgroundColor: 'blue',
-            elements: {
-                line: {
-                    borderColor: 'red',
-                },
-            },
-        },
-    },
-    stock: {
-        type: 'line',
-        options: {
-            locale: 'en-US',
-            responsive: true,
-            animation: {
-                duration: 0,
-            },
-            layout: {
-                padding: {
-                    left: 0,
-                    right: 10,
-                    top: 30,
-                    bottom: 0,
-                },
-            },
-            backgroundColor: 'rgba(235, 235, 235, 0.5)',
-            scales: {
-                x: {
-                    type: 'time',
-                    time: {
-                        unit: 'day',
-                        displayFormats: {
-                            hour: 'HH:mm',
-                            day: 'MMM d',
-                        },
-                    },
-                    grid: {
-                        lineWidth: 0,
-                    },
-                    ticks: {
-                        maxRotation: 0,
-                        source: 'data',
-                        autoSkipPadding: 40,
-                        font: {
-                            size: 12,
-                        },
-                    },
-                    adapters: {
-                        date: {
-                            locale: {
-                                code: 'en-US',
-                                formatLong: {},
-                                localize: {},
-                                match: {},
-                                options: {
-                                    weekStartsOn: 0,
-                                    firstWeekContainsDate: 1,
-                                },
-                            },
-                        },
-                    },
-                },
-                y: {
-                    position: 'right',
-                    display: true,
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        display: true,
-                        font: {
-                            size: 12,
-                        },
-                    },
-                },
-            },
-            elements: {
-                line: {
-                    tension: 0,
-                    borderWidth: 2,
-                },
-                point: {
-                    hitRadius: 20,
-                    radius: 0,
-                    hoverRadius: 0,
-                    hoverBorderWidth: 0,
-                },
-            },
-            normalized: true,
-            plugins: {
-                tooltip: {
-                    mode: 'index',
-                    intersect: false,
-                    caretSize: 1,
-                    caretPadding: 12,
-                    displayColors: true,
-                    backgroundColor: '#ebebeb',
-                    padding: 8,
-                    titleColor: 'black',
-                    bodyColor: 'black',
-                    titleFont: {
-                        weight: 'normal',
-                        size: 12,
-                    },
-                    bodyFont: {
-                        size: 16,
-                        weight: 'bold',
-                    },
-                    callbacks: {},
-                },
-                // marker: {
-                //   line: {
-                //     color: 'red',
-                //   },
-                // },
-                datalabels: {
-                    color: '#ffffff',
-                    borderRadius: 3,
-                    font: {
-                        lineHeight: 1,
-                        size: 12,
-                    },
-                    padding: {
-                        top: 6,
-                        left: 5,
-                        right: 5,
-                        bottom: 5,
-                    },
-                    offset: 5,
-                },
-            },
-        },
-    },
+	bar: {
+		type: "bar",
+		options: {
+			indexAxis: "y",
+			elements: { line: { borderColor: "blue" } }
+		}
+	},
+	column: {
+		type: "bar",
+		options: { backgroundColor: "red" }
+	},
+	line: {
+		type: "line",
+		options: {
+			backgroundColor: "blue",
+			elements: { line: { borderColor: "red" } }
+		}
+	},
+	stock: {
+		type: "line",
+		options: {
+			locale: "en-US",
+			responsive: true,
+			animation: { duration: 0 },
+			layout: { padding: {
+				left: 0,
+				right: 10,
+				top: 30,
+				bottom: 0
+			} },
+			backgroundColor: "rgba(235, 235, 235, 0.5)",
+			scales: {
+				x: {
+					type: "time",
+					time: {
+						unit: "day",
+						displayFormats: {
+							hour: "HH:mm",
+							day: "MMM d"
+						}
+					},
+					grid: { lineWidth: 0 },
+					ticks: {
+						maxRotation: 0,
+						source: "data",
+						autoSkipPadding: 40,
+						font: { size: 12 }
+					},
+					adapters: { date: { locale: {
+						code: "en-US",
+						formatLong: {},
+						localize: {},
+						match: {},
+						options: {
+							weekStartsOn: 0,
+							firstWeekContainsDate: 1
+						}
+					} } }
+				},
+				y: {
+					position: "right",
+					display: true,
+					grid: { drawBorder: false },
+					ticks: {
+						display: true,
+						font: { size: 12 }
+					}
+				}
+			},
+			elements: {
+				line: {
+					tension: 0,
+					borderWidth: 2
+				},
+				point: {
+					hitRadius: 20,
+					radius: 0,
+					hoverRadius: 0,
+					hoverBorderWidth: 0
+				}
+			},
+			normalized: true,
+			plugins: {
+				tooltip: {
+					mode: "index",
+					intersect: false,
+					caretSize: 1,
+					caretPadding: 12,
+					displayColors: true,
+					backgroundColor: "#ebebeb",
+					padding: 8,
+					titleColor: "black",
+					bodyColor: "black",
+					titleFont: {
+						weight: "normal",
+						size: 12
+					},
+					bodyFont: {
+						size: 16,
+						weight: "bold"
+					},
+					callbacks: {}
+				},
+				datalabels: {
+					color: "#ffffff",
+					borderRadius: 3,
+					font: {
+						lineHeight: 1,
+						size: 12
+					},
+					padding: {
+						top: 6,
+						left: 5,
+						right: 5,
+						bottom: 5
+					},
+					offset: 5
+				}
+			}
+		}
+	}
 };
 const TEST_CHART_ANNOTATIONS_CONFIG = {
-    line: {
-        borderDash: [6, 3],
-    },
-    ellipse: {
-        borderDash: [3, 6],
-    },
-    box: {},
-    point: {
-        backgroundColor: 'initial',
-    },
+	line: { borderDash: [6, 3] },
+	ellipse: { borderDash: [3, 6] },
+	box: {},
+	point: { backgroundColor: "initial" }
+};
+var BaseChartComponent = class BaseChartComponent {
+	set height(value) {
+		this._height = typeof value === "number" ? `${value}px` : value;
+	}
+	constructor(chartJSService) {
+		this.chartJSService = chartJSService;
+		this.chartHasBeenRendered = false;
+	}
+	ngAfterViewInit() {
+		const canvasElement = this.canvasElement.nativeElement;
+		this.whenElementHasHeightAndWidth(canvasElement).then(() => this.renderChart());
+	}
+	whenElementHasHeightAndWidth(element) {
+		const rectIs2D = ({ width, height }) => height > 0 && width > 0;
+		return new Promise((resolve) => {
+			const initialClientRect = element.getBoundingClientRect();
+			if (rectIs2D(initialClientRect)) resolve();
+			const resizeObserver = new ResizeObserverFactory().create(([resizeObserverEntry]) => {
+				if (rectIs2D(resizeObserverEntry.contentRect)) {
+					resizeObserver.unobserve(element);
+					resolve();
+				}
+			});
+			resizeObserver.observe(element);
+		});
+	}
+	ngOnChanges(simpleChanges) {
+		if (this.chartHasBeenRendered) {
+			let shouldRedrawChart = false;
+			const keyUpdateFnPairs = {
+				data: () => this.updateData(),
+				labels: () => this.updateLabels(),
+				type: () => this.updateType(),
+				customOptions: () => this.updateCustomOptions(),
+				annotations: () => this.updateAnnotations(),
+				highlightedElements: () => this.updateHighlightedElements()
+			};
+			Object.entries(simpleChanges).forEach(([key]) => {
+				if (simpleChanges[key].firstChange || !keyUpdateFnPairs[key]) return;
+				shouldRedrawChart = true;
+				keyUpdateFnPairs[key]();
+			});
+			if (shouldRedrawChart) this.redrawChart();
+		}
+	}
+	renderChart(additionalArgs) {
+		this.chartHasBeenRendered = true;
+		this.chartJSService.renderChart({
+			targetElement: this.canvasElement,
+			type: this.type,
+			data: this.data,
+			labels: this.labels,
+			customOptions: this.customOptions,
+			annotations: this.annotations,
+			highlightedElements: this.highlightedElements,
+			...additionalArgs
+		});
+	}
+	updateData() {
+		this.chartJSService.updateData(this.data);
+	}
+	updateLabels() {
+		this.chartJSService.updateLabels(this.labels);
+	}
+	updateType() {
+		this.chartJSService.updateType(this.type, this.customOptions);
+	}
+	updateCustomOptions() {
+		this.chartJSService.updateOptions(this.customOptions, this.type);
+	}
+	updateAnnotations() {
+		this.chartJSService.updateAnnotations(this.annotations);
+	}
+	updateHighlightedElements() {
+		this.chartJSService.updateHighlightedElements(this.highlightedElements);
+	}
+	redrawChart() {
+		this.chartJSService.redrawChart();
+	}
+	ngOnDestroy() {
+		this.chartJSService.destroyChart();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BaseChartComponent,
+			deps: [{ token: ChartJSService }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: BaseChartComponent,
+			isStandalone: true,
+			selector: "kirby-base-chart",
+			inputs: {
+				type: "type",
+				data: "data",
+				labels: "labels",
+				customOptions: "customOptions",
+				annotations: "annotations",
+				highlightedElements: "highlightedElements",
+				height: "height"
+			},
+			host: { properties: { "style.--kirby-chart-height": "this._height" } },
+			viewQueries: [{
+				propertyName: "canvasElement",
+				first: true,
+				predicate: ["chartCanvas"],
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BaseChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-base-chart",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: ChartJSService }],
+	propDecorators: {
+		type: [{ type: Input }],
+		data: [{ type: Input }],
+		labels: [{ type: Input }],
+		customOptions: [{ type: Input }],
+		annotations: [{ type: Input }],
+		highlightedElements: [{ type: Input }],
+		_height: [{
+			type: HostBinding,
+			args: ["style.--kirby-chart-height"]
+		}],
+		height: [{ type: Input }],
+		canvasElement: [{
+			type: ViewChild,
+			args: ["chartCanvas"]
+		}]
+	}
+});
+var ChartComponent = class ChartComponent extends BaseChartComponent {
+	constructor() {
+		super(...arguments);
+		this.type = "column";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ChartComponent,
+			isStandalone: true,
+			selector: "kirby-chart",
+			inputs: { type: "type" },
+			providers: [ChartJSService],
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-chart",
+			providers: [ChartJSService],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"]
+		}]
+	}],
+	propDecorators: { type: [{ type: Input }] }
+});
+var StockChartJSService = class StockChartJSService extends ChartJSService {
+	constructor() {
+		super(...arguments);
+		this.chartType = "stock";
+	}
+	static {
+		this.STOCK_CHART_LOCALE_DEFAULT = "en-US";
+	}
+	renderChart(args) {
+		const { dataLabelOptions, ...superArgs } = args;
+		this.dataLabelOptions = dataLabelOptions || null;
+		super.renderChart(superArgs);
+	}
+	get locale() {
+		return this.dataLabelOptions?.locale || StockChartJSService.STOCK_CHART_LOCALE_DEFAULT;
+	}
+	getDefaultLabels(datasets) {
+		return datasets.reduce((previousDataset, currentDataset) => previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset).data.map((point) => toDate(point.x).toLocaleDateString(this.locale, {
+			month: "short",
+			day: "numeric"
+		}));
+	}
+	createOptionsObject(args) {
+		const superOptions = super.createOptionsObject(args);
+		const stockOptions = this.chartConfigService.getStockChartOptions(this.dataLabelOptions, this.locale);
+		return mergeDeepAll(stockOptions, superOptions);
+	}
+	createDatasets(data) {
+		let datasets = super.createDatasets(data);
+		if (this.dataLabelOptions?.showCurrent || this.dataLabelOptions?.showMax || this.dataLabelOptions?.showMin) datasets = this.addDataLabelsData(datasets);
+		return datasets.map((dataset) => ({
+			...dataset,
+			kirbyOptions: {
+				...dataset.kirbyOptions,
+				isStockChart: true
+			}
+		}));
+	}
+	addDataLabelsData(data) {
+		const decorateDataPoint = (set, axis, direction, position) => {
+			const { value, pointer } = this.locateValueIndexInDataset(set, axis, direction);
+			set.data[pointer] = {
+				...set.data[pointer],
+				datalabel: {
+					value: value + (this.dataLabelOptions.valueSuffix || ""),
+					position
+				}
+			};
+		};
+		data.map((set) => {
+			if (this.dataLabelOptions.showMin) decorateDataPoint(set, "y", "low", "bottom");
+			if (this.dataLabelOptions.showMax) decorateDataPoint(set, "y", "high", "top");
+			if (this.dataLabelOptions.showCurrent) decorateDataPoint(set, "x", "high", "right");
+		});
+		return data;
+	}
+	locateValueIndexInDataset(dataset, axis, direction) {
+		let pointer;
+		let value;
+		dataset.data.forEach((datapoint, index) => {
+			if (direction == "low" && (!value || datapoint[axis] < value)) {
+				value = datapoint["y"];
+				pointer = index;
+			}
+			if (direction == "high" && (!value || datapoint[axis] > value)) {
+				value = datapoint["y"];
+				pointer = index;
+			}
+		});
+		return {
+			value,
+			pointer
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: StockChartJSService,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: StockChartJSService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StockChartJSService,
+	decorators: [{ type: Injectable }]
+});
+var StockChartComponent = class StockChartComponent extends BaseChartComponent {
+	constructor() {
+		super(...arguments);
+		this.type = "stock";
+	}
+	renderChart() {
+		super.renderChart({ dataLabelOptions: this.dataLabelOptions });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: StockChartComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: StockChartComponent,
+			isStandalone: true,
+			selector: "kirby-stock-chart",
+			inputs: { dataLabelOptions: "dataLabelOptions" },
+			providers: [{
+				provide: ChartJSService,
+				useClass: StockChartJSService
+			}, ChartConfigService],
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StockChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-stock-chart",
+			providers: [{
+				provide: ChartJSService,
+				useClass: StockChartJSService
+			}, ChartConfigService],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n",
+			styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"]
+		}]
+	}],
+	propDecorators: { dataLabelOptions: [{ type: Input }] }
+});
+var ChartsModule = class ChartsModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartsModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartsModule,
+			imports: [ChartComponent, StockChartComponent],
+			exports: [ChartComponent, StockChartComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ChartsModule,
+			providers: [ChartConfigService]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartsModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [ChartComponent, StockChartComponent],
+			exports: [ChartComponent, StockChartComponent],
+			providers: [ChartConfigService]
+		}]
+	}]
+});
+var ChartBaseConfig = class {
+	static {
+		this.registerPlugins = () => {};
+	}
 };
-
-class BaseChartComponent {
-    set height(value) {
-        this._height = typeof value === 'number' ? `${value}px` : value;
-    }
-    constructor(chartJSService) {
-        this.chartJSService = chartJSService;
-        this.chartHasBeenRendered = false;
-    }
-    ngAfterViewInit() {
-        /*
-           A chart is not rendered until it has both a height and a width.
-           If ChartComponent is slotted in an ionic component it will
-           not have any height or width on afterViewInit. This will cause
-           the animation to not be played on first draw.
-        */
-        const canvasElement = this.canvasElement.nativeElement;
-        this.whenElementHasHeightAndWidth(canvasElement).then(() => this.renderChart());
-    }
-    whenElementHasHeightAndWidth(element) {
-        const rectIs2D = ({ width, height }) => height > 0 && width > 0;
-        return new Promise((resolve) => {
-            const initialClientRect = element.getBoundingClientRect();
-            if (rectIs2D(initialClientRect))
-                resolve();
-            const resizeObserver = new ResizeObserverFactory().create(([resizeObserverEntry]) => {
-                if (rectIs2D(resizeObserverEntry.contentRect)) {
-                    resizeObserver.unobserve(element);
-                    resolve();
-                }
-            });
-            resizeObserver.observe(element);
-        });
-    }
-    ngOnChanges(simpleChanges) {
-        if (this.chartHasBeenRendered) {
-            let shouldRedrawChart = false;
-            const keyUpdateFnPairs = {
-                data: () => this.updateData(),
-                labels: () => this.updateLabels(),
-                type: () => this.updateType(),
-                customOptions: () => this.updateCustomOptions(),
-                annotations: () => this.updateAnnotations(),
-                highlightedElements: () => this.updateHighlightedElements(),
-            };
-            Object.entries(simpleChanges).forEach(([key]) => {
-                if (simpleChanges[key].firstChange || !keyUpdateFnPairs[key])
-                    return;
-                shouldRedrawChart = true;
-                keyUpdateFnPairs[key]();
-            });
-            if (shouldRedrawChart)
-                this.redrawChart();
-        }
-    }
-    renderChart(additionalArgs) {
-        this.chartHasBeenRendered = true;
-        this.chartJSService.renderChart({
-            targetElement: this.canvasElement,
-            type: this.type,
-            data: this.data,
-            labels: this.labels,
-            customOptions: this.customOptions,
-            annotations: this.annotations,
-            highlightedElements: this.highlightedElements,
-            ...additionalArgs,
-        });
-    }
-    updateData() {
-        this.chartJSService.updateData(this.data);
-    }
-    updateLabels() {
-        this.chartJSService.updateLabels(this.labels);
-    }
-    updateType() {
-        this.chartJSService.updateType(this.type, this.customOptions);
-    }
-    updateCustomOptions() {
-        this.chartJSService.updateOptions(this.customOptions, this.type);
-    }
-    updateAnnotations() {
-        this.chartJSService.updateAnnotations(this.annotations);
-    }
-    updateHighlightedElements() {
-        this.chartJSService.updateHighlightedElements(this.highlightedElements);
-    }
-    redrawChart() {
-        this.chartJSService.redrawChart();
-    }
-    ngOnDestroy() {
-        this.chartJSService.destroyChart();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: BaseChartComponent, isStandalone: true, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BaseChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-base-chart', template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: ChartJSService }], propDecorators: { type: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], customOptions: [{
-                type: Input
-            }], annotations: [{
-                type: Input
-            }], highlightedElements: [{
-                type: Input
-            }], _height: [{
-                type: HostBinding,
-                args: ['style.--kirby-chart-height']
-            }], height: [{
-                type: Input
-            }], canvasElement: [{
-                type: ViewChild,
-                args: ['chartCanvas']
-            }] } });
-
-class ChartComponent extends BaseChartComponent {
-    constructor() {
-        super(...arguments);
-        this.type = 'column';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ChartComponent, isStandalone: true, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-chart', providers: [ChartJSService], template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }] } });
-
-class StockChartJSService extends ChartJSService {
-    constructor() {
-        super(...arguments);
-        this.chartType = 'stock';
-    }
-    static { this.STOCK_CHART_LOCALE_DEFAULT = 'en-US'; }
-    renderChart(args) {
-        const { dataLabelOptions, ...superArgs } = args;
-        this.dataLabelOptions = dataLabelOptions || null;
-        super.renderChart(superArgs);
-    }
-    get locale() {
-        return this.dataLabelOptions?.locale || StockChartJSService.STOCK_CHART_LOCALE_DEFAULT;
-    }
-    getDefaultLabels(datasets) {
-        const largestDataset = datasets.reduce((previousDataset, currentDataset) => previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset);
-        return largestDataset.data.map((point) => toDate(point.x).toLocaleDateString(this.locale, {
-            month: 'short',
-            day: 'numeric',
-        }));
-    }
-    createOptionsObject(args) {
-        const superOptions = super.createOptionsObject(args);
-        const stockOptions = this.chartConfigService.getStockChartOptions(this.dataLabelOptions, this.locale);
-        return mergeDeepAll(stockOptions, superOptions);
-    }
-    createDatasets(data) {
-        let datasets = super.createDatasets(data);
-        /*
-           Hacky solution. Should be fixed in this issue:
-          https://github.com/kirbydesign/designsystem/issues/1967
-        */
-        // We need to modify the datasets in order to add datalabels.
-        if (this.dataLabelOptions?.showCurrent ||
-            this.dataLabelOptions?.showMax ||
-            this.dataLabelOptions?.showMin) {
-            datasets = this.addDataLabelsData(datasets);
-        }
-        return datasets.map((dataset) => ({
-            ...dataset,
-            kirbyOptions: { ...dataset.kirbyOptions, isStockChart: true },
-        }));
-    }
-    /**
-     * Decorate ChartDataset with properties to allow for datalabels.
-     *
-     * @param data
-     * @returns ChartDataset[]
-     */
-    addDataLabelsData(data) {
-        const decorateDataPoint = (set, axis, direction, position) => {
-            const { value, pointer } = this.locateValueIndexInDataset(set, axis, direction);
-            set.data[pointer] = {
-                ...set.data[pointer],
-                datalabel: {
-                    value: value + (this.dataLabelOptions.valueSuffix || ''),
-                    position,
-                },
-            };
-        };
-        data.map((set) => {
-            if (this.dataLabelOptions.showMin) {
-                decorateDataPoint(set, 'y', 'low', 'bottom');
-            }
-            if (this.dataLabelOptions.showMax) {
-                decorateDataPoint(set, 'y', 'high', 'top');
-            }
-            if (this.dataLabelOptions.showCurrent) {
-                decorateDataPoint(set, 'x', 'high', 'right');
-            }
-        });
-        return data;
-    }
-    locateValueIndexInDataset(dataset, axis, direction) {
-        let pointer;
-        let value;
-        dataset.data.forEach((datapoint, index) => {
-            if (direction == 'low' && (!value || datapoint[axis] < value)) {
-                value = datapoint['y'];
-                pointer = index;
-            }
-            if (direction == 'high' && (!value || datapoint[axis] > value)) {
-                value = datapoint['y'];
-                pointer = index;
-            }
-        });
-        return { value, pointer };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartJSService, decorators: [{
-            type: Injectable
-        }] });
-
-class StockChartComponent extends BaseChartComponent {
-    constructor() {
-        super(...arguments);
-        this.type = 'stock';
-    }
-    renderChart() {
-        super.renderChart({ dataLabelOptions: this.dataLabelOptions });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: StockChartComponent, isStandalone: true, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }, ChartConfigService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: StockChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-stock-chart', providers: [{ provide: ChartJSService, useClass: StockChartJSService }, ChartConfigService], template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
-        }], propDecorators: { dataLabelOptions: [{
-                type: Input
-            }] } });
-
-class ChartsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, imports: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ChartsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ChartComponent, StockChartComponent],
-                    exports: [ChartComponent, StockChartComponent],
-                    providers: [ChartConfigService],
-                }]
-        }] });
-
-class ChartBaseConfig {
-    static { this.registerPlugins = () => { }; }
-}
-
 const { getThemeColorHexString: getThemeColorHexString$2 } = ColorHelper;
-/**
- * This class is still experimental. Feel free to use it, but please note that it is still subject to breaking changes.
- */
-class BarChartConfig extends ChartBaseConfig {
-    static { this.BAR_CHART_LOCALE_DEFAULT = 'en-US'; }
-    static { this.baseConfig = {
-        type: 'bar',
-        data: {
-            datasets: [],
-        },
-        options: {
-            datasets: {
-                bar: {
-                    barPercentage: 0.6,
-                },
-                line: {
-                    spanGaps: true,
-                },
-            },
-            indexAxis: 'x',
-            scales: {
-                y: {
-                    grid: {
-                        drawBorder: false,
-                    },
-                },
-                x: {},
-            },
-            elements: {
-                point: {
-                    radius: 0,
-                },
-                line: {
-                    borderColor: getThemeColorHexString$2('medium'),
-                },
-            },
-        },
-    }; }
-}
-
+var BarChartConfig = class extends ChartBaseConfig {
+	static {
+		this.BAR_CHART_LOCALE_DEFAULT = "en-US";
+	}
+	static {
+		this.baseConfig = {
+			type: "bar",
+			data: { datasets: [] },
+			options: {
+				datasets: {
+					bar: { barPercentage: .6 },
+					line: { spanGaps: true }
+				},
+				indexAxis: "x",
+				scales: {
+					y: { grid: { drawBorder: false } },
+					x: {}
+				},
+				elements: {
+					point: { radius: 0 },
+					line: { borderColor: getThemeColorHexString$2("medium") }
+				}
+			}
+		};
+	}
+};
 const { getThemeColorHexString: getThemeColorHexString$1 } = ColorHelper;
 const { fontSize: fontSize$1 } = DesignTokenHelper;
 const getDataLabelPosition = (data, dataIndex) => {
-    const scatterPointDataYvalues = data.map((scatterDatapoint) => scatterDatapoint.y);
-    const minValue = Math.min(...scatterPointDataYvalues);
-    const minValueIndex = scatterPointDataYvalues.indexOf(minValue);
-    if (dataIndex === minValueIndex) {
-        return 'bottom';
-    }
-    const maxValue = Math.max(...scatterPointDataYvalues);
-    const maxValueIndex = scatterPointDataYvalues.indexOf(maxValue);
-    if (dataIndex === maxValueIndex) {
-        return 'top';
-    }
-    return null;
+	const scatterPointDataYvalues = data.map((scatterDatapoint) => scatterDatapoint.y);
+	const minValue = Math.min(...scatterPointDataYvalues);
+	if (dataIndex === scatterPointDataYvalues.indexOf(minValue)) return "bottom";
+	const maxValue = Math.max(...scatterPointDataYvalues);
+	if (dataIndex === scatterPointDataYvalues.indexOf(maxValue)) return "top";
+	return null;
 };
 const dataLabelsPluginConfig = {
-    backgroundColor: '#005c3c',
-    color: getThemeColorHexString$1('white'),
-    borderRadius: 3,
-    font: {
-        lineHeight: 1,
-        size: parseInt(fontSize$1('xs')),
-    },
-    padding: {
-        top: 6,
-        left: 5,
-        right: 5,
-        bottom: 5,
-    },
-    offset: 5,
-    align: (context) => getDataLabelPosition(context.dataset.data, context.dataIndex),
-    display: (context) => {
-        return showDataLabel(context);
-    },
-    formatter: (dataPoint) => dataPoint.y.toString(),
+	backgroundColor: "#005c3c",
+	color: getThemeColorHexString$1("white"),
+	borderRadius: 3,
+	font: {
+		lineHeight: 1,
+		size: parseInt(fontSize$1("xs"))
+	},
+	padding: {
+		top: 6,
+		left: 5,
+		right: 5,
+		bottom: 5
+	},
+	offset: 5,
+	align: (context) => getDataLabelPosition(context.dataset.data, context.dataIndex),
+	display: (context) => {
+		return showDataLabel(context);
+	},
+	formatter: (dataPoint) => dataPoint.y.toString()
 };
 function showDataLabel(context) {
-    const data = [...context.dataset.data];
-    const yValues = data.map((dataPoints) => dataPoints.y);
-    const minValue = Math.min(...yValues);
-    const minValueIndex = yValues.indexOf(minValue);
-    const maxValue = Math.max(...yValues);
-    const maxValueIndex = yValues.indexOf(maxValue);
-    return context.dataIndex === maxValueIndex || context.dataIndex === minValueIndex;
+	const yValues = [...context.dataset.data].map((dataPoints) => dataPoints.y);
+	const minValue = Math.min(...yValues);
+	const minValueIndex = yValues.indexOf(minValue);
+	const maxValue = Math.max(...yValues);
+	const maxValueIndex = yValues.indexOf(maxValue);
+	return context.dataIndex === maxValueIndex || context.dataIndex === minValueIndex;
 }
-
-const verticalLineId = 'verticalLine';
+const verticalLineId = "verticalLine";
 const getVerticalLinePluginConfig = {
-    id: verticalLineId,
-    drawTime: 'beforeDraw',
-    defaults: {
-        width: 1,
-        color: 'black',
-    },
-    afterInit: (chart) => {
-        chart[verticalLineId] = {
-            x: 0,
-            y: 0,
-        };
-    },
-    afterEvent: (chart, args) => {
-        const { inChartArea } = args;
-        const { x, y } = args.event;
-        chart[verticalLineId] = { x, y, draw: inChartArea };
-        chart.draw();
-    },
-    beforeDraw: (chart, _, options) => {
-        const { ctx } = chart;
-        const { top, bottom } = chart.chartArea;
-        const { x, draw } = chart[verticalLineId];
-        if (!draw)
-            return;
-        ctx.save();
-        ctx.beginPath();
-        ctx.lineWidth = options.width;
-        ctx.strokeStyle = options.color;
-        ctx.moveTo(x, bottom);
-        ctx.lineTo(x, top);
-        ctx.stroke();
-        ctx.restore();
-    },
+	id: verticalLineId,
+	drawTime: "beforeDraw",
+	defaults: {
+		width: 1,
+		color: "black"
+	},
+	afterInit: (chart) => {
+		chart[verticalLineId] = {
+			x: 0,
+			y: 0
+		};
+	},
+	afterEvent: (chart, args) => {
+		const { inChartArea } = args;
+		const { x, y } = args.event;
+		chart[verticalLineId] = {
+			x,
+			y,
+			draw: inChartArea
+		};
+		chart.draw();
+	},
+	beforeDraw: (chart, _, options) => {
+		const { ctx } = chart;
+		const { top, bottom } = chart.chartArea;
+		const { x, draw } = chart[verticalLineId];
+		if (!draw) return;
+		ctx.save();
+		ctx.beginPath();
+		ctx.lineWidth = options.width;
+		ctx.strokeStyle = options.color;
+		ctx.moveTo(x, bottom);
+		ctx.lineTo(x, top);
+		ctx.stroke();
+		ctx.restore();
+	}
 };
-
 const { getThemeColorHexString, getThemeColorRgbString } = ColorHelper;
 const { fontSize } = DesignTokenHelper;
-/**
- * This class is still experimental. Feel free to use it, but please note that it is still subject to breaking changes.
- */
-class StockChartConfig extends ChartBaseConfig {
-    static { this.STOCK_CHART_LOCALE_DEFAULT = 'en-US'; }
-    static { this.scales = [CategoryScale, LinearScale, TimeScale]; }
-    static { this.elements = [BarElement, LineElement, PointElement]; }
-    static { this.controllers = [BarController, LineController]; }
-    static { this.plugins = [annotationPlugin, Filler, Tooltip]; }
-    static { this.registeredElements = [
-        ...this.scales,
-        ...this.controllers,
-        ...this.elements,
-        ...this.plugins,
-    ]; }
-    static { this.pluginsRegistered = false; }
-    static registerPlugins() {
-        if (StockChartConfig.pluginsRegistered) {
-            return;
-        }
-        this.registeredElements.forEach((scale) => {
-            Chart.register(scale);
-        });
-        StockChartConfig.pluginsRegistered = true;
-    }
-    static { this.baseConfig = {
-        type: 'line',
-        data: {
-            datasets: [],
-        },
-        options: {
-            responsive: true,
-            animation: {
-                duration: 0,
-            },
-            layout: {
-                padding: {
-                    left: 20,
-                    right: 20,
-                    top: 30,
-                    bottom: 0,
-                },
-            },
-            backgroundColor: getThemeColorRgbString('semi-light', 0.5),
-            scales: {
-                x: {
-                    adapters: {
-                        date: {
-                            locale: StockChartConfig.STOCK_CHART_LOCALE_DEFAULT,
-                        },
-                    },
-                    grid: {
-                        lineWidth: 0,
-                    },
-                    ticks: {
-                        maxRotation: 0,
-                        autoSkipPadding: 120,
-                        font: {
-                            size: parseInt(fontSize('xs')),
-                        },
-                        callback(tickValue) {
-                            const dateInMiliseconds = parseInt(this.getLabelForValue(parseInt(tickValue + '')));
-                            return getChartStockShortDate(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
-                        },
-                    },
-                },
-                y: {
-                    position: 'right',
-                    display: true,
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        display: true,
-                        font: {
-                            size: parseInt(fontSize('xs')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                line: {
-                    tension: 0, // Smooth curve (0 = no smoothing)
-                    borderWidth: 2,
-                },
-                point: {
-                    hitRadius: 20,
-                    radius: 0,
-                    hoverRadius: 0,
-                    hoverBorderWidth: 0,
-                },
-            },
-            normalized: true,
-            plugins: {},
-        },
-    }; }
-    static { this.tooltipPlugin = {
-        padding: 10,
-        enabled: true,
-        mode: 'index',
-        intersect: false,
-        backgroundColor: getThemeColorHexString('semi-light'),
-        titleColor: getThemeColorHexString('semi-light-contrast'),
-        bodyColor: getThemeColorHexString('semi-light-contrast'),
-        caretSize: 0,
-        bodySpacing: 5,
-        titleSpacing: 5,
-        borderColor: 'transparent',
-        callbacks: {
-            title: (toolTipItem) => {
-                const dateInMiliseconds = parseInt(toolTipItem[0].label); // TODO: Right now we use index === 0. I expect multiple datasets will change this
-                return getChartStockShortDateTime(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
-            },
-            label: (context) => context.parsed.y.toString(),
-            labelColor: (tooltipItem) => {
-                return {
-                    backgroundColor: tooltipItem.dataset.borderColor,
-                    borderColor: getThemeColorHexString('semi-light'),
-                    borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
-                    // An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
-                };
-            },
-        },
-    }; }
-    static { this.dataLabelsPluginConfig = dataLabelsPluginConfig; }
-    static { this.verticalLinePluginConfig = getVerticalLinePluginConfig; }
-    static { this.getDataLabelPosition = getDataLabelPosition; }
-}
+var StockChartConfig = class StockChartConfig extends ChartBaseConfig {
+	static {
+		this.STOCK_CHART_LOCALE_DEFAULT = "en-US";
+	}
+	static {
+		this.scales = [
+			CategoryScale,
+			LinearScale,
+			TimeScale
+		];
+	}
+	static {
+		this.elements = [
+			BarElement,
+			LineElement,
+			PointElement
+		];
+	}
+	static {
+		this.controllers = [BarController, LineController];
+	}
+	static {
+		this.plugins = [
+			annotationPlugin,
+			Filler,
+			Tooltip
+		];
+	}
+	static {
+		this.registeredElements = [
+			...this.scales,
+			...this.controllers,
+			...this.elements,
+			...this.plugins
+		];
+	}
+	static {
+		this.pluginsRegistered = false;
+	}
+	static registerPlugins() {
+		if (StockChartConfig.pluginsRegistered) return;
+		this.registeredElements.forEach((scale) => {
+			Chart.register(scale);
+		});
+		StockChartConfig.pluginsRegistered = true;
+	}
+	static {
+		this.baseConfig = {
+			type: "line",
+			data: { datasets: [] },
+			options: {
+				responsive: true,
+				animation: { duration: 0 },
+				layout: { padding: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 0
+				} },
+				backgroundColor: getThemeColorRgbString("semi-light", .5),
+				scales: {
+					x: {
+						adapters: { date: { locale: StockChartConfig.STOCK_CHART_LOCALE_DEFAULT } },
+						grid: { lineWidth: 0 },
+						ticks: {
+							maxRotation: 0,
+							autoSkipPadding: 120,
+							font: { size: parseInt(fontSize("xs")) },
+							callback(tickValue) {
+								const dateInMiliseconds = parseInt(this.getLabelForValue(parseInt(tickValue + "")));
+								return getChartStockShortDate(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
+							}
+						}
+					},
+					y: {
+						position: "right",
+						display: true,
+						grid: { drawBorder: false },
+						ticks: {
+							display: true,
+							font: { size: parseInt(fontSize("xs")) }
+						}
+					}
+				},
+				elements: {
+					line: {
+						tension: 0,
+						borderWidth: 2
+					},
+					point: {
+						hitRadius: 20,
+						radius: 0,
+						hoverRadius: 0,
+						hoverBorderWidth: 0
+					}
+				},
+				normalized: true,
+				plugins: {}
+			}
+		};
+	}
+	static {
+		this.tooltipPlugin = {
+			padding: 10,
+			enabled: true,
+			mode: "index",
+			intersect: false,
+			backgroundColor: getThemeColorHexString("semi-light"),
+			titleColor: getThemeColorHexString("semi-light-contrast"),
+			bodyColor: getThemeColorHexString("semi-light-contrast"),
+			caretSize: 0,
+			bodySpacing: 5,
+			titleSpacing: 5,
+			borderColor: "transparent",
+			callbacks: {
+				title: (toolTipItem) => {
+					const dateInMiliseconds = parseInt(toolTipItem[0].label);
+					return getChartStockShortDateTime(dateInMiliseconds, StockChartConfig.STOCK_CHART_LOCALE_DEFAULT);
+				},
+				label: (context) => context.parsed.y.toString(),
+				labelColor: (tooltipItem) => {
+					return {
+						backgroundColor: tooltipItem.dataset.borderColor,
+						borderColor: getThemeColorHexString("semi-light"),
+						borderWidth: 2
+					};
+				}
+			}
+		};
+	}
+	static {
+		this.dataLabelsPluginConfig = dataLabelsPluginConfig;
+	}
+	static {
+		this.verticalLinePluginConfig = getVerticalLinePluginConfig;
+	}
+	static {
+		this.getDataLabelPosition = getDataLabelPosition;
+	}
+};
 const getChartStockShortDate = (dateInMiliseconds, locale) => {
-    const newDate = new Date(dateInMiliseconds);
-    return newDate.toLocaleDateString(locale, {
-        day: 'numeric',
-        month: 'short',
-    });
+	return new Date(dateInMiliseconds).toLocaleDateString(locale, {
+		day: "numeric",
+		month: "short"
+	});
 };
 const getChartStockShortDateTime = (dateInMiliseconds, locale) => {
-    const newDate = new Date(dateInMiliseconds);
-    return newDate.toLocaleDateString(locale, {
-        day: 'numeric',
-        month: 'short',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
+	return new Date(dateInMiliseconds).toLocaleDateString(locale, {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
 };
-
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { BarChartConfig, BaseChartComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, StockChartComponent, StockChartConfig, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, isNumberArray };
-//# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map