@kirbydesign/designsystem 5.0.4 → 5.0.5

package/bundles/kirbydesign-designsystem.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kirbydesign/core'), require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('chart.js'), require('chartjs-plugin-annotation'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('@kirbydesign/core/loader')) :
-    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@kirbydesign/core', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'chart.js', 'chartjs-plugin-annotation', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', '@kirbydesign/core/loader'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.core, global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global.chart_js, global.annotationPlugin, global['highcharts/highstock'], global.highcharts, global['date-fns'], global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global.loader));
-}(this, (function (exports, core, i0, i1, i1$1, rxjs, operators, common, Highcharts, chart_js, annotationPlugin, Highcharts$1, AnnotationsModule, dateFns, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, loader) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kirbydesign/core'), require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('date-fns'), require('ts-deepcopy'), require('chart.js'), require('chartjs-plugin-annotation'), require('chartjs-plugin-datalabels'), require('chart.js/helpers'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('@kirbydesign/core/loader')) :
+    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@kirbydesign/core', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'date-fns', 'ts-deepcopy', 'chart.js', 'chartjs-plugin-annotation', 'chartjs-plugin-datalabels', 'chart.js/helpers', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', '@kirbydesign/core/loader'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.core, global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global['date-fns'], global._deepCopy, global.chart_js, global.annotationPlugin, global.ChartDataLabels, global.helpers, global['highcharts/highstock'], global.highcharts, global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global.loader));
+}(this, (function (exports, core, i0, i1, i1$1, rxjs, operators, common, Highcharts, dateFns, _deepCopy, chart_js, annotationPlugin, ChartDataLabels, helpers, Highcharts$1, AnnotationsModule, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, loader) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +27,9 @@
     }
 
     var Highcharts__namespace = /*#__PURE__*/_interopNamespace(Highcharts);
+    var _deepCopy__default = /*#__PURE__*/_interopDefaultLegacy(_deepCopy);
     var annotationPlugin__default = /*#__PURE__*/_interopDefaultLegacy(annotationPlugin);
+    var ChartDataLabels__default = /*#__PURE__*/_interopDefaultLegacy(ChartDataLabels);
     var Highcharts__namespace$1 = /*#__PURE__*/_interopNamespace(Highcharts$1);
     var AnnotationsModule__default = /*#__PURE__*/_interopDefaultLegacy(AnnotationsModule);
     var Inputmask__default = /*#__PURE__*/_interopDefaultLegacy(Inputmask);
@@ -3845,8 +3847,16 @@
         cssClass: [{ type: i0.Input }]
     };
 
+    /**
+     * Do a deep copy of object that supports the composite data type Function
+     *
+     * @see https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript#answer-122704
+     *
+     * @param obj
+     * @returns obj
+     */
     function deepCopy(obj) {
-        return JSON.parse(JSON.stringify(obj));
+        return _deepCopy__default['default'](obj);
     }
 
     /*
@@ -3922,6 +3932,13 @@
 
     var fontSize$2 = core.DesignTokenHelper.fontSize;
     var getThemeColorHexString$1 = core.ColorHelper.getThemeColorHexString, getThemeColorRgbString = core.ColorHelper.getThemeColorRgbString;
+    /**
+     * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
+     */
+    var getChartPointFromContext = function (context) {
+        return context.dataset.data[context.dataIndex];
+    };
+    var ɵ0$6 = getChartPointFromContext;
     var CHART_TYPES_CONFIG = {
         bar: {
             type: 'bar',
@@ -4016,6 +4033,115 @@
                 },
             },
         },
+        stock: {
+            type: 'line',
+            options: {
+                responsive: true,
+                animation: {
+                    duration: 0,
+                },
+                layout: {
+                    padding: {
+                        left: 20,
+                        right: 20,
+                        top: 30,
+                        bottom: 0,
+                    },
+                },
+                backgroundColor: getThemeColorRgbString('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,
+                        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$1('semi-light'),
+                        titleColor: getThemeColorHexString$1('semi-light-contrast'),
+                        bodyColor: getThemeColorHexString$1('semi-light-contrast'),
+                        caretSize: 0,
+                        bodySpacing: 5,
+                        titleSpacing: 5,
+                        borderColor: 'transparent',
+                        callbacks: {
+                            labelColor: function (tooltipItem) {
+                                return {
+                                    backgroundColor: tooltipItem.dataset.borderColor,
+                                };
+                            },
+                        },
+                    },
+                    // A failed attempt to get local typings working.
+                    // The chartjs-plugin-marker is rewritten to not
+                    // having to rely on own plugin settings, but using
+                    // x-axis type time instead.
+                    // @todo candidate for refactor once solved.
+                    // marker: {
+                    //   line: {
+                    //     color: getThemeColorHexString('black-base'),
+                    //   }
+                    // },
+                    datalabels: {
+                        backgroundColor: function (context) { return context.dataset.borderColor; },
+                        color: getThemeColorHexString$1('white'),
+                        borderRadius: 3,
+                        font: {
+                            lineHeight: 1,
+                            size: parseInt(fontSize$2('xs')),
+                        },
+                        padding: {
+                            top: 6,
+                            left: 5,
+                            right: 5,
+                            bottom: 5,
+                        },
+                        offset: 5,
+                        align: function (context) { var _a; return (_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel.position; },
+                        display: function (context) { var _a; return !!((_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel); },
+                        formatter: function (value) { return value.datalabel.value; },
+                    },
+                },
+            },
+        },
     };
 
     var ChartConfigService = /** @class */ (function () {
@@ -4044,6 +4170,205 @@
         { type: i0.Injectable }
     ];
 
+    // The marker pluin was heavily inspired by https://chartjs-plugin-crosshair.netlify.app
+    var defaultOptions = {
+        line: {
+            color: 'black',
+            width: 1,
+            dashPattern: [],
+        },
+        snap: {
+            enabled: false,
+        },
+    };
+    var hasMarkerConfiguration = function (chart) {
+        var _a, _b, _c;
+        // using another plugins options is not ideal, so the issue with marker plugin
+        // should be resolved. As of right now the only chart that uses
+        // tooltip is stock charts.
+        return chart.config.options.scales.x && ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.tooltip) === null || _c === void 0 ? void 0 : _c.enabled);
+        // @todo when resolving the typings issue with the markerplugin,
+        // this is a better conditional.
+        // return chart.config.options.scales.x && chart.config.options.plugins.marker
+    };
+    var ɵ0$7 = hasMarkerConfiguration;
+    var MarkerPlugin = {
+        id: 'marker',
+        afterInit: function (chart) {
+            if (!hasMarkerConfiguration(chart)) {
+                return;
+            }
+            var 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 helpers.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;
+            }
+            var e = event.event;
+            var xScaleType = chart.config.options.scales.x.type;
+            if (xScaleType !== 'linear' &&
+                xScaleType !== 'time' &&
+                xScaleType !== 'category' &&
+                xScaleType !== 'logarithmic') {
+                return;
+            }
+            var xScale = this.getXScale(chart);
+            if (!xScale) {
+                return;
+            }
+            if (chart.marker.ignoreNextEvents > 0) {
+                chart.marker.ignoreNextEvents -= 1;
+                return;
+            }
+            // fix for Safari
+            var buttons = e.native.buttons === undefined ? e.native.which : e.native.buttons;
+            if (e.native.type === 'mouseup') {
+                buttons = 0;
+            }
+            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;
+            }
+            var yScale = this.getYScale(chart);
+            var lineWidth = this.getOption(chart, 'line', 'width');
+            var color = this.getOption(chart, 'line', 'color');
+            var dashPattern = this.getOption(chart, 'line', 'dashPattern');
+            var snapEnabled = this.getOption(chart, 'snap', 'enabled');
+            var 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 (var chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+                var dataset = chart.data.datasets[chartIndex];
+                var meta = chart.getDatasetMeta(chartIndex);
+                var 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 (var chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+                var dataset = chart.data.datasets[chartIndex];
+                var meta = chart.getDatasetMeta(chartIndex);
+                var xScale = chart.scales[meta.xAxisID];
+                var xValue = xScale.getValueForPixel(chart.marker.x);
+                if (meta.hidden || !dataset.interpolate) {
+                    continue;
+                }
+                var data = dataset.data;
+                var index = data.findIndex(function (o) {
+                    return o.x >= xValue;
+                });
+                var prev = data[index - 1];
+                var next = data[index];
+                if (chart.data.datasets[chartIndex].steppedLine && prev) {
+                    dataset.interpolatedValue = prev.y;
+                }
+                else if (prev && next) {
+                    var slope = (next.y - prev.y) / (next.x - prev.x);
+                    dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
+                }
+                else {
+                    dataset.interpolatedValue = NaN;
+                }
+            }
+        },
+    };
+
     var getThemeColorHexString$2 = core.ColorHelper.getThemeColorHexString;
     var hoverBackgroundColor = getThemeColorHexString$2('primary');
     var backgroundColor = getThemeColorHexString$2('secondary');
@@ -4103,13 +4428,19 @@
             legend: {
                 display: false,
             },
+            datalabels: {
+                display: false,
+            },
+            tooltip: {
+                enabled: false,
+            },
         },
     };
 
     var CHART_SCALES = [chart_js.CategoryScale, chart_js.LinearScale];
     var CHART_ELEMENTS = [chart_js.BarElement, chart_js.LineElement, chart_js.PointElement];
     var CHART_CONTROLLERS = [chart_js.BarController, chart_js.LineController];
-    var CHART_PLUGINS = [annotationPlugin__default['default'], chart_js.Filler];
+    var CHART_PLUGINS = [annotationPlugin__default['default'], chart_js.Filler, ChartDataLabels__default['default'], chart_js.Tooltip, MarkerPlugin];
     /* Order matters; defaults must be merged after register as
        register modifies the Chart.defaults objects */
     chart_js.Chart.register.apply(chart_js.Chart, __spread([chart_js.Legend], CHART_SCALES, CHART_ELEMENTS, CHART_CONTROLLERS, CHART_PLUGINS));
@@ -4121,14 +4452,23 @@
         chart_js.Chart.defaults[key] = mergedDefaults[key];
     });
 
+    var CHART_LOCALE_DEFAULT = 'en-US';
     var ChartJSService = /** @class */ (function () {
         function ChartJSService(chartConfigService) {
             this.chartConfigService = chartConfigService;
         }
         ChartJSService.prototype.renderChart = function (args) {
-            var targetElement = args.targetElement, type = args.type, data = args.data, dataLabels = args.dataLabels, customOptions = args.customOptions, annotations = args.annotations, highlightedElements = args.highlightedElements;
-            var datasets = this.createDatasets(data, highlightedElements);
-            var options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            var targetElement = args.targetElement, type = args.type, data = args.data, dataLabels = args.dataLabels, customOptions = args.customOptions, annotations = args.annotations, dataLabelOptions = args.dataLabelOptions, highlightedElements = args.highlightedElements;
+            this.dataLabelOptions = dataLabelOptions || null;
+            this.highlightedElements = highlightedElements || null;
+            this.chartType = type;
+            this.locale = (dataLabelOptions === null || dataLabelOptions === void 0 ? void 0 : dataLabelOptions.locale) || CHART_LOCALE_DEFAULT;
+            var datasets = this.createDatasets(data);
+            var options = this.createOptionsObject({
+                customOptions: customOptions,
+                annotations: annotations,
+                dataLabelOptions: dataLabelOptions,
+            });
             var config = this.createConfigurationObject(type, datasets, options, dataLabels);
             this.initializeNewChart(targetElement.nativeElement, config);
         };
@@ -4152,15 +4492,20 @@
                 this.nonDestructivelyUpdateType(type, customOptions);
             }
         };
+        ChartJSService.prototype.setDataLabelOptions = function (dataLabelOptions) {
+            this.dataLabelOptions = dataLabelOptions;
+        };
         ChartJSService.prototype.updateOptions = function (customOptions, type) {
             var annotations = this.getExistingChartAnnotations();
-            this.chart.options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            this.chartType = type;
+            this.chart.options = this.createOptionsObject({ customOptions: customOptions, annotations: annotations });
         };
         ChartJSService.prototype.updateAnnotations = function (annotations) {
             var annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
             this.chart.options.plugins.annotation.annotations = annotationsWithDefaults;
         };
         ChartJSService.prototype.updateHighlightedElements = function (highlightedElements) {
+            this.highlightedElements = highlightedElements;
             var oldDatasets = this.chart.data.datasets;
             // Clear old datasets of highlighted elements
             oldDatasets.map(function (dataset) {
@@ -4169,7 +4514,7 @@
                     delete dataset.kirbyOptions.highlightedElements;
                 }
             });
-            this.chart.data.datasets = this.createDatasets(oldDatasets, highlightedElements);
+            this.chart.data.datasets = this.createDatasets(oldDatasets);
         };
         ChartJSService.prototype.getExistingChartAnnotations = function () {
             var _a, _b;
@@ -4188,7 +4533,8 @@
             var datasets = this.chart.data.datasets;
             var dataLabels = this.chart.data.labels;
             var annotations = this.getExistingChartAnnotations();
-            var options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            this.chartType = type;
+            var options = this.createOptionsObject({ customOptions: customOptions, annotations: annotations });
             var config = this.createConfigurationObject(type, datasets, options, dataLabels);
             var canvasElement = this.chart.canvas;
             this.chart.destroy();
@@ -4196,8 +4542,8 @@
         };
         ChartJSService.prototype.nonDestructivelyUpdateType = function (chartType, customOptions) {
             var annotations = this.getExistingChartAnnotations();
+            this.chartType = chartType;
             var options = this.createOptionsObject({
-                type: chartType,
                 customOptions: customOptions,
                 annotations: annotations,
             });
@@ -4230,8 +4576,8 @@
         };
         ChartJSService.prototype.applyInteractionFunctionsExtensions = function (options) {
             var interactionFunctionsExtensions = this.chartConfigService.getInteractionFunctionsExtensions();
-            Object.entries(interactionFunctionsExtensions).forEach(function (_c) {
-                var _d = __read(_c, 2), key = _d[0], _ = _d[1];
+            Object.entries(interactionFunctionsExtensions).forEach(function (_d) {
+                var _e = __read(_d, 2), key = _e[0], _ = _e[1];
                 var callback = options[key];
                 options[key] = function (e, a, c) {
                     interactionFunctionsExtensions[key](e, a, c, callback);
@@ -4239,21 +4585,74 @@
             });
             return options;
         };
+        ChartJSService.prototype.createStockOptionsObject = function (dataLabelOptions) {
+            var _this = this;
+            return {
+                locale: this.locale,
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            title: function (tooltipItems) {
+                                var _a, _b;
+                                var date = dateFns.toDate((_b = (_a = tooltipItems[0]) === null || _a === void 0 ? void 0 : _a.raw) === null || _b === void 0 ? void 0 : _b.x);
+                                if (date.valueOf()) {
+                                    return date.toLocaleTimeString(_this.locale, {
+                                        day: 'numeric',
+                                        month: 'short',
+                                        hour: '2-digit',
+                                        minute: '2-digit',
+                                    });
+                                }
+                            },
+                            label: function (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: function (value) {
+                                return value + (dataLabelOptions.valueSuffix || '');
+                            },
+                        },
+                    },
+                },
+            };
+        };
         ChartJSService.prototype.createOptionsObject = function (args) {
-            var type = args.type, customOptions = args.customOptions, annotations = args.annotations;
-            var typeConfig = this.chartConfigService.getTypeConfig(type);
+            var customOptions = args.customOptions, annotations = args.annotations, chartDataLabelOptions = args.dataLabelOptions;
+            var typeConfig = this.chartConfigService.getTypeConfig(this.chartType);
             var typeConfigOptions = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.options;
             var annotationPluginOptions = annotations
                 ? this.createAnnotationPluginOptionsObject(annotations)
                 : {};
-            var options = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
+            var stockOptions = this.chartType === 'stock' ? this.createStockOptionsObject(chartDataLabelOptions) : {};
+            var options = mergeDeepAll(stockOptions, typeConfigOptions, customOptions, annotationPluginOptions);
             return this.applyInteractionFunctionsExtensions(options);
         };
+        ChartJSService.prototype.getDefaultStockLabels = function (datasets, locale) {
+            var largestDataset = datasets.reduce(function (previousDataset, currentDataset) { return previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset; });
+            return largestDataset.data.map(function (point) { return dateFns.toDate(point.x).toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+            }); });
+        };
         ChartJSService.prototype.createConfigurationObject = function (type, datasets, options, dataLabels) {
-            /* chartJS requires labels; if none is provided create an empty string array
-            to make it optional for consumer */
-            var labels = !dataLabels ? this.createBlankLabels(datasets) : dataLabels;
             var typeConfig = this.chartConfigService.getTypeConfig(type);
+            // chartJS requires labels; if none is provided create an empty string array
+            // to make it optional for consumer.
+            // However the stock chart, should have autogenerated labels if no
+            // custom labels are supplied.
+            var isStockType = type === 'stock';
+            var labels = !dataLabels
+                ? isStockType
+                    ? this.getDefaultStockLabels(datasets, this.locale)
+                    : this.createBlankLabels(datasets)
+                : dataLabels;
             return mergeDeepAll(typeConfig, {
                 data: {
                     labels: labels,
@@ -4263,8 +4662,8 @@
             });
         };
         ChartJSService.prototype.addHighlightedElementsToDatasets = function (highlightedElements, datasets) {
-            highlightedElements.forEach(function (_c) {
-                var _d = __read(_c, 2), datasetIndex = _d[0], dataIndex = _d[1];
+            highlightedElements.forEach(function (_d) {
+                var _e = __read(_d, 2), datasetIndex = _e[0], dataIndex = _e[1];
                 var _a;
                 var dataset = datasets[datasetIndex];
                 if (!dataset)
@@ -4277,12 +4676,63 @@
                 }
             });
         };
-        ChartJSService.prototype.createDatasets = function (data, highlightedElements) {
+        ChartJSService.prototype.createDatasets = function (data) {
+            var _a, _b, _c;
+            // We need to modify the datasets in order to add datalabels.
+            if (((_a = this.dataLabelOptions) === null || _a === void 0 ? void 0 : _a.showCurrent) || ((_b = this.dataLabelOptions) === null || _b === void 0 ? void 0 : _b.showMax) || ((_c = this.dataLabelOptions) === null || _c === void 0 ? void 0 : _c.showMin)) {
+                data = this.addDataLabelsData(data);
+            }
             var datasets = isNumberArray(data) ? [{ data: data }] : data;
-            if (highlightedElements)
-                this.addHighlightedElementsToDatasets(highlightedElements, datasets);
+            if (this.highlightedElements)
+                this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
             return datasets;
         };
+        /**
+         * Decorate ChartDataset with properties to allow for datalabels.
+         *
+         * @param data
+         * @returns ChartDataset[]
+         */
+        ChartJSService.prototype.addDataLabelsData = function (data) {
+            var _this = this;
+            if (isNumberArray(data)) {
+                throw Error("Currently it's impossible to add dataLabels to non ScatterDataPoint datasets");
+            }
+            var decorateDataPoint = function (set, axis, direction, position) {
+                var _d = _this.locateValueIndexInDataset(set, axis, direction), value = _d.value, pointer = _d.pointer;
+                set.data[pointer] = Object.assign(Object.assign({}, set.data[pointer]), { datalabel: {
+                        value: value + (_this.dataLabelOptions.valueSuffix || ''),
+                        position: position,
+                    } });
+            };
+            data.map(function (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;
+        };
+        ChartJSService.prototype.locateValueIndexInDataset = function (dataset, axis, direction) {
+            var pointer;
+            var value;
+            dataset.data.forEach(function (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: value, pointer: pointer };
+        };
         return ChartJSService;
     }());
     ChartJSService.decorators = [
@@ -4364,6 +4814,7 @@
                 dataLabels: this.dataLabels,
                 customOptions: this.customOptions,
                 annotations: this.annotations,
+                dataLabelOptions: this.dataLabelOptions,
                 highlightedElements: this.highlightedElements,
             });
         };
@@ -4407,6 +4858,7 @@
         data: [{ type: i0.Input }],
         dataLabels: [{ type: i0.Input }],
         customOptions: [{ type: i0.Input }],
+        dataLabelOptions: [{ type: i0.Input }],
         annotations: [{ type: i0.Input }],
         highlightedElements: [{ type: i0.Input }],
         _height: [{ type: i0.HostBinding, args: ['style.--kirby-chart-height',] }],
@@ -4415,7 +4867,7 @@
     };
 
     var stockChartDeprecatedOptions = function (locale, height) {
-        var options = defaultOptions(locale);
+        var options = defaultOptions$1(locale);
         var transparentColor = 'rgba(255,255,255,0)';
         options.chart.backgroundColor = transparentColor;
         options.chart.height = height;
@@ -4511,7 +4963,7 @@
             },
         };
     };
-    var defaultOptions = function (locale) {
+    var defaultOptions$1 = function (locale) {
         return {
             chart: {
                 zoomType: 'x',
@@ -4593,7 +5045,7 @@
             ],
         };
     };
-    var ɵ0$6 = defaultOptions;
+    var ɵ0$8 = defaultOptions$1;
 
     // @ts-ignore
     AnnotationsModule__default['default'](Highcharts__namespace$1);
@@ -10171,7 +10623,7 @@
     exports.isNumberArray = isNumberArray;
     exports.selectedTabClickEvent = selectedTabClickEvent;
     exports.stockChartDeprecatedOptions = stockChartDeprecatedOptions;
-    exports.ɵ0 = ɵ0$6;
+    exports.ɵ0 = ɵ0$8;
     exports.ɵa = ProxyCmp;
     exports.ɵb = AppModule;
     exports.ɵba = ModalWrapperComponent;