@eclipse-scout/chart 22.0.26 → 22.0.33

package/dist/eclipse-scout-chart.js

@@ -665,7 +665,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -1037,6 +1037,7 @@ class Chart extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__.Widget {
       case Chart.Type.POLAR_AREA:
       case Chart.Type.RADAR:
       case Chart.Type.BUBBLE:
+      case Chart.Type.SCATTER:
         return new _index__WEBPACK_IMPORTED_MODULE_0__.ChartJsRenderer(this);
     }
 
@@ -1081,7 +1082,8 @@ _defineProperty(Chart, "Type", {
   DOUGHNUT: 'doughnut',
   POLAR_AREA: 'polarArea',
   RADAR: 'radar',
-  BUBBLE: 'bubble'
+  BUBBLE: 'bubble',
+  SCATTER: 'scatter'
 });
 
 _defineProperty(Chart, "Position", {
@@ -1163,11 +1165,11 @@ __webpack_require__.r(__webpack_exports__);
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -1261,6 +1263,13 @@ jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, chart_js_auto__WEBPAC
         borderWidth: 2
       }
     }
+  },
+  scatter: {
+    elements: {
+      point: {
+        radius: 3
+      }
+    }
   }
 });
 let chartJsGlobalsInitialized = false;
@@ -1325,6 +1334,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     this._legendPointerLeaveHandler = this._onLegendLeavePointer.bind(this);
     this._resizeHandler = this._onResize.bind(this);
     this._tooltipTitleGenerator = this._generateTooltipTitle.bind(this);
+    this._tooltipItemsGenerator = this._generateTooltipItems.bind(this);
     this._tooltipLabelGenerator = this._generateTooltipLabel.bind(this);
     this._tooltipLabelValueGenerator = this._generateTooltipLabelValue.bind(this);
     this._tooltipLabelColorGenerator = this._generateTooltipLabelColor.bind(this);
@@ -1961,7 +1971,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       return;
     }
 
-    if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       this.onlyIntegers = config.data.datasets.every(dataset => dataset.data.every(data => _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.numbers.isInteger(data.x) && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.numbers.isInteger(data.y)));
     } else {
       this.onlyIntegers = config.data.datasets.every(dataset => dataset.data.every(data => _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.numbers.isInteger(data)));
@@ -1978,6 +1988,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         tooltip: {
           callbacks: {
             title: this._tooltipTitleGenerator,
+            items: this._tooltipItemsGenerator,
             label: this._tooltipLabelGenerator,
             labelValue: this._tooltipLabelValueGenerator,
             labelColor: this._tooltipLabelColorGenerator
@@ -2006,24 +2017,23 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         dataset = tooltipItem.dataset,
         title = [];
 
-    if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE)) {
       let xAxis = config.options.scales.x,
           yAxis = config.options.scales.y,
-          xAxisLabel = xAxis.title.text,
-          yAxisLabel = yAxis.title.text;
-      xAxisLabel = xAxisLabel ? _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(xAxisLabel) : ChartJsRenderer.ARROW_LEFT_RIGHT;
-      yAxisLabel = yAxisLabel ? _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(yAxisLabel) : ' ' + ChartJsRenderer.ARROW_UP_DOWN + ' ';
+          axisLabels = this._getAxisLabels(config);
+
       let xTickLabel = xAxis.ticks.callback(dataset.data[tooltipItem.dataIndex].x);
 
       if (xTickLabel) {
-        title.push(this._createTooltipAttribute(xAxisLabel, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(xTickLabel), true));
+        title.push(this._createTooltipAttribute(axisLabels.x, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(xTickLabel), true));
       }
 
       let yTickLabel = yAxis.ticks.callback(dataset.data[tooltipItem.dataIndex].y);
 
       if (yTickLabel) {
-        title.push(this._createTooltipAttribute(yAxisLabel, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(yTickLabel), true));
+        title.push(this._createTooltipAttribute(axisLabels.y, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(yTickLabel), true));
       }
+    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {// nop, scatter has the title in the items table
     } else {
       let label = chart.data.labels[tooltipItem.dataIndex];
       title.push(this._createTooltipAttribute(config.options.reformatLabels ? this._formatLabel(label) : label, '', true));
@@ -2032,6 +2042,95 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     return title;
   }
 
+  _getAxisLabels(config) {
+    let xAxisLabel = config.options.scales.x.title.text,
+        yAxisLabel = config.options.scales.y.title.text;
+    xAxisLabel = this._resolveAxisLabel(xAxisLabel, ChartJsRenderer.ARROW_LEFT_RIGHT);
+    yAxisLabel = this._resolveAxisLabel(yAxisLabel, ' ' + ChartJsRenderer.ARROW_UP_DOWN + ' ');
+    return {
+      x: xAxisLabel,
+      y: yAxisLabel
+    };
+  }
+
+  _resolveAxisLabel(axisLabel) {
+    let defaultLabel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(axisLabel)) {
+      axisLabel = axisLabel();
+      axisLabel = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(axisLabel) ? axisLabel : '';
+    }
+
+    return axisLabel ? _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(axisLabel) : defaultLabel;
+  }
+
+  _generateTooltipItems(tooltipItems, tooltipLabel, tooltipLabelValue, tooltipColor) {
+    if (!tooltipItems || !tooltipItems.length) {
+      return '';
+    }
+
+    let tooltipItem = tooltipItems[0],
+        chart = tooltipItem.chart,
+        config = chart.config,
+        xAxisValues = false,
+        yAxisValues = false,
+        itemsText = '';
+    tooltipItems.forEach(tooltipItem => {
+      let {
+        label,
+        labelValue,
+        labelColor
+      } = this._getItemDetails(tooltipItem, tooltipLabel, tooltipLabelValue, tooltipColor);
+
+      if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
+        xAxisValues |= _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(labelValue.x);
+        yAxisValues |= _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(labelValue.y);
+        itemsText += this._createTooltipScatterAttribute(label, labelValue.x, labelValue.y, false, labelColor);
+      } else {
+        itemsText += this._createTooltipAttribute(label, labelValue, false, labelColor);
+      }
+    }); // tabular representation for scatter tooltip needs an additional header and footer
+
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
+      let tableHeader = '<table><tbody>';
+
+      let axisLabels = this._getAxisLabels(config);
+
+      tableHeader += this._createTooltipScatterAttribute('', xAxisValues ? axisLabels.x : '', // do not show axis label if no values are shown
+      yAxisValues ? axisLabels.y : '', // do not show axis label if no values are shown
+      true, null);
+      let tableFooter = '</tbody></table>';
+      itemsText = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.box(tableHeader, itemsText, tableFooter);
+    }
+
+    return itemsText;
+  }
+
+  _getItemDetails(tooltipItem, tooltipLabel, tooltipLabelValue, tooltipColor) {
+    let label, labelValue, labelColor;
+
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipLabel)) {
+      label = tooltipLabel(tooltipItem);
+      label = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(label) ? label : '';
+    }
+
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipLabelValue)) {
+      labelValue = tooltipLabelValue(tooltipItem);
+      labelValue = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(labelValue) || _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isPlainObject(labelValue) ? labelValue : '';
+    }
+
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipColor)) {
+      labelColor = tooltipColor(tooltipItem);
+      labelColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isPlainObject(labelColor) ? labelColor.backgroundColor || '' : '';
+    }
+
+    return {
+      label,
+      labelValue,
+      labelColor
+    };
+  }
+
   _generateTooltipLabel(tooltipItem) {
     return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(tooltipItem.dataset.label);
   }
@@ -2042,6 +2141,11 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
 
     if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
       return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].z));
+    } else if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) {
+      return {
+        x: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].x)),
+        y: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].y))
+      };
     }
 
     return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex]));
@@ -2055,7 +2159,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         borderColor,
         index;
 
-    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR_HORIZONTAL, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE)) {
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR_HORIZONTAL, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       borderColor = dataset.borderColor;
       legendColor = dataset.legendColor;
       index = tooltipItem.datasetIndex;
@@ -2095,6 +2199,11 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     return '<div class="' + cssClass + '">' + (color ? '<div class="color" style="background-color:' + color + '"></div>' : '') + (label ? '<label>' + label + '</label>' : '') + (value ? '<div class="value">' + value + '</div>' : '') + '</div>';
   }
 
+  _createTooltipScatterAttribute(label, xValue, yValue, isTitle, color) {
+    let cssClass = isTitle ? 'attribute title' : 'attribute';
+    return '<tr class="' + cssClass + '">' + '<td class="color-cell">' + (color ? '<div class="color" style="background-color:' + color + '"></div>' : '') + '</td>' + '<td class="label">' + label + '</td>' + (xValue ? '<td class="value">' + xValue + '</td>' : '') + (yValue ? '<td class="value">' + yValue + '</td>' : '') + '</tr>';
+  }
+
   _renderTooltip(context) {
     let isHideTooltip = context.tooltip.opacity === 0 || context.tooltip._tooltipItems.length < 1;
 
@@ -2128,9 +2237,9 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     }
 
     let tooltip = context.tooltip,
-        tooltipItems = tooltip._tooltipItems;
+        dataPoints = tooltip.dataPoints;
 
-    if (tooltipItems.length < 1) {
+    if (dataPoints.length < 1) {
       return;
     }
 
@@ -2143,37 +2252,21 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     let tooltipOptions = tooltip.options || {},
         tooltipCallbacks = tooltipOptions.callbacks || {},
         tooltipTitle = tooltipCallbacks.title,
+        tooltipItems = tooltipCallbacks.items,
         tooltipLabel = tooltipCallbacks.label,
         tooltipLabelValue = tooltipCallbacks.labelValue,
         tooltipColor = tooltipCallbacks.labelColor,
         tooltipText = '';
 
     if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipTitle)) {
-      tooltipText += _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(tooltipTitle(tooltipItems)).join('');
+      tooltipText += _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(tooltipTitle(dataPoints)).join('');
     }
 
-    tooltipItems.forEach(tooltipItem => {
-      let label, labelValue, labelColor;
-
-      if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipLabel)) {
-        label = tooltipLabel(tooltipItem);
-        label = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(label) ? label : '';
-      }
-
-      if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipLabelValue)) {
-        labelValue = tooltipLabelValue(tooltipItem);
-        labelValue = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isString(labelValue) ? labelValue : '';
-      }
-
-      if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipColor)) {
-        labelColor = tooltipColor(tooltipItem);
-        labelColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isPlainObject(labelColor) ? labelColor.backgroundColor || '' : '';
-      }
-
-      tooltipText += this._createTooltipAttribute(label, labelValue, false, labelColor);
-    });
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.objects.isFunction(tooltipItems)) {
+      tooltipText += _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(tooltipItems(dataPoints, tooltipLabel, tooltipLabelValue, tooltipColor)).join('');
+    }
 
-    let positionAndOffset = this._computeTooltipPositionAndOffset(tooltipItems[0]),
+    let positionAndOffset = this._computeTooltipPositionAndOffset(dataPoints[0]),
         origin = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.graphics.offsetBounds(this.$canvas);
 
     origin.x += tooltip.caretX + positionAndOffset.offsetX;
@@ -2260,7 +2353,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       let angle = element.angle;
       tooltipPosition = 0 <= angle && angle < Math.PI ? 'bottom' : 'top';
       tooltipDirection = -Math.PI / 2 <= angle && angle < Math.PI / 2 ? 'right' : 'left';
-    } else if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
       let chartArea = chart.chartArea,
           mid = chartArea.left + chartArea.width / 2;
@@ -2282,7 +2375,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       b = width / (PHI + 1);
       offsetY = -height / 2;
       offsetX = tooltipDirection === 'left' ? b : -b;
-    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR) || dataset.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE) {
+    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR) || dataset.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE) {
       // noinspection JSValidateTypes
 
       /**
@@ -2385,6 +2478,23 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
           }
         }
       }, config.options);
+    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
+      config.options = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, {}, {
+        scales: {
+          x: {
+            minSpaceBetweenTicks: 35,
+            ticks: {
+              padding: 10
+            }
+          },
+          y: {
+            minSpaceBetweenTicks: 35,
+            ticks: {
+              padding: 10
+            }
+          }
+        }
+      }, config.options);
     }
 
     this._adjustXAxis(config);
@@ -2400,7 +2510,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     let type = config.type,
         scales = config.options.scales;
 
-    if (this._isHorizontalBar(config) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    if (this._isHorizontalBar(config) || _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       scales.x = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, {}, {
         beginAtZero: this._isHorizontalBar(config),
         offset: type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE,
@@ -2422,7 +2532,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       }, scales.x);
     }
 
-    if (this._isHorizontalBar(config) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE || config.options.reformatLabels) {
+    if (this._isHorizontalBar(config) || _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) || config.options.reformatLabels) {
       scales.x = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, {}, {
         ticks: {
           callback: this._xLabelFormatter
@@ -2450,7 +2560,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       }, scales.y);
     } else {
       scales.y = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, {}, {
-        beginAtZero: type !== _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE,
+        beginAtZero: !_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER),
         grid: {
           drawBorder: false,
           drawTicks: false
@@ -2546,6 +2656,15 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         borderRadius: 3
       }, plugins.datalabels);
       plugins.datalabels.display = 'auto';
+    } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
+      plugins.datalabels = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, {}, {
+        backgroundColor: this._datalabelBackgroundColorHandler,
+        borderRadius: 3,
+        anchor: 'end',
+        align: 'top',
+        offset: 3
+      }, plugins.datalabels);
+      plugins.datalabels.display = 'auto';
     }
 
     if (config.options.reformatLabels) {
@@ -2637,7 +2756,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       let abbreviations = [this.chart.session.text('ui.Mrd'), this.chart.session.text('ui.Bio'), this.chart.session.text('ui.Brd'), this.chart.session.text('ui.Tri'), this.chart.session.text('ui.Trd')];
 
       for (let i = 0; i < abbreviations.length; i++) {
-        if (abs >= 1000000) {
+        if (abs >= 1000) {
           abs = abs / 1000;
           abbreviation = ' ' + abbreviations[i];
         } else {
@@ -2787,6 +2906,8 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
   _formatDatalabels(value, context) {
     if (context.chart.config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
       return this._formatLabel(value.z);
+    } else if (context.chart.config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) {
+      return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.join(' / ', this._formatLabel(value.x), this._formatLabel(value.y));
     }
 
     return this._formatLabel(value);
@@ -2872,7 +2993,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       if (checkable) {
         let datasetLength = elem.data.length;
 
-        if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR && (elem.type || _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) {
+        if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR && (elem.type || _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) {
           let uncheckedBackgroundColor = multipleColorsPerDataset ? colors.backgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.backgroundColors[idx]),
               uncheckedHoverBackgroundColor = multipleColorsPerDataset ? colors.hoverBackgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.hoverBackgroundColors[idx]),
               checkedBackgroundColor = multipleColorsPerDataset ? colors.checkedBackgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.checkedBackgroundColors[idx]),
@@ -3076,7 +3197,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         checkedBackgroundOpacity = 0.2;
         checkedHoverBackgroundOpacity = 0.35;
         checkedHoverBackgroundDarker = 0;
-      } else if (type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+      } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
         backgroundOpacity = 0.2;
         hoverBackgroundOpacity = 0.35;
         hoverBackgroundDarker = 0;
@@ -3196,7 +3317,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
           borderColor,
           backgroundColor;
 
-      if (dataset && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE)) {
+      if (dataset && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
         legendColor = dataset.legendColor;
         borderColor = this._adjustColorOpacity(dataset.borderColor, 1);
       } else if (data.datasets.length && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA)) {
@@ -3372,7 +3493,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       dataIndex: itemIndex
     };
 
-    if (this.chartJs.config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(this.chartJs.config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       let data = this.chartJs.config.data.datasets[datasetIndex].data[itemIndex];
       clickObject.xIndex = data.x;
       clickObject.yIndex = data.y;
@@ -3607,7 +3728,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         dataset = datasets ? datasets[datasetIndex] : null,
         datasetType = dataset ? dataset.type : null;
 
-    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA) || datasetType === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE) {
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) || datasetType === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE) {
       mode = 'point';
     } else {
       mode = 'dataset';
@@ -3669,7 +3790,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       }
     }));
 
-    let maxMinR = this._computeMaxMinValue(datasets, 'r', true),
+    let maxMinR = this._computeMaxMinValue(config, datasets, 'r', true),
         maxR = maxMinR.maxValue,
         minR = maxMinR.minValue,
         // Compute a scalingFactor and an offset to get the new radius newR = r * scalingFactor + offset.
@@ -3723,33 +3844,39 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     }));
   }
 
-  _computeMaxMinValue(datasets, identifier, exact, boundRange, padding, space) {
+  _computeMaxMinValue(config, datasets, identifier, exact, boundRange, padding, space) {
     if (!datasets) {
       return;
     }
 
     let maxValue, minValue;
 
-    for (let i = 0; i < datasets.length; i++) {
-      for (let j = 0; j < datasets[i].data.length; j++) {
-        let value;
+    if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER && identifier === 'r') {
+      // do not move the grid boundaries because of the radii of the points (would look weird)
+      maxValue = 0;
+      minValue = 0;
+    } else {
+      for (let i = 0; i < datasets.length; i++) {
+        for (let j = 0; j < datasets[i].data.length; j++) {
+          let value;
 
-        if (identifier) {
-          value = datasets[i].data[j][identifier];
-        } else {
-          value = datasets[i].data[j];
-        }
+          if (identifier) {
+            value = datasets[i].data[j][identifier];
+          } else {
+            value = datasets[i].data[j];
+          }
 
-        if (isNaN(maxValue)) {
-          maxValue = value;
-        } else {
-          maxValue = Math.max(value, maxValue);
-        }
+          if (isNaN(maxValue)) {
+            maxValue = value;
+          } else {
+            maxValue = Math.max(value, maxValue);
+          }
 
-        if (isNaN(minValue)) {
-          minValue = value;
-        } else {
-          minValue = Math.min(value, minValue);
+          if (isNaN(minValue)) {
+            minValue = value;
+          } else {
+            minValue = Math.min(value, minValue);
+          }
         }
       }
     }
@@ -3842,7 +3969,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
 
     let type = config.type;
 
-    if (!_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE)) {
+    if (!_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       return;
     }
 
@@ -3883,17 +4010,17 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       this._adjustAxisMaxMin(yAxis, maxYTicks, yBoundary);
     }
 
-    if (type !== _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
+    if (!_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       return;
     }
 
-    let xBoundary = this._computeXBoundaryBubble(config, width);
+    let xBoundary = this._computeXBoundaryPointElement(config, width);
 
     this._adjustAxisMaxMin(xAxis, maxXTicks, xBoundary);
   }
 
-  _computeBoundaryBubble(config, identifier, space) {
-    if (!config || !config.type || config.type !== _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE || !config.data || !config.options || !config.options.scales || !(identifier === 'x' || identifier === 'y') || !space) {
+  _computeBoundaryPointElement(config, identifier, space) {
+    if (!config || !config.type || !_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) || !config.data || !config.options || !config.options.scales || !(identifier === 'x' || identifier === 'y') || !space) {
       return;
     }
 
@@ -3903,7 +4030,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         labelMap = config.options[identifier + 'LabelMap'],
         boundary;
 
-    let maxR = this._computeMaxMinValue(datasets, 'r', true).maxValue,
+    let maxR = this._computeMaxMinValue(config, datasets, 'r', true).maxValue,
         padding = maxR;
 
     if (config.options.elements && config.options.elements.point && config.options.elements.point.hoverRadius) {
@@ -3911,9 +4038,9 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     }
 
     if (offset) {
-      boundary = this._computeMaxMinValue(datasets, identifier, labelMap, true);
+      boundary = this._computeMaxMinValue(config, datasets, identifier, labelMap, true);
     } else {
-      boundary = this._computeMaxMinValue(datasets, identifier, labelMap, true, padding, space);
+      boundary = this._computeMaxMinValue(config, datasets, identifier, labelMap, true, padding, space);
     }
 
     if (labelMap) {
@@ -3924,12 +4051,12 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     return boundary;
   }
 
-  _computeXBoundaryBubble(config, width) {
-    return this._computeBoundaryBubble(config, 'x', width);
+  _computeXBoundaryPointElement(config, width) {
+    return this._computeBoundaryPointElement(config, 'x', width);
   }
 
-  _computeYBoundaryBubble(config, height) {
-    return this._computeBoundaryBubble(config, 'y', height);
+  _computeYBoundaryPointElement(config, height) {
+    return this._computeBoundaryPointElement(config, 'y', height);
   }
 
   _computeYBoundaries(config, height) {
@@ -3941,8 +4068,8 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         yBoundary,
         yBoundaryDiffType;
 
-    if (type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
-      yBoundary = this._computeYBoundaryBubble(config, height);
+    if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
+      yBoundary = this._computeYBoundaryPointElement(config, height);
     } else {
       let datasets = [],
           datasetsDiffType = [];
@@ -3957,10 +4084,10 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         });
       }
 
-      yBoundary = this._computeMaxMinValue(datasets);
+      yBoundary = this._computeMaxMinValue(config, datasets);
 
       if (datasets.length && datasetsDiffType.length) {
-        yBoundaryDiffType = this._computeMaxMinValue(datasetsDiffType);
+        yBoundaryDiffType = this._computeMaxMinValue(config, datasetsDiffType);
         let yBoundaryRange = yBoundary.maxValue - yBoundary.minValue,
             yBoundaryRangeDiffType = yBoundaryDiffType.maxValue - yBoundaryDiffType.minValue;