@eclipse-scout/chart 11.0.41 → 22.0.0-beta.10

package/src/chart/ChartJsRenderer.js

@@ -9,52 +9,111 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 import {AbstractChartRenderer, Chart} from '../index';
-import ChartJs from 'chart.js';
-import {arrays, colorSchemes, Event, numbers, objects, strings, styles} from '@eclipse-scout/core';
-// noinspection ES6UnusedImports
-import chartjs_plugin_datalabels from 'chartjs-plugin-datalabels';
-// noinspection ES6UnusedImports
-import ChartJsTooltipDelay from './ChartJsTooltipDelay';
+import ChartJs from 'chart.js/auto';
+import {arrays, colorSchemes, Event, graphics, numbers, objects, scout, strings, styles, tooltips} from '@eclipse-scout/core';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import $ from 'jquery';
+
+ChartJs.register(ChartDataLabels);
+
+/**
+ * @typedef CoreChartOptions
+ * @property {number} [font.size]
+ */
+
+/**
+ * @typedef TickOptions
+ * @property {number} maxRotation
+ */
+
+/**
+ * @typedef Scale
+ * @property {number} labelRotation
+ * @property {number} height
+ * @property {object} _labelSizes
+ * @property {object} _labelSizes.widest
+ */
+
+/**
+ * @typedef TooltipModel
+ * @property {array} _tooltipItems
+ */
+
+/**
+ * @typedef ArcElement
+ * @property {number} innerRadius
+ * @property {number} outerRadius
+ * @property {number} startAngle
+ * @property {number} endAngle
+ */
+
+/**
+ * @typedef PointElement
+ * @property {number} angle
+ */
+
+/**
+ * @typedef BarElement
+ * @property {number} height
+ * @property {number} width
+ */
 
 /**
- * @typedef ChartJs
- * @property {object} [defaults]
- * @property {object} [defaults.global]
- * @property {object} [defaults.global.legend]
- * @property {object} [defaults.global.legend.labels]
- * @property {object} [defaults.global.elements]
- * @property {object} [defaults.global.elements.line]
- * @property {object} [defaults.global.elements.point]
- * @property {object} [defaults.global.elements.arc]
- * @property {object} [defaults.global.elements.rectangle]
- * @property {object} [defaults.global.tooltips]
+ * @typedef TooltipOptions
+ * @property {string} titleFont.family
  */
-ChartJs.defaults.global.maintainAspectRatio = false;
-ChartJs.defaults.global.legend.labels.usePointStyle = true;
-ChartJs.defaults.global.legend.labels.boxWidth = 7;
-ChartJs.defaults.global.elements.line.tension = 0;
-ChartJs.defaults.global.elements.line.fill = false;
-ChartJs.defaults.global.elements.line.borderWidth = 2;
-ChartJs.defaults.global.elements.point.radius = 0;
-ChartJs.defaults.global.elements.point.hitRadius = 10;
-ChartJs.defaults.global.elements.point.hoverRadius = 5;
-ChartJs.defaults.global.elements.point.hoverBorderWidth = 2;
-ChartJs.defaults.global.elements.arc.borderWidth = 1;
-ChartJs.defaults.global.elements.rectangle.borderWidth = 1;
-ChartJs.defaults.global.elements.rectangle.borderSkipped = '';
-ChartJs.defaults.horizontalBar.elements.rectangle.borderSkipped = '';
-ChartJs.defaults.global.tooltips.borderWidth = 1;
-ChartJs.defaults.global.tooltips.cornerRadius = 4;
-ChartJs.defaults.global.tooltips.xPadding = 8;
-ChartJs.defaults.global.tooltips.yPadding = 8;
-ChartJs.defaults.global.tooltips.titleSpacing = 4;
-ChartJs.defaults.global.tooltips.titleMarginBottom = 8;
-ChartJs.defaults.global.tooltips.bodySpacing = 4;
+
+$.extend(true, ChartJs.defaults, {
+  maintainAspectRatio: false,
+  elements: {
+    line: {
+      borderWidth: 2
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 7,
+      hoverBorderWidth: 2
+    },
+    arc: {
+      borderWidth: 1
+    },
+    bar: {
+      borderWidth: 1,
+      borderSkipped: ''
+    }
+  },
+  plugins: {
+    legend: {
+      labels: {
+        usePointStyle: true,
+        boxWidth: 7
+      }
+    }
+  }
+});
+$.extend(true, ChartJs.overrides, {
+  line: {
+    elements: {
+      point: {
+        borderWidth: 2
+      }
+    }
+  }
+});
 
 let chartJsGlobalsInitialized = false;
+const PHI = (1 + Math.sqrt(5)) / 2; // golden ratio
 
 /**
  * @typedef Dataset
+ * @property {string} [datasetId]
+ * @property {array} [data]
+ *
+ * @property {array|string} [backgroundColor]
+ * @property {array|string} [backgroundColorBackup]
+ * @property {array|string} [hoverBackgroundColor]
+ *
  * @property {array|string} [pointBackgroundColor]
  * @property {array|string} [pointHoverBackgroundColor]
  * @property {array|number} [pointRadius]
@@ -83,17 +142,11 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     super(chart);
     this.chartJs = null;
     this.onlyIntegers = true;
-    this.minSpaceBetweenYTicks = 35;
-    this.minSpaceBetweenXTicks = 150;
     this.maxXAxesTicksHeigth = 75;
     this.numSupportedColors = 6;
     this.colorSchemeCssClass = '';
     this.minRadialChartDatalabelSpace = 25;
 
-    this._tooltipTitle = this._formatTooltipTitle.bind(this);
-    this._tooltipLabel = this._formatTooltipLabel.bind(this);
-    this._tooltipLabelColor = this._computeTooltipLabelColor.bind(this);
-
     this._labelFormatter = this._formatLabel.bind(this);
     this._xLabelFormatter = this._formatXLabel.bind(this);
     this._yLabelFormatter = this._formatYLabel.bind(this);
@@ -123,6 +176,14 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     this._legendPointerLeaveHandler = this._onLegendLeavePointer.bind(this);
 
     this._resizeHandler = this._onResize.bind(this);
+
+    this._tooltipTitleGenerator = this._generateTooltipTitle.bind(this);
+    this._tooltipLabelGenerator = this._generateTooltipLabel.bind(this);
+    this._tooltipLabelValueGenerator = this._generateTooltipLabelValue.bind(this);
+    this._tooltipLabelColorGenerator = this._generateTooltipLabelColor.bind(this);
+    this._tooltipRenderer = this._renderTooltip.bind(this);
+    this._tooltip = null;
+    this._tooltipTimeoutId = null;
   }
 
   _validateChartData() {
@@ -168,7 +229,7 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       chartConfigDataValid = false;
     }
 
-    if (chartConfigDataValid && scout.isOneOf(this.chart.config.type, Chart.Type.POLAR_AREA, Chart.Type.RADAR)) {
+    if (chartConfigDataValid && scout.isOneOf(config.type, Chart.Type.POLAR_AREA, Chart.Type.RADAR)) {
       // check lengths
       let i, length = 0;
       for (i = 0; i < config.data.datasets.length; i++) {
@@ -196,16 +257,15 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
     this.firstOpaqueBackgroundColor = styles.getFirstOpaqueBackgroundColor(this.$canvas);
     if (!chartJsGlobalsInitialized) {
-      ChartJs.defaults.global.defaultFontFamily = this.$canvas.css('font-family');
+      ChartJs.defaults.font.family = this.$canvas.css('font-family');
       chartJsGlobalsInitialized = true;
     }
     /**
      * @property {number} options.bubble.sizeOfLargestBubble
      * @property {object} options.numberFormatter
-     * @property {number} options.tooltips.titleFontFamily
-     * @property {object} options.scales.scaleLabelByTypeMap
-     * @property {object} options.scales.xLabelMap
-     * @property {object} options.scales.yLabelMap
+     * @property {object} options.scaleLabelByTypeMap
+     * @property {object} options.xLabelMap
+     * @property {object} options.yLabelMap
      */
     let config = $.extend(true, {}, this.chart.config);
     this._adjustConfig(config);
@@ -240,65 +300,69 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     let config = $.extend(true, {}, this.chart.config);
     this._adjustConfig(config);
 
-    let hiddenDataIndices = [],
-      applyHiddenDatasetIndices = [];
-
     let targetData = this.chartJs.config.data,
       sourceData = config.data;
 
-    if (targetData && sourceData) {
-      // Transfer property from source object to target object:
-      // 1. If the property is not set on the target object, copy it from source.
-      // 2. If the property is not set on the source object, set it to undefined if setToUndefined = true. Otherwise empty the array if it is an array property or set it to undefined.
-      // 3. If the property is not an array on the source or the target object, copy the property from the source to the target object.
-      // 4. If the property is an array on both objects, do not update the array, but transfer the elements (update elements directly, use pop(), push() or splice() if one array is longer than the other).
-      //    This needs to be done to have a smooth animation from the old to the new state and not a complete rebuild of the chart.
-      let transferProperty = (source, target, property, setToUndefined) => {
-        if (!source || !target || !property) {
-          return;
-        }
-        // 1. Property not set on target
-        if (!target[property]) {
-          target[property] = source[property];
-          return;
+    // Transfer property from source object to target object:
+    // 1. If the property is not set on the target object, copy it from source.
+    // 2. If the property is not set on the source object, set it to undefined if setToUndefined = true. Otherwise empty the array if it is an array property or set it to undefined.
+    // 3. If the property is not an array on the source or the target object, copy the property from the source to the target object.
+    // 4. If the property is an array on both objects, do not update the array, but transfer the elements (update elements directly, use pop(), push() or splice() if one array is longer than the other).
+    let transferProperty = (source, target, property, setToUndefined) => {
+      if (!source || !target || !property) {
+        return;
+      }
+      // 1. Property not set on target
+      if (!target[property]) {
+        let src = source[property];
+        if (src || setToUndefined) {
+          target[property] = src;
         }
-        // 2. Property not set on source
-        if (!source[property]) {
-          if (setToUndefined) {
-            // Set to undefined if setToUndefined = true
-            target[property] = undefined;
-            return;
-          }
-          // Empty array
-          if (Array.isArray(target[property])) {
-            target[property].splice(0);
-            return;
-          }
-          // Otherwise set to undefined
+        return;
+      }
+      // 2. Property not set on source
+      if (!source[property]) {
+        if (setToUndefined) {
+          // Set to undefined if setToUndefined = true
           target[property] = undefined;
           return;
         }
-        // 3. Property is not an array on the source or the target object
-        if (!Array.isArray(source[property]) || !Array.isArray(target[property])) {
-          target[property] = source[property];
+        // Empty array
+        if (Array.isArray(target[property])) {
+          target[property].splice(0, target[property].length);
           return;
         }
-        // 4. Property is an array on the source and the target object
-        for (let i = 0; i < Math.min(source[property].length, target[property].length); i++) {
-          // Update elements directly
-          target[property][i] = source[property][i];
-        }
-        let targetLength = target[property].length,
-          sourceLength = source[property].length;
-        if (targetLength > sourceLength) {
-          // Target array is longer than source array
-          target[property].splice(sourceLength);
-        } else if (targetLength < sourceLength) {
-          // Source array is longer than target array
-          target[property].push(...source[property].splice(targetLength));
-        }
-      };
+        // Otherwise set to undefined
+        target[property] = undefined;
+        return;
+      }
+      // 3. Property is not an array on the source or the target object
+      if (!Array.isArray(source[property]) || !Array.isArray(target[property])) {
+        target[property] = source[property];
+        return;
+      }
+      // 4. Property is an array on the source and the target object
+      for (let i = 0; i < Math.min(source[property].length, target[property].length); i++) {
+        // Update elements directly
+        target[property][i] = source[property][i];
+      }
+      let targetLength = target[property].length,
+        sourceLength = source[property].length;
+      if (targetLength > sourceLength) {
+        // Target array is longer than source array
+        target[property].splice(sourceLength, targetLength - sourceLength);
+      } else if (targetLength < sourceLength) {
+        // Source array is longer than target array
+        target[property].push(...source[property].splice(targetLength));
+      }
+    };
+
+    let findDataset = (datasets, datasetId) => arrays.find(datasets, dataset => dataset.datasetId === datasetId);
+    let findDatasetIndex = (datasets, datasetId) => arrays.findIndex(datasets, dataset => dataset.datasetId === datasetId);
 
+    if (targetData && sourceData) {
+      // Transfer properties from source to target, instead of overwriting the whole data object.
+      // This needs to be done to have a smooth animation from the old to the new state and not a complete rebuild of the chart.
       transferProperty(sourceData, targetData, 'labels');
 
       if (!targetData.datasets) {
@@ -308,47 +372,89 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         sourceData.datasets = [];
       }
 
-      // If the chart is a pie-, doughnut- or polar-area-chart, not complete datasets are hidden but elements of each dataset.
-      // Store these hidden data indices to apply them to newly added datasets.
-      if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA) && targetData.datasets.length) {
-        let meta = this.chartJs.getDatasetMeta(0);
-        if (meta && meta.data && Array.isArray(meta.data)) {
-          meta.data.forEach((dataMeta, idx) => {
-            if (dataMeta.hidden) {
-              hiddenDataIndices.push(idx);
-            }
-          });
-        }
+      // if all datasets have no id set, add artificial dataset ids
+      if (sourceData.datasets.every(dataset => objects.isNullOrUndefined(dataset.datasetId))) {
+        sourceData.datasets.forEach((dataset, idx) => {
+          dataset.datasetId = '' + idx;
+        });
+        targetData.datasets.forEach((dataset, idx) => {
+          dataset.datasetId = '' + idx;
+        });
       }
 
-      for (let i = 0; i < Math.min(sourceData.datasets.length, targetData.datasets.length); i++) {
-        let targetDataset = targetData.datasets[i],
-          sourceDataset = sourceData.datasets[i];
+      // update existing datasets
+      // Important: Update existing datasets first, before removing obsolete datasets
+      // (the dataset object has listeners from Chart.js, which do not work well on a partially updated chart (updated datasets, but not yet updated chart)
+      targetData.datasets.forEach(targetDataset => {
+        let sourceDataset = findDataset(sourceData.datasets, targetDataset.datasetId);
+
+        if (sourceDataset) {
+          targetDataset.label = sourceDataset.label;
+          targetDataset.type = sourceDataset.type;
+
+          transferProperty(sourceDataset, targetDataset, 'data');
+
+          transferProperty(sourceDataset, targetDataset, 'backgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'borderColor', true);
+          transferProperty(sourceDataset, targetDataset, 'hoverBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'hoverBorderColor', true);
+          transferProperty(sourceDataset, targetDataset, 'legendColor', true);
+          transferProperty(sourceDataset, targetDataset, 'pointBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'pointHoverBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'pointBorderColor', true);
+          transferProperty(sourceDataset, targetDataset, 'pointHoverBorderColor', true);
+
+          transferProperty(sourceDataset, targetDataset, 'uncheckedBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'uncheckedHoverBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'checkedBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'checkedHoverBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'uncheckedPointBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'uncheckedPointHoverBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'checkedPointBackgroundColor', true);
+          transferProperty(sourceDataset, targetDataset, 'checkedPointHoverBackgroundColor', true);
+
+          transferProperty(sourceDataset, targetDataset, 'lineTension', true);
+
+          transferProperty(sourceDataset, targetDataset, 'pointRadius', true);
+          transferProperty(sourceDataset, targetDataset, 'uncheckedPointRadius', true);
+          transferProperty(sourceDataset, targetDataset, 'checkedPointRadius', true);
+
+          this._adjustDatasetBorderWidths(targetDataset);
+        }
+      });
 
-        targetDataset.label = sourceDataset.label;
-        targetDataset.type = sourceDataset.type;
+      // remove deleted datasets, loop backwards to not compromise the loop when modifying the array
+      // datasets without an id get deleted anyway (replaced in every update, because a correct identification is not possible)
+      for (let i = targetData.datasets.length - 1; i >= 0; i--) {
+        let datasetId = targetData.datasets[i].datasetId;
+        let deleted = objects.isNullOrUndefined(datasetId) || findDatasetIndex(sourceData.datasets, datasetId) === -1;
+        if (deleted) {
+          targetData.datasets.splice(i, 1);
+        }
+      }
 
-        transferProperty(sourceDataset, targetDataset, 'data');
+      // sort existing, updated datasets
+      targetData.datasets.sort((a, b) => {
+        return findDatasetIndex(sourceData.datasets, a.datasetId) - findDatasetIndex(sourceData.datasets, b.datasetId);
+      });
 
-        transferProperty(sourceDataset, targetDataset, 'backgroundColor', true);
-        transferProperty(sourceDataset, targetDataset, 'borderColor', true);
-        transferProperty(sourceDataset, targetDataset, 'hoverBackgroundColor', true);
-        transferProperty(sourceDataset, targetDataset, 'hoverBorderColor', true);
-        transferProperty(sourceDataset, targetDataset, 'legendColor', true);
-        transferProperty(sourceDataset, targetDataset, 'pointHoverBackgroundColor', true);
-      }
-      let targetLength = targetData.datasets.length,
-        sourceLength = sourceData.datasets.length;
-      if (targetLength > sourceLength) {
-        targetData.datasets.splice(sourceLength);
-      } else if (targetLength < sourceLength) {
-        targetData.datasets.push(...sourceData.datasets.splice(targetLength));
-        applyHiddenDatasetIndices = arrays.init(sourceLength - targetLength).map((elem, idx) => targetLength + idx);
-      }
+      // add all new datasets
+      sourceData.datasets.forEach((sourceDataset, idx) => {
+        let targetDataset = targetData.datasets[idx];
+        // exclude datasets without an id here, to ensure that multiple datasets without an id do not overwrite each other
+        if (targetDataset && targetDataset.datasetId && sourceDataset.datasetId === targetDataset.datasetId) {
+          return;
+        }
+        targetData.datasets.splice(idx, 0, sourceDataset);
+      });
     } else {
       this.chartJs.config.data = sourceData;
     }
 
+    // update label maps for scales (the label maps, despite being part of the config, can be updated, without redrawing the whole chart)
+    transferProperty(config.options, this.chartJs.config.options, 'xLabelMap', true);
+    transferProperty(config.options, this.chartJs.config.options, 'yLabelMap', true);
+
     $.extend(true, this.chartJs.config, {
       options: {
         animation: {
@@ -356,21 +462,13 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         }
       }
     });
-    this.chartJs.update();
+    let scales = this.chartJs.config.options.scales || {},
+      axes = [scales.x || {}, scales.y || {}, scales.yDiffType || {}, scales.r || {}];
+    axes.forEach(axis => {
+      (axis.ticks || {}).stepSize = undefined;
+    });
 
-    // Apply hidden data indices (only set for pie-, doughnut- or polar-area-chart)
-    if (hiddenDataIndices.length && applyHiddenDatasetIndices.length) {
-      applyHiddenDatasetIndices.forEach(datasetIndex => {
-        let meta = this.chartJs.getDatasetMeta(datasetIndex);
-        if (meta && meta.data && Array.isArray(meta.data)) {
-          hiddenDataIndices
-            .filter(dataIndex => meta.data.length > dataIndex)
-            .forEach(dataIndex => {
-              meta.data[dataIndex].hidden = true;
-            });
-        }
-      });
-    }
+    this.chartJs.update();
 
     this._adjustSize(this.chartJs.config, this.chartJs.chartArea);
     this.chartJs.update();
@@ -380,10 +478,12 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return true;
   }
 
-  _updateChart(animated) {
-    let config = this.chartJs.config;
-    this._adjustColors(config);
-    this._renderChart(config, animated);
+  refresh() {
+    if (this.chartJs) {
+      this.chartJs.update();
+    } else {
+      super.refresh();
+    }
   }
 
   _renderCheckedItems() {
@@ -431,11 +531,19 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         transferArrayValues(dataset.pointBackgroundColor, dataset.uncheckedPointBackgroundColor, uncheckedIndices) +
         transferArrayValues(dataset.pointHoverBackgroundColor, dataset.uncheckedPointHoverBackgroundColor, uncheckedIndices) +
         transferArrayValues(dataset.pointRadius, dataset.uncheckedPointRadius, uncheckedIndices);
+
+      this._adjustDatasetBorderWidths(dataset);
     });
 
     return 0 < changed;
   }
 
+  stopAnimations() {
+    if (this.chartJs) {
+      this.chartJs.stop();
+    }
+  }
+
   _adjustConfig(config) {
     if (!config || !config.type) {
       return;
@@ -457,10 +565,15 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     if (config.type === Chart.Type.COMBO_BAR_LINE) {
       config.type = Chart.Type.BAR;
 
-      let scaleLabelByTypeMap = ((config.options || {}).scales || {}).scaleLabelByTypeMap;
+      let scaleLabelByTypeMap = (config.options || {}).scaleLabelByTypeMap;
       if (scaleLabelByTypeMap) {
         scaleLabelByTypeMap[Chart.Type.BAR] = scaleLabelByTypeMap[Chart.Type.COMBO_BAR_LINE];
       }
+    } else if (this._isHorizontalBar(config)) {
+      config.type = Chart.Type.BAR;
+      config.options = $.extend(true, {}, config.options, {
+        indexAxis: 'y'
+      });
     }
   }
 
@@ -470,17 +583,15 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
     let setLabelMap = (identifier, labelMap) => {
       if (!$.isEmptyObject(labelMap)) {
-        config.options = $.extend(true, {}, {
-          scales: {}
-        }, config.options);
-        config.options.scales[identifier] = labelMap;
+        config.options[identifier] = labelMap;
       }
     };
 
     (chartData.axes[0] || []).forEach(elem => labels.push(elem.label));
 
-    setLabelMap(config.type === Chart.Type.BAR_HORIZONTAL ? 'yLabelMap' : 'xLabelMap', this._computeLabelMap(chartData.axes[0]));
-    setLabelMap(config.type === Chart.Type.BAR_HORIZONTAL ? 'xLabelMap' : 'yLabelMap', this._computeLabelMap(chartData.axes[1]));
+    let isHorizontalBar = this._isHorizontalBar(config);
+    setLabelMap(isHorizontalBar ? 'yLabelMap' : 'xLabelMap', this._computeLabelMap(chartData.axes[0]));
+    setLabelMap(isHorizontalBar ? 'xLabelMap' : 'yLabelMap', this._computeLabelMap(chartData.axes[1]));
 
     chartData.chartValueGroups.forEach(elem => datasets.push({
       type: elem.type,
@@ -498,6 +609,11 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     };
   }
 
+  _isHorizontalBar(config) {
+    return config && (config.type === Chart.Type.BAR_HORIZONTAL
+      || (config.type === Chart.Type.BAR && config.options && config.options.indexAxis === 'y'));
+  }
+
   _computeLabelMap(axis) {
     let labelMap = {};
     (axis || []).forEach((elem, idx) => {
@@ -518,17 +634,83 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
   }
 
   _adjustBarBorderWidth(config) {
-    if (!config || !config.data || !config.type || !scout.isOneOf(config.type, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL)) {
+    if (!config || !config.data || !config.type || !scout.isOneOf(config.type, Chart.Type.BAR)) {
       return;
     }
 
     config.data.datasets.forEach(dataset => {
       if ((dataset.type || Chart.Type.BAR) === Chart.Type.BAR) {
+        dataset.borderWidth = dataset.borderWidth || 1;
         dataset.hoverBorderWidth = dataset.hoverBorderWidth || 2;
+        this._adjustDatasetBorderWidths(dataset);
       }
     });
   }
 
+  _adjustDatasetBorderWidths(dataset) {
+    this._adjustDatasetBorderWidth(dataset);
+    this._adjustDatasetBorderWidth(dataset, true);
+  }
+
+  /**
+   * Sets the borderWidth to 0 if the backgroundColor and the borderColor are identical and backups the original value.
+   * This method is idempotent as it restores the original state first and then applies its logic.
+   *
+   * @param {Dataset} dataset
+   * @param {boolean?} hover whether hoverBorderWidth, hoverBackgroundColor and hoverBorderColor should be considered instead of borderWidth, backgroundColor and borderColor
+   */
+  _adjustDatasetBorderWidth(dataset, hover) {
+    if (!dataset) {
+      return;
+    }
+    let borderWidthIdentifier = hover ? 'hoverBorderWidth' : 'borderWidth',
+      borderWidthBackupIdentifier = hover ? 'hoverBorderWidthBackup' : 'borderWidthBackup',
+      backgroundColorIdentifier = hover ? 'hoverBackgroundColor' : 'backgroundColor',
+      borderColorIdentifier = hover ? 'hoverBorderColor' : 'borderColor';
+    // restore original state if there is an backup
+    if (dataset[borderWidthBackupIdentifier]) {
+      dataset[borderWidthIdentifier] = dataset[borderWidthBackupIdentifier];
+      delete dataset[borderWidthBackupIdentifier];
+    }
+    // do nothing if there is no borderWidth set on the dataset or the borderWidth is a function
+    if (!dataset[borderWidthIdentifier] || objects.isFunction(dataset[borderWidthIdentifier])) {
+      return;
+    }
+    let isBorderWidthArray = Array.isArray(dataset[borderWidthIdentifier]),
+      isBackgroundColorArray = Array.isArray(dataset[backgroundColorIdentifier]),
+      isBorderColorArray = Array.isArray(dataset[borderColorIdentifier]),
+      isArray = isBorderWidthArray || isBackgroundColorArray || isBorderColorArray;
+    // if none of the properties is an array, simply backup the borderWidth and set it to 0
+    if (!isArray && dataset[backgroundColorIdentifier] === dataset[borderColorIdentifier]) {
+      dataset[borderWidthBackupIdentifier] = dataset[borderWidthIdentifier];
+      dataset[borderWidthIdentifier] = 0;
+      return;
+    }
+    // at least one of the properties is an array, therefore the borderWidth needs to be an array from now on
+    let dataLength = (dataset.data || []).length;
+    if (!isBorderWidthArray) {
+      dataset[borderWidthIdentifier] = arrays.init(dataLength, dataset[borderWidthIdentifier]);
+    } else if (dataset[borderWidthIdentifier].length < dataLength) {
+      dataset[borderWidthIdentifier].push(...arrays.init(dataLength - dataset[borderWidthIdentifier].length, dataset[borderWidthIdentifier][0]));
+    }
+    let borderWidth = dataset[borderWidthIdentifier],
+      length = borderWidth.length,
+      borderWidthBackup = arrays.init(length);
+    for (let i = 0; i < length; i++) {
+      // it makes no difference if the backgroundColor/borderColor is not an array as a not-array-value is applied to every element by chart.js
+      let backgroundColor = isBackgroundColorArray ? dataset[backgroundColorIdentifier][i] : dataset[backgroundColorIdentifier],
+        borderColor = isBorderColorArray ? dataset[borderColorIdentifier][i] : dataset[borderColorIdentifier];
+      borderWidthBackup[i] = borderWidth[i];
+      if (backgroundColor === borderColor) {
+        borderWidth[i] = 0;
+      }
+    }
+    // only set the backup if at least one of the borderWidths changed
+    if (!arrays.equals(borderWidth, borderWidthBackup)) {
+      dataset[borderWidthBackupIdentifier] = borderWidthBackup;
+    }
+  }
+
   _adjustMaxSegments(config) {
     if (!config || !config.data || !config.type || !scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.RADAR)) {
       return;
@@ -565,6 +747,11 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return config.options.maxSegments - 1 <= index;
   }
 
+  /**
+   *  Fill temporary variable z for every bubble, if not yet set, and set bubble radius temporary to 1.
+   *  This allows the chart to render itself with correct dimensions and with no interfering from bubbles (very large bubbles make the chart grid itself smaller).
+   *  Later on in {@link _adjustBubbleSizes}, the bubble sizes will be calculated relative to the chart dimensions and the configured min/max sizes.
+   */
   _adjustBubbleRadii(config) {
     if (!config || !config.data || !config.type || config.type !== Chart.Type.BUBBLE) {
       return;
@@ -573,9 +760,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     config.data.datasets.forEach(dataset => dataset.data.forEach(data => {
       if (!isNaN(data.r)) {
         data.z = Math.pow(data.r, 2);
-      } else if (!isNaN(data.z)) {
-        data.r = Math.sqrt(data.z);
       }
+      data.r = 1;
     }));
   }
 
@@ -599,138 +785,308 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
 
     config.options = $.extend(true, {}, {
-      hover: {
-        mode: 'nearest'
-      },
-      tooltips: {
-        mode: 'nearest',
-        callbacks: {
-          title: this._tooltipTitle,
-          label: this._tooltipLabel,
-          labelColor: this._tooltipLabelColor
+      plugins: {
+        tooltip: {
+          callbacks: {
+            title: this._tooltipTitleGenerator,
+            label: this._tooltipLabelGenerator,
+            labelValue: this._tooltipLabelValueGenerator,
+            labelColor: this._tooltipLabelColorGenerator
+          }
         }
       }
     }, config.options);
+
+    let tooltip = config.options.plugins.tooltip;
+
+    if (!tooltip.enabled) {
+      return;
+    }
+
+    tooltip.enabled = false;
+    tooltip.external = this._tooltipRenderer;
   }
 
-  _formatTooltipTitle(tooltipItems, data) {
-    let config = this.chartJs.config,
-      ctx = this.chartJs.ctx,
-      tooltipItem = tooltipItems[0],
-      title,
-      defaultGlobal = ChartJs.defaults.global,
-      defaultTypeTooltips = {},
-      defaultGlobalTooltips = defaultGlobal.tooltips;
-    if (ChartJs.defaults[config.type]) {
-      defaultTypeTooltips = $.extend(true, {}, defaultTypeTooltips, ChartJs.defaults[config.type].tooltips);
-    }
-    if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.LINE, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.RADAR)) {
-      let label = data.labels[tooltipItem.index];
-      title = config.options.reformatLabels ? this._formatLabel(label) : label;
-    } else if (config.type === Chart.Type.BUBBLE) {
-      let xAxis = config.options.scales.xAxes[0],
-        yAxis = config.options.scales.yAxes[0],
-        xAxisLabel = xAxis.scaleLabel.labelString,
-        yAxisLabel = yAxis.scaleLabel.labelString;
-      xAxisLabel = xAxisLabel ? (xAxisLabel + ':') : ChartJsRenderer.ARROW_LEFT_RIGHT;
-      yAxisLabel = yAxisLabel ? (yAxisLabel + ':') : ' ' + ChartJsRenderer.ARROW_UP_DOWN + ' ';
+  _generateTooltipTitle(tooltipItems) {
+    if (!tooltipItems || !tooltipItems.length) {
+      return '';
+    }
+    let tooltipItem = tooltipItems[0],
+      chart = tooltipItem.chart,
+      config = chart.config,
+      dataset = tooltipItem.dataset,
       title = [];
-      let xTickLabel = xAxis.ticks.callback(tooltipItem.xLabel);
+    if (config.type === Chart.Type.BUBBLE) {
+      let xAxis = config.options.scales.x,
+        yAxis = config.options.scales.y,
+        xAxisLabel = xAxis.title.text,
+        yAxisLabel = yAxis.title.text;
+      xAxisLabel = xAxisLabel ? strings.encode(xAxisLabel) : ChartJsRenderer.ARROW_LEFT_RIGHT;
+      yAxisLabel = yAxisLabel ? strings.encode(yAxisLabel) : '&nbsp;' + ChartJsRenderer.ARROW_UP_DOWN + '&nbsp;';
+      let xTickLabel = xAxis.ticks.callback(dataset.data[tooltipItem.dataIndex].x);
       if (xTickLabel) {
-        title.push(xAxisLabel + ' ' + xTickLabel);
+        title.push(this._createTooltipAttribute(xAxisLabel, strings.encode(xTickLabel), true));
       }
-      let yTickLabel = yAxis.ticks.callback(tooltipItem.yLabel);
+      let yTickLabel = yAxis.ticks.callback(dataset.data[tooltipItem.dataIndex].y);
       if (yTickLabel) {
-        title.push(yAxisLabel + ' ' + yTickLabel);
+        title.push(this._createTooltipAttribute(yAxisLabel, strings.encode(yTickLabel), true));
       }
     } else {
-      let defaultTypeTooltipTitle;
-      if (defaultTypeTooltips.callbacks) {
-        defaultTypeTooltipTitle = defaultTypeTooltips.callbacks.title;
-      }
-      let defaultTooltipTitle = defaultTypeTooltipTitle || defaultGlobalTooltips.callbacks.title;
-      title = defaultTooltipTitle.call(this.chartJs, tooltipItems, data);
-    }
-    let horizontalSpace = this.$canvas.cssWidth() - (2 * config.options.tooltips.xPadding),
-      measureText = ctx.measureText.bind(ctx),
-      oldFont = ctx.font,
-      titleFontStyle = config.options.tooltips.titleFontStyle || defaultTypeTooltips.titleFontStyle || defaultGlobalTooltips.titleFontStyle || defaultGlobal.defaultFontStyle,
-      titleFontSize = config.options.tooltips.titleFontSize || defaultTypeTooltips.titleFontSize || defaultGlobalTooltips.titleFontSize || defaultGlobal.defaultFontSize,
-      titleFontFamily = config.options.tooltips.titleFontFamily || defaultTypeTooltips.titleFontFamily || defaultGlobalTooltips.titleFontFamily || defaultGlobal.defaultFontFamily,
-      result = [];
-    ctx.font = titleFontStyle + ' ' + titleFontSize + 'px ' + titleFontFamily;
-    arrays.ensure(title).forEach(titleLine => result.push(strings.truncateText(titleLine, horizontalSpace, measureText)));
-    ctx.font = oldFont;
-    return result;
-  }
-
-  _formatTooltipLabel(tooltipItem, data) {
-    let config = this.chartJs.config,
-      ctx = this.chartJs.ctx,
-      datasets = data ? data.datasets : null,
-      dataset = datasets ? datasets[tooltipItem.datasetIndex] : null,
-      label, value,
-      defaultGlobal = ChartJs.defaults.global,
-      defaultTypeTooltips = {},
-      defaultGlobalTooltips = defaultGlobal.tooltips;
-    if (ChartJs.defaults[config.type]) {
-      defaultTypeTooltips = $.extend(true, {}, defaultTypeTooltips, ChartJs.defaults[config.type].tooltips);
-    }
-    if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.LINE, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.RADAR)) {
-      label = dataset.label;
-      value = this._formatLabel(dataset.data[tooltipItem.index]);
-    } else if (config.type === Chart.Type.BUBBLE) {
-      label = dataset.label;
-      value = this._formatLabel(dataset.data[tooltipItem.index].z);
-    } else {
-      let defaultTypeTooltipLabel;
-      if (defaultTypeTooltips.callbacks) {
-        defaultTypeTooltipLabel = defaultTypeTooltips.callbacks.label;
-      }
-      let defaultTooltipLabel = defaultTypeTooltipLabel || defaultGlobalTooltips.callbacks.label;
-      label = defaultTooltipLabel.call(this.chartJs, tooltipItem, data);
-    }
-    label = ' ' + label;
-    value = value ? ' ' + value : '';
-    let colorRectSize = config.options.tooltips.displayColors ? config.options.tooltips.bodyFontSize || defaultTypeTooltips.bodyFontSize || defaultGlobalTooltips.bodyFontSize || defaultGlobal.defaultFontSize : 0,
-      horizontalSpace = this.$canvas.cssWidth() - (2 * config.options.tooltips.xPadding) - colorRectSize,
-      measureText = ctx.measureText.bind(ctx),
-      result = label + (value ? ':' + value : '');
-    if (measureText(result).width > horizontalSpace) {
-      if (measureText(value).width > horizontalSpace / 2) {
-        return strings.truncateText(value, horizontalSpace, measureText);
-      }
-      return strings.truncateText(label, horizontalSpace - measureText(value ? ':' + value : '').width, measureText) + (value ? ':' + value : '');
+      let label = chart.data.labels[tooltipItem.dataIndex];
+      title.push(this._createTooltipAttribute(config.options.reformatLabels ? this._formatLabel(label) : label, '', true));
     }
-    return result;
+    return title;
   }
 
-  _computeTooltipLabelColor(tooltipItem, chart) {
-    let config = chart.config,
-      tooltips = config.options ? config.options.tooltips : null,
-      tooltipBackgroundColor = tooltips ? tooltips.backgroundColor : null,
-      datasets = chart.data ? chart.data.datasets : null,
-      dataset = datasets ? datasets[tooltipItem.datasetIndex] : null,
-      backgroundColor;
+  _generateTooltipLabel(tooltipItem) {
+    return strings.encode(tooltipItem.dataset.label);
+  }
+
+  _generateTooltipLabelValue(tooltipItem) {
+    let config = tooltipItem.chart.config,
+      dataset = tooltipItem.dataset;
+    if (config.type === Chart.Type.BUBBLE) {
+      return strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].z));
+    }
+    return strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex]));
+  }
+
+  _generateTooltipLabelColor(tooltipItem) {
+    let config = tooltipItem.chart.config,
+      dataset = tooltipItem.dataset,
+      legendColor, backgroundColor, borderColor, index;
     if (scout.isOneOf((dataset.type || config.type), Chart.Type.LINE, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
-      backgroundColor = dataset.legendColor || dataset.borderColor;
+      borderColor = dataset.borderColor;
+      legendColor = dataset.legendColor;
+      index = tooltipItem.datasetIndex;
     }
     if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
-      let legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[tooltipItem.index] : dataset.legendColor,
-        datasetBackgroundColor = Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[tooltipItem.index] : dataset.backgroundColor;
-      backgroundColor = legendColor || this._adjustColorOpacity(datasetBackgroundColor, 1);
+      legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[tooltipItem.dataIndex] : dataset.legendColor;
+      backgroundColor = Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[tooltipItem.dataIndex] : dataset.backgroundColor;
+      backgroundColor = this._adjustColorOpacity(backgroundColor, 1);
+      index = tooltipItem.dataIndex;
+    }
+    if (objects.isFunction(legendColor)) {
+      legendColor = legendColor.call(tooltipItem.chart, index);
     }
-    if (!backgroundColor || typeof backgroundColor === 'function') {
+    let tooltipLabelColor = legendColor || backgroundColor || borderColor;
+    if (!tooltipLabelColor || objects.isFunction(tooltipLabelColor)) {
       let defaultTypeTooltipLabelColor;
-      if (ChartJs.defaults[config.type] && ChartJs.defaults[config.type].callbacks) {
-        defaultTypeTooltipLabelColor = ChartJs.defaults[config.type].callbacks.labelColor;
+      // noinspection DuplicatedCode
+      if (ChartJs.overrides[config.type] && ChartJs.overrides[config.type].plugins && ChartJs.overrides[config.type].plugins.tooltip && ChartJs.overrides[config.type].plugins.tooltip.callbacks) {
+        defaultTypeTooltipLabelColor = ChartJs.overrides[config.type].plugins.tooltip.callbacks.labelColor;
       }
-      let defaultTooltipLabelColor = defaultTypeTooltipLabelColor || ChartJs.defaults.global.tooltips.callbacks.labelColor;
-      backgroundColor = defaultTooltipLabelColor.call(chart, tooltipItem, chart).backgroundColor;
+      let defaultTooltipLabelColor = defaultTypeTooltipLabelColor || ChartJs.defaults.plugins.tooltip.callbacks.labelColor;
+      tooltipLabelColor = defaultTooltipLabelColor.call(tooltipItem.chart, tooltipItem).backgroundColor;
     }
     return {
-      borderColor: tooltipBackgroundColor,
-      backgroundColor: backgroundColor
+      backgroundColor: tooltipLabelColor
+    };
+  }
+
+  _createTooltipAttribute(label, value, isTitle, color) {
+    let cssClass = isTitle ? 'attribute title' : 'attribute';
+    return '<div class="' + cssClass + '">' +
+      (color ? '<div class="color" style="background-color:' + color + '"></div>' : '') +
+      (label ? '<label>' + label + '</label>' : '') +
+      (value ? '<div class="value">' + value + '</div>' : '') +
+      '</div>';
+  }
+
+  _renderTooltip(context) {
+    let isHideTooltip = context.tooltip.opacity === 0 || context.tooltip._tooltipItems.length < 1;
+    if (isHideTooltip) {
+      if (this._tooltipTimeoutId) {
+        clearTimeout(this._tooltipTimeoutId);
+        this._tooltipTimeoutId = undefined;
+      }
+      if (this._tooltip) {
+        this._tooltip.destroy();
+        this._tooltip = null;
+      }
+      return;
+    }
+
+    let isTooltipShowing = !!this._tooltip;
+    if (isTooltipShowing) {
+      this._renderTooltipLater(context);
+    } else {
+      this._tooltipTimeoutId = setTimeout(() => this._renderTooltipLater(context), tooltips.DEFAULT_TOOLTIP_DELAY);
+    }
+  }
+
+  _renderTooltipLater(context) {
+    if (!this.rendered || this.removing) {
+      return;
+    }
+    let tooltip = context.tooltip,
+      tooltipItems = tooltip._tooltipItems;
+    if (tooltipItems.length < 1) {
+      return;
+    }
+    if (this._tooltip) {
+      this._tooltip.destroy();
+      this._tooltip = null;
+    }
+
+    let tooltipOptions = tooltip.options || {},
+      tooltipCallbacks = tooltipOptions.callbacks || {},
+      tooltipTitle = tooltipCallbacks.title,
+      tooltipLabel = tooltipCallbacks.label,
+      tooltipLabelValue = tooltipCallbacks.labelValue,
+      tooltipColor = tooltipCallbacks.labelColor,
+      tooltipText = '';
+
+    if (objects.isFunction(tooltipTitle)) {
+      tooltipText += arrays.ensure(tooltipTitle(tooltipItems)).join('');
+    }
+    tooltipItems.forEach(tooltipItem => {
+      let label, labelValue, labelColor;
+      if (objects.isFunction(tooltipLabel)) {
+        label = tooltipLabel(tooltipItem);
+        label = objects.isString(label) ? label : '';
+      }
+      if (objects.isFunction(tooltipLabelValue)) {
+        labelValue = tooltipLabelValue(tooltipItem);
+        labelValue = objects.isString(labelValue) ? labelValue : '';
+      }
+      if (objects.isFunction(tooltipColor)) {
+        labelColor = tooltipColor(tooltipItem);
+        labelColor = objects.isPlainObject(labelColor) ? (labelColor.backgroundColor || '') : '';
+      }
+      tooltipText += this._createTooltipAttribute(label, labelValue, false, labelColor);
+    });
+
+    let positionAndOffset = this._computeTooltipPositionAndOffset(tooltipItems[0]),
+      origin = graphics.offsetBounds(this.$canvas);
+    origin.x += tooltip.caretX + positionAndOffset.offsetX;
+    origin.y += tooltip.caretY + positionAndOffset.offsetY;
+    // Tooltip adds origin.height to origin.y in 'bottom' mode, but origin.y is already the correct value for 'top' and 'bottom' mode
+    origin.height = 0;
+
+    this._tooltip = scout.create({
+      objectType: 'Tooltip',
+      parent: this.chart,
+      $anchor: this.$canvas,
+      text: tooltipText,
+      htmlEnabled: true,
+      cssClass: strings.join(' ', 'chart-tooltip', tooltipOptions.cssClass),
+      tooltipPosition: positionAndOffset.tooltipPosition,
+      tooltipDirection: positionAndOffset.tooltipDirection,
+      origin: origin
+    });
+    this._tooltip.render();
+
+    this._tooltip.$container
+      .css('pointer-events', 'none');
+
+    if ((tooltipOptions.titleFont || {}).family) {
+      this._tooltip.$container
+        .css('--chart-tooltip-font-family', tooltipOptions.titleFont.family);
+    }
+
+    let maxLabelPrefSize = 0;
+    this._tooltip.$container.find('label').each((idx, elem) => maxLabelPrefSize = Math.max(maxLabelPrefSize, graphics.prefSize($(elem)).width));
+    if (maxLabelPrefSize > 0) {
+      this._tooltip.$container
+        .css('--chart-tooltip-label-width', Math.min(maxLabelPrefSize, 120) + 'px');
+    }
+  }
+
+  _computeTooltipPositionAndOffset(tooltipItem) {
+    let tooltipPosition = 'top',
+      tooltipDirection = 'right',
+      offsetX = 0,
+      offsetY = 0;
+
+    let chart = tooltipItem.chart,
+      datasetIndex = tooltipItem.datasetIndex,
+      dataIndex = tooltipItem.dataIndex,
+      config = chart.config,
+      datasets = config.data.datasets,
+      dataset = datasets[datasetIndex],
+      value = dataset.data[dataIndex];
+
+    if (this._isHorizontalBar(config)) {
+      tooltipDirection = value < 0 ? 'left' : 'right';
+    } else if ((dataset.type || config.type) === Chart.Type.BAR) {
+      tooltipPosition = value < 0 ? 'bottom' : 'top';
+    } else if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
+      // noinspection JSValidateTypes
+      /**
+       * @type ArcElement
+       */
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      let startAngle = element.startAngle,
+        endAngle = element.endAngle,
+        angle = (startAngle + endAngle) / 2;
+      tooltipPosition = (0 <= angle && angle < Math.PI) ? 'bottom' : 'top';
+      tooltipDirection = (-Math.PI / 2 <= angle && angle < Math.PI / 2) ? 'right' : 'left';
+    } else if (config.type === Chart.Type.RADAR) {
+      // noinspection JSValidateTypes
+      /**
+       * @type PointElement
+       */
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      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 === Chart.Type.BUBBLE) {
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      let chartArea = chart.chartArea,
+        mid = chartArea.left + (chartArea.width / 2);
+      tooltipDirection = element.x < mid ? 'left' : 'right';
+    }
+
+    if (this._isHorizontalBar(config)) {
+      // noinspection JSValidateTypes
+      /**
+       * @type BarElement
+       */
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      let height = element.height,
+        width = element.width,
+        // golden ratio: (a + b) / a = a / b = PHI
+        // and a + b = width
+        // -> b = width / (PHI + 1)
+        b = width / (PHI + 1);
+
+      offsetY = -height / 2;
+      offsetX = tooltipDirection === 'left' ? b : -b;
+    } else if (scout.isOneOf(config.type, Chart.Type.LINE, Chart.Type.BUBBLE, Chart.Type.RADAR) || dataset.type === Chart.Type.LINE) {
+      // noinspection JSValidateTypes
+      /**
+       * @type PointElement
+       */
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      let options = element.options,
+        offset = options.hoverRadius + options.hoverBorderWidth;
+      if (config.type === Chart.Type.BUBBLE) {
+        offset += value.r;
+      }
+
+      offsetY = tooltipPosition === 'top' ? -offset : offset;
+    } else if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
+      // noinspection JSValidateTypes
+      /**
+       * @type ArcElement
+       */
+      let element = chart.getDatasetMeta(datasetIndex).data[dataIndex];
+      let startAngle = element.startAngle,
+        endAngle = element.endAngle,
+        angle = (startAngle + endAngle) / 2,
+        innerRadius = element.innerRadius,
+        outerRadius = element.outerRadius,
+        offset = (outerRadius - innerRadius) / 2;
+      offsetX = offset * Math.cos(angle);
+      offsetY = offset * Math.sin(angle);
+    }
+
+    return {
+      tooltipPosition: tooltipPosition,
+      tooltipDirection: tooltipDirection,
+      offsetX: offsetX,
+      offsetY: offsetY
     };
   }
 
@@ -741,139 +1097,140 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
     config.options = $.extend(true, {}, config.options);
 
-    this._adjustScale(config);
-    this._adjustScales(config);
+    this._adjustScalesR(config);
+    this._adjustScalesXY(config);
   }
 
-  _adjustScale(config) {
+  _adjustScalesR(config) {
     if (!config || !config.type || !config.options) {
       return;
     }
 
     if (scout.isOneOf(config.type, Chart.Type.POLAR_AREA, Chart.Type.RADAR)) {
       config.options = $.extend(true, {}, {
-        scale: {}
+        scales: {
+          r: {}
+        }
       }, config.options);
     }
 
-    let options = config.options;
-    if (options.scale) {
-      options.scale = $.extend(true, {}, {
+    let options = config.options,
+      scales = options ? options.scales : {};
+    if (scales && scales.r) {
+      scales.r = $.extend(true, {}, {
+        minSpaceBetweenTicks: 35,
+        beginAtZero: true,
         angleLines: {
           display: false
         },
-        gridLines: {
-          borderDash: [2, 4]
-        },
         ticks: {
-          beginAtZero: true,
           callback: this._labelFormatter
         },
         pointLabels: {
-          fontSize: ChartJs.defaults.global.defaultFontSize
+          font: {
+            size: ChartJs.defaults.font.size
+          }
         }
-      }, options.scale);
+      }, scales.r);
     }
   }
 
-  _adjustScales(config) {
+  _adjustScalesXY(config) {
     if (!config || !config.type || !config.options) {
       return;
     }
 
-    if (scout.isOneOf(config.type, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.LINE, Chart.Type.BUBBLE)) {
+    if (scout.isOneOf(config.type, Chart.Type.BAR, Chart.Type.LINE, Chart.Type.BUBBLE)) {
       config.options = $.extend(true, {}, {
         scales: {
-          xAxes: [{}],
-          yAxes: [{}]
+          x: {
+            minSpaceBetweenTicks: 150
+          },
+          y: {
+            minSpaceBetweenTicks: 35
+          }
         }
       }, config.options);
     }
 
-    this._adjustXAxes(config);
-    this._adjustYAxes(config);
+    this._adjustXAxis(config);
+    this._adjustYAxis(config);
   }
 
-  _adjustXAxes(config) {
-    if (!config || !config.type || !config.options || !config.options.scales || !config.options.scales.xAxes) {
+  _adjustXAxis(config) {
+    if (!config || !config.type || !config.options || !config.options.scales || !config.options.scales.x) {
       return;
     }
 
     let type = config.type,
-      xAxes = config.options.scales.xAxes;
-
-    for (let i = 0; i < xAxes.length; i++) {
-      if (scout.isOneOf(type, Chart.Type.BAR_HORIZONTAL, Chart.Type.BUBBLE)) {
-        xAxes[i] = $.extend(true, {}, {
-          offset: type === Chart.Type.BUBBLE,
-          gridLines: {
-            drawBorder: false,
-            drawTicks: false,
-            zeroLineBorderDash: [2, 4],
-            borderDash: [2, 4]
-          },
-          ticks: {
-            padding: 5,
-            beginAtZero: type === Chart.Type.BAR_HORIZONTAL
-          }
-        }, xAxes[i]);
-      } else {
-        xAxes[i] = $.extend(true, {}, {
-          offset: true,
-          gridLines: {
-            display: false
-          }
-        }, xAxes[i]);
-      }
-      if (scout.isOneOf(type, Chart.Type.BAR_HORIZONTAL, Chart.Type.BUBBLE) || config.options.reformatLabels) {
-        xAxes[i] = $.extend(true, {}, {
-          ticks: {
-            callback: this._xLabelFormatter
-          }
-        }, xAxes[i]);
-      }
-      xAxes[i].afterCalculateTickRotation = this._xAxisFitter;
+      scales = config.options.scales;
+
+    if (this._isHorizontalBar(config) || type === Chart.Type.BUBBLE) {
+      scales.x = $.extend(true, {}, {
+        beginAtZero: this._isHorizontalBar(config),
+        offset: type === Chart.Type.BUBBLE,
+        grid: {
+          drawBorder: false,
+          drawTicks: false
+        },
+        ticks: {
+          padding: 5
+        }
+      }, scales.x);
+    } else {
+      scales.x = $.extend(true, {}, {
+        offset: true,
+        grid: {
+          display: false,
+          drawBorder: false
+        }
+      }, scales.x);
     }
+    if (this._isHorizontalBar(config) || type === Chart.Type.BUBBLE || config.options.reformatLabels) {
+      scales.x = $.extend(true, {}, {
+        ticks: {
+          callback: this._xLabelFormatter
+        }
+      }, scales.x);
+    }
+    scales.x.afterCalculateLabelRotation = this._xAxisFitter;
   }
 
-  _adjustYAxes(config) {
-    if (!config || !config.type || !config.options || !config.options.scales || !config.options.scales.yAxes) {
+  _adjustYAxis(config) {
+    if (!config || !config.type || !config.options || !config.options.scales || !config.options.scales.y) {
       return;
     }
 
     let type = config.type,
-      yAxes = config.options.scales.yAxes;
+      scales = config.options.scales;
 
-    for (let i = 0; i < yAxes.length; i++) {
-      if (type === Chart.Type.BAR_HORIZONTAL) {
-        yAxes[i] = $.extend(true, {}, {
-          gridLines: {
-            display: false
-          }
-        }, yAxes[i]);
-      } else {
-        yAxes[i] = $.extend(true, {}, {
-          gridLines: {
-            drawBorder: false,
-            drawTicks: false,
-            zeroLineBorderDash: [2, 4],
-            borderDash: [2, 4]
-          },
-          ticks: {
-            padding: 5,
-            beginAtZero: type !== Chart.Type.BUBBLE
-          }
-        }, yAxes[i]);
-      }
-      if (type !== Chart.Type.BAR_HORIZONTAL || config.options.reformatLabels) {
-        yAxes[i] = $.extend(true, {}, {
-          ticks: {
-            callback: this._yLabelFormatter
-          }
-        }, yAxes[i]);
-      }
-      yAxes[i].afterFit = this._yAxisFitter;
+    if (this._isHorizontalBar(config)) {
+      scales.y = $.extend(true, {}, {
+        grid: {
+          display: false,
+          drawBorder: false
+        }
+      }, scales.y);
+    } else {
+      scales.y = $.extend(true, {}, {
+        beginAtZero: type !== Chart.Type.BUBBLE,
+        grid: {
+          drawBorder: false,
+          drawTicks: false
+        },
+        ticks: {
+          padding: 5
+        }
+      }, scales.y);
     }
+    if (!this._isHorizontalBar(config) || config.options.reformatLabels) {
+      scales.y = $.extend(true, {}, {
+        ticks: {
+          callback: this._yLabelFormatter
+        }
+      }, scales.y);
+    }
+    scales.y.afterFit = this._yAxisFitter;
   }
 
   _adjustPlugins(config) {
@@ -891,10 +1248,61 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         formatter: this._radialChartDatalabelsFormatter
       }, plugins.datalabels);
       plugins.datalabels.display = this._radialChartDatalabelsDisplayHandler;
-    } else if (scout.isOneOf(config.type, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.LINE, Chart.Type.POLAR_AREA, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
+      // since the this._radialChartDatalabelsDisplayHandler depends on values that are animated, we need to update the labels during the animation
+      this._updatingDatalabels = false;
+      let animation = config.options.animation || {},
+        onProgress = animation.onProgress,
+        onComplete = animation.onComplete,
+        updateDatalabels = animation => {
+          if (this._updatingDatalabels) {
+            return;
+          }
+          this._updatingDatalabels = true;
+          // invert the _actives of the datalabel plugin and call its afterEvent-hook
+          // this hook will update its _actives to chart.getActiveElements() and recalculate the labels for all elements that changed
+          // setting _actives to the complement of chart.getActiveElements() guarantees that all labels are updated
+          let chart = animation.chart,
+            metas = chart.getSortedVisibleDatasetMetas(),
+            activeElements = [...chart.getActiveElements()],
+            inactiveElements = [];
+
+          metas.forEach((meta, datasetIndex) => {
+            meta.data.forEach((element, index) => {
+              let activeIndex = arrays.findIndex(activeElements, activeElement => activeElement.datasetIndex === datasetIndex && activeElement.index === index);
+              if (activeIndex > 0) {
+                activeElements.splice(activeIndex, 1);
+              } else {
+                inactiveElements.push({
+                  datasetIndex: datasetIndex,
+                  index: index,
+                  element: element
+                });
+              }
+            });
+          });
+
+          // the datalabels plugin stores its data on the chart in $datalabels (see EXPANDO_KEY in chartjs-plugin-datalabels)
+          chart['$' + ChartDataLabels.id]._actives = inactiveElements;
+          // noinspection JSCheckFunctionSignatures
+          ChartDataLabels.afterEvent(chart);
+          this._updatingDatalabels = false;
+        },
+        updateDatalabelsAndDefaultCallback = (animation, defaultCallback) => {
+          updateDatalabels(animation);
+          if (defaultCallback) {
+            defaultCallback(animation);
+          }
+        };
+
+      config.options.animation = $.extend(true, {}, config.options.animation, {
+        onProgress: animation => updateDatalabelsAndDefaultCallback(animation, onProgress),
+        onComplete: animation => updateDatalabelsAndDefaultCallback(animation, onComplete)
+      });
+
+    } else if (scout.isOneOf(config.type, Chart.Type.BAR, Chart.Type.LINE, Chart.Type.POLAR_AREA, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
       plugins.datalabels = $.extend(true, {}, {
         backgroundColor: this._datalabelBackgroundColorHandler,
-        borderRadius: 4
+        borderRadius: 3
       }, plugins.datalabels);
       plugins.datalabels.display = 'auto';
     }
@@ -951,8 +1359,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
   }
 
   _getLabelMap(identifier) {
-    if (this.chartJs && this.chartJs.config && this.chartJs.config.options && this.chartJs.config.options.scales) {
-      return this.chartJs.config.options.scales[identifier];
+    if (this.chartJs && this.chartJs.config && this.chartJs.config.options) {
+      return this.chartJs.config.options[identifier];
     }
   }
 
@@ -996,13 +1404,17 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return this.session.locale.decimalFormat.format(Math.sign(label) * abs) + abbreviation;
   }
 
+  /**
+   * @param {Scale} xAxis
+   */
   _fitXAxis(xAxis) {
     if (!xAxis || xAxis.labelRotation === 0) {
       return;
     }
     let maxHeight = this.maxXAxesTicksHeigth,
-      defaultGlobal = ChartJs.defaults.global,
-      defaultTicks = ChartJs.defaults.scale.ticks,
+      fontDefaults = ChartJs.defaults.font,
+      ticksDefaults = ChartJs.defaults.scale.ticks,
+      ticksFontDefaults = ticksDefaults.font || {},
       fontSize,
       maxRotation;
     if (this.chartJs) {
@@ -1012,10 +1424,11 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
     if (xAxis.options && xAxis.options.ticks) {
       maxRotation = xAxis.options.ticks.maxRotation;
-      fontSize = xAxis.options.ticks.fontSize;
+      let ticksFont = xAxis.options.ticks.font || {};
+      fontSize = ticksFont.size;
     }
-    maxRotation = maxRotation || defaultTicks.maxRotation;
-    fontSize = fontSize || defaultTicks.fontSize || defaultGlobal.defaultFontSize;
+    maxRotation = maxRotation || ticksDefaults.maxRotation;
+    fontSize = fontSize || ticksFontDefaults.size || fontDefaults.size;
     // if the chart is very narrow, chart.js sometimes calculates with a negative width of the canvas
     // this causes NaN for labelRotation and height
     if (isNaN(xAxis.labelRotation)) {
@@ -1028,13 +1441,15 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       // => height = sin(labelRotation) * labelLength + sin(90° - labelRotation) * fontSize
       // <=> labelLength = (height - sin(90° - labelRotation) * fontSize) / sin(labelRotation)
       maxLabelLength = (maxHeight - (fontSize * Math.sin(((90 - labelRotation) / 180) * Math.PI))) / Math.sin((labelRotation / 180) * Math.PI);
-    if (xAxis.longestLabelWidth > maxLabelLength) {
+    let labelSizes = xAxis._labelSizes || {},
+      widest = labelSizes.widest || {};
+    if (widest.width > maxLabelLength) {
       let measureText = xAxis.ctx.measureText.bind(xAxis.ctx);
-      xAxis._ticks.forEach(tick => {
+      xAxis.ticks.forEach(tick => {
         tick.label = strings.truncateText(tick.label, maxLabelLength, measureText);
       });
       // reset label sizes, chart.js will recalculate them using the new truncated labels
-      xAxis._labelSizes = null;
+      xAxis._labelSizes = undefined;
     }
   }
 
@@ -1043,36 +1458,41 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       return;
     }
     let padding = 0,
-      tickMarkLength = 0;
+      tickLength = 0;
     if (yAxis.options && yAxis.options.ticks) {
       padding = yAxis.options.ticks.padding || 0;
     }
-    if (yAxis.options && yAxis.options.gridLines) {
-      tickMarkLength = yAxis.options.gridLines.tickMarkLength || 0;
+    if (yAxis.options && yAxis.options.grid) {
+      tickLength = yAxis.options.grid.tickLength || 0;
     }
-    if (yAxis.longestLabelWidth > yAxis.maxWidth - padding) {
-      let horizontalSpace = yAxis.maxWidth - padding - tickMarkLength,
+    let labelSizes = yAxis._labelSizes || {},
+      widest = labelSizes.widest || {};
+    if (widest.width > yAxis.maxWidth - padding) {
+      let horizontalSpace = yAxis.maxWidth - padding - tickLength,
         measureText = yAxis.ctx.measureText.bind(yAxis.ctx);
-      yAxis._ticks.forEach(tick => {
+      yAxis.ticks.forEach(tick => {
         tick.label = strings.truncateText(tick.label, horizontalSpace, measureText);
       });
     }
   }
 
   _displayDatalabelsOnRadialChart(context) {
-    let data = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex],
-      model = data._model,
-      // Compute the biggest circle that fits inside sector/arc with center in the middle between inner and outer radius.
-      // First compute a circle C1 that touches the straight boundaries of the sector/arc. Then compute a circle C2 that touches the inner and the outer radius.
-      // The smaller one of these two circles is the biggest possible circle that fits inside sector/arc with center in the middle between inner and outer radius.
-      // circle C1:
-      midRadius = (model.outerRadius + model.innerRadius) / 2,
+    // noinspection JSValidateTypes
+    /**
+     * @type ArcElement
+     */
+    let element = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex];
+    // Compute the biggest circle that fits inside sector/arc with center in the middle between inner and outer radius.
+    // First compute a circle C1 that touches the straight boundaries of the sector/arc. Then compute a circle C2 that touches the inner and the outer radius.
+    // The smaller one of these two circles is the biggest possible circle that fits inside sector/arc with center in the middle between inner and outer radius.
+    // circle C1:
+    let midRadius = (element.outerRadius + element.innerRadius) / 2,
       // If the difference between the angles is greater than pi, it is no longer possible for a circle to be inside the sector/arc and touch both straight boundaries.
-      angle = Math.min((model.endAngle - model.startAngle), Math.PI) / 2,
+      angle = Math.min((element.endAngle - element.startAngle), Math.PI) / 2,
       radius1 = Math.abs(Math.sin(angle)) * midRadius,
       diameter1 = radius1 * 2,
       // circle C2:
-      diameter2 = model.outerRadius - model.innerRadius;
+      diameter2 = element.outerRadius - element.innerRadius;
     return Math.min(diameter1, diameter2) > this.minRadialChartDatalabelSpace;
   }
 
@@ -1092,10 +1512,10 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
   _computeSumOfVisibleElements(context) {
     let dataset = context.dataset,
-      meta = context.chart.getDatasetMeta(context.datasetIndex),
+      chart = context.chart,
       sum = 0;
     for (let i = 0; i < dataset.data.length; i++) {
-      if (meta.data[i] && !meta.data[i].hidden) {
+      if (chart.getDataVisibility(i)) {
         sum += dataset.data[i];
       }
     }
@@ -1117,9 +1537,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     this._adjustColorSchemeCssClass(config);
     this._adjustDatasetColors(config);
     this._adjustLegendColors(config);
-    this._adjustTooltipColors(config);
-    this._adjustScaleColors(config);
-    this._adjustScalesColors(config);
+    this._adjustScalesRColors(config);
+    this._adjustScalesXYColors(config);
     this._adjustPluginColors(config);
   }
 
@@ -1148,7 +1567,7 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         checkedBackgroundColors: [],
         checkedHoverBackgroundColors: [],
         legendColors: [],
-        pointHoverColor: this._computePointHoverColor(type)
+        pointHoverColors: []
       };
 
     colors = $.extend(true, colors, this._computeDatasetColors(config, multipleColorsPerDataset));
@@ -1159,9 +1578,12 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         hoverBackgroundColor = (multipleColorsPerDataset ? colors.hoverBackgroundColors : colors.hoverBackgroundColors[idx]),
         hoverBorderColor = (multipleColorsPerDataset ? colors.hoverBorderColors : colors.hoverBorderColors[idx]),
         legendColor = (multipleColorsPerDataset ? colors.legendColors : colors.legendColors[idx]),
-        pointHoverBackgroundColor = colors.pointHoverColor;
+        pointHoverBackgroundColor = (multipleColorsPerDataset ? colors.pointHoverColors : colors.legendColors[idx]);
 
       let setProperty = (identifier, value) => {
+        if (typeof elem[identifier] === 'function') {
+          return;
+        }
         if (value && value.length) {
           elem[identifier] = Array.isArray(value) ? [...value] : value;
         }
@@ -1171,10 +1593,14 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       setProperty('hoverBackgroundColor', hoverBackgroundColor);
       setProperty('hoverBorderColor', hoverBorderColor);
       setProperty('legendColor', legendColor);
-      setProperty('pointHoverBackgroundColor', pointHoverBackgroundColor);
+      if (scout.isOneOf(type, Chart.Type.LINE, Chart.Type.RADAR) || (type === Chart.Type.BAR && elem.type === Chart.Type.LINE)) {
+        setProperty('pointHoverBackgroundColor', pointHoverBackgroundColor);
+        setProperty('pointBorderColor', this.firstOpaqueBackgroundColor);
+        setProperty('pointHoverBorderColor', this.firstOpaqueBackgroundColor);
+      }
       if (checkable) {
         let datasetLength = elem.data.length;
-        if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.BAR_HORIZONTAL, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.BUBBLE) || (type === Chart.Type.BAR && (elem.type || Chart.Type.BAR) === Chart.Type.BAR)) {
+        if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.BUBBLE) || (type === Chart.Type.BAR && (elem.type || Chart.Type.BAR) === Chart.Type.BAR)) {
           let uncheckedBackgroundColor = (multipleColorsPerDataset ? colors.backgroundColors : arrays.init(datasetLength, colors.backgroundColors[idx])),
             uncheckedHoverBackgroundColor = (multipleColorsPerDataset ? colors.hoverBackgroundColors : arrays.init(datasetLength, colors.hoverBackgroundColors[idx])),
 
@@ -1201,24 +1627,21 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
           setProperty('pointBackgroundColor', elem.uncheckedPointBackgroundColor);
           setProperty('pointHoverBackgroundColor', elem.uncheckedPointHoverBackgroundColor);
 
-          let uncheckedPointRadius = arrays.init(datasetLength, ((config.options.elements || {}).point || {}).radius || ChartJs.defaults.global.elements.point.radius),
-            checkedPointRadius = arrays.init(datasetLength, ((config.options.elements || {}).point || {}).hoverRadius || ChartJs.defaults.global.elements.point.hoverRadius);
+          let uncheckedPointRadius = arrays.init(datasetLength, ((config.options.elements || {}).point || {}).radius || ChartJs.defaults.elements.point.radius),
+            checkedPointRadius = arrays.init(datasetLength, (((config.options.elements || {}).point || {}).hoverRadius || ChartJs.defaults.elements.point.hoverRadius) - 1);
           setProperty('uncheckedPointRadius', uncheckedPointRadius);
           setProperty('checkedPointRadius', checkedPointRadius);
 
           setProperty('pointRadius', elem.uncheckedPointRadius);
         }
       }
+      this._adjustDatasetBorderWidths(elem);
     });
     if (checkable) {
       this._checkItems(config);
     }
   }
 
-  _computePointHoverColor(type) {
-    return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'point hover'], 'fill').fill;
-  }
-
   _computeDatasetColors(config, multipleColorsPerDataset) {
     if (!config || !config.data || !config.type) {
       return {};
@@ -1258,7 +1681,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         hoverBorderColors: [],
         checkedBackgroundColors: [],
         checkedHoverBackgroundColors: [],
-        legendColors: []
+        legendColors: [],
+        pointHoverColors: []
       };
 
     let types = [];
@@ -1277,6 +1701,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       colors.checkedHoverBackgroundColors.push(this._computeCheckedHoverBackgroundColor(type, index, checkable));
 
       colors.legendColors.push(this._computeLegendColor(type, index));
+
+      colors.pointHoverColors.push(this._computePointHoverColor(type, index));
     });
 
     return colors;
@@ -1318,6 +1744,10 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'color' + (index % this.numSupportedColors) + ' legend'], 'fill').fill;
   }
 
+  _computePointHoverColor(type, index) {
+    return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'color' + (index % this.numSupportedColors) + ' point hover'], 'fill').fill;
+  }
+
   _computeDatasetColorsChartValueGroups(config, multipleColorsPerDataset) {
     if (!config || !config.type || !this.chart.data) {
       return {};
@@ -1333,7 +1763,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
         hoverBorderColors: [],
         checkedBackgroundColors: [],
         checkedHoverBackgroundColors: [],
-        legendColors: []
+        legendColors: [],
+        pointHoverColors: []
       };
 
     this.chart.data.chartValueGroups.forEach(elem => {
@@ -1392,6 +1823,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       colors.checkedHoverBackgroundColors.push(adjustColor(checkedHoverBackgroundOpacity, checkedHoverBackgroundDarker));
 
       colors.legendColors.push(adjustColor(1, 0));
+
+      colors.pointHoverColors.push(adjustColor(1, 0));
     });
     colors.datalabelColor = this._computeDatalabelColor(type);
 
@@ -1434,10 +1867,12 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
 
     config.options = $.extend(true, {}, config.options, {
-      legend: {
-        labels: {
-          fontColor: this._computeLabelColor(config.type),
-          generateLabels: this._legendLabelGenerator
+      plugins: {
+        legend: {
+          labels: {
+            color: this._computeLabelColor(config.type),
+            generateLabels: this._legendLabelGenerator
+          }
         }
       }
     });
@@ -1449,33 +1884,50 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
   _generateLegendLabels(chart) {
     let config = chart.config,
-      data = config.data,
+      defaultTypeGenerateLabels;
+    // noinspection DuplicatedCode
+    if (ChartJs.overrides[config.type] && ChartJs.overrides[config.type].plugins && ChartJs.overrides[config.type].plugins.legend && ChartJs.overrides[config.type].plugins.legend.labels) {
+      defaultTypeGenerateLabels = ChartJs.overrides[config.type].plugins.legend.labels.generateLabels;
+    }
+    let defaultGenerateLabels = defaultTypeGenerateLabels || ChartJs.defaults.plugins.legend.labels.generateLabels;
+    let labels = defaultGenerateLabels.call(chart, chart);
+    if (this.removing) {
+      return labels;
+    }
+    let data = config.data,
       measureText = chart.ctx.measureText.bind(chart.ctx),
+      legend = chart.legend,
+      legendLabelOptions = ((legend || {}).options || {}).labels || {},
+      boxWidth = legendLabelOptions.boxWidth || 0,
+      padding = legendLabelOptions.padding || 0,
       horizontalSpace;
-    if (scout.isOneOf(config.options.legend.position, Chart.Position.LEFT, Chart.Position.RIGHT)) {
-      horizontalSpace = Math.min(250, this.$canvas.cssWidth() / 3);
+    if (scout.isOneOf(config.options.plugins.legend.position, Chart.Position.LEFT, Chart.Position.RIGHT)) {
+      if (legend.maxWidth || legend.width) {
+        horizontalSpace = Math.max((legend.maxWidth || legend.width) - boxWidth - 2 * padding, 0);
+      }
+      horizontalSpace = Math.min(250, horizontalSpace || 0, this.$canvas.cssWidth() / 3);
+
     } else {
       horizontalSpace = Math.min(250, this.$canvas.cssWidth() * 2 / 3);
     }
-    let defaultTypeGenerateLabels;
-    if (ChartJs.defaults[config.type] && ChartJs.defaults[config.type].legend && ChartJs.defaults[config.type].legend.labels) {
-      defaultTypeGenerateLabels = ChartJs.defaults[config.type].legend.labels.generateLabels;
-    }
-    let defaultGenerateLabels = defaultTypeGenerateLabels || ChartJs.defaults.global.legend.labels.generateLabels;
-    let labels = defaultGenerateLabels.call(chart, chart);
     labels.forEach((elem, idx) => {
       elem.text = strings.truncateText(elem.text, horizontalSpace, measureText);
       let dataset = data.datasets[idx],
-        fillStyle;
-      if (dataset && scout.isOneOf((dataset.type || config.type), Chart.Type.LINE, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
-        fillStyle = dataset.legendColor || this._adjustColorOpacity(dataset.borderColor, 1);
+        legendColor, borderColor, backgroundColor;
+      if (dataset && scout.isOneOf((dataset.type || config.type), Chart.Type.LINE, Chart.Type.BAR, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
+        legendColor = dataset.legendColor;
+        borderColor = this._adjustColorOpacity(dataset.borderColor, 1);
       } else if (data.datasets.length && scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
         dataset = data.datasets[0];
-        let legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[idx] : dataset.legendColor,
-          backgroundColor = Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[idx] : dataset.backgroundColor;
-        fillStyle = legendColor || this._adjustColorOpacity(backgroundColor, 1);
+        legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[idx] : dataset.legendColor;
+        backgroundColor = Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[idx] : dataset.backgroundColor;
+        backgroundColor = this._adjustColorOpacity(backgroundColor, 1);
+      }
+      if (objects.isFunction(legendColor)) {
+        legendColor = legendColor.call(chart, idx);
       }
-      if (typeof fillStyle !== 'function') {
+      let fillStyle = legendColor || backgroundColor || borderColor;
+      if (!objects.isFunction(fillStyle)) {
         elem.fillStyle = fillStyle;
         elem.strokeStyle = fillStyle;
       }
@@ -1483,48 +1935,24 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return labels;
   }
 
-  _adjustTooltipColors(config) {
-    if (!config || !config.type || !config.options) {
-      return;
-    }
-
-    let tooltipBackgroundColor = this._computeTooltipBackgroundColor(config.type),
-      tooltipBorderColor = this._computeTooltipBorderColor(config.type);
-
-    config.options = $.extend(true, {}, config.options, {
-      tooltips: {
-        backgroundColor: tooltipBackgroundColor,
-        borderColor: tooltipBorderColor,
-        multiKeyBackground: tooltipBackgroundColor
-      }
-    });
-  }
-
-  _computeTooltipBackgroundColor(type) {
-    return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'tooltip-background'], 'fill').fill;
-  }
-
-  _computeTooltipBorderColor(type) {
-    return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'tooltip-border'], 'fill').fill;
-  }
-
-  _adjustScaleColors(config) {
-    if (!config || !config.type || !config.options || !config.options.scale) {
+  _adjustScalesRColors(config) {
+    if (!config || !config.type || !config.options || !config.options.scales || !config.options.scales.r) {
       return;
     }
 
     let labelColor = this._computeLabelColor(config.type),
       labelBackdropColor = this._computeLabelBackdropColor(config.type),
-      gridColor = this._computeGridColor(config.type);
+      gridColor = this._computeGridColor(config.type),
+      scaleTicksColor = this._computeScaleTicksColor(config.type);
 
-    config.options.scale.ticks = $.extend(true, {}, config.options.scale.ticks, {
-      fontColor: gridColor,
+    config.options.scales.r.ticks = $.extend(true, {}, config.options.scales.r.ticks, {
+      color: scaleTicksColor,
       backdropColor: labelBackdropColor
     });
-    config.options.scale.pointLabels = $.extend(true, {}, config.options.scale.pointLabels, {
-      fontColor: labelColor
+    config.options.scales.r.pointLabels = $.extend(true, {}, config.options.scales.r.pointLabels, {
+      color: labelColor
     });
-    config.options.scale.gridLines = $.extend(true, {}, config.options.scale.gridLines, {
+    config.options.scales.r.grid = $.extend(true, {}, config.options.scales.r.grid, {
       color: gridColor
     });
   }
@@ -1537,14 +1965,22 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'grid'], 'fill').fill;
   }
 
-  _adjustScalesColors(config) {
+  _computeScaleTicksColor(type) {
+    return styles.get([this.colorSchemeCssClass, type + '-chart', 'elements', 'scale-ticks'], 'fill').fill;
+  }
+
+  _adjustScalesXYColors(config) {
     if (!config || !config.type || !config.options || !config.options.scales) {
       return;
     }
 
-    let xAxes = config.options.scales.xAxes || [],
-      yAxes = config.options.scales.yAxes || [],
-      axes = [...xAxes, ...yAxes];
+    let axes = [];
+    if (config.options.scales.x) {
+      axes.push(config.options.scales.x);
+    }
+    if (config.options.scales.y) {
+      axes.push(config.options.scales.y);
+    }
 
     if (!axes.length) {
       return;
@@ -1555,15 +1991,14 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       axisLabelColor = this._computeAxisLabelColor(config.type);
 
     axes.forEach(elem => {
-      elem.gridLines = $.extend(true, {}, elem.gridLines, {
-        zeroLineColor: gridColor,
+      elem.grid = $.extend(true, {}, elem.grid, {
         color: gridColor
       });
       elem.ticks = $.extend(true, {}, elem.ticks, {
-        fontColor: labelColor
+        color: labelColor
       });
-      elem.scaleLabel = $.extend(true, {}, elem.scaleLabel, {
-        fontColor: axisLabelColor
+      elem.title = $.extend(true, {}, elem.title, {
+        color: axisLabelColor
       });
     });
   }
@@ -1606,33 +2041,39 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       config.options.onHover = this._hoverHandler;
     }
 
-    if (!config.options.legend) {
+    if (!config.options.plugins || !config.options.plugins.legend) {
       return;
     }
 
-    if (config.options.legend.clickable) {
-      config.options.legend.onClick = this._legendClickHandler;
-      config.options.legend.onHover = this._legendPointerHoverHandler;
-      config.options.legend.onLeave = this._legendPointerLeaveHandler;
+    let legend = config.options.plugins.legend;
+    if (legend.clickable) {
+      legend.onClick = this._legendClickHandler;
+      legend.onHover = this._legendPointerHoverHandler;
+      legend.onLeave = this._legendPointerLeaveHandler;
     } else {
-      config.options.legend.onClick = e => e.stopPropagation();
-      config.options.legend.onHover = this._legendHoverHandler;
-      config.options.legend.onLeave = this._legendLeaveHandler;
+      legend.onClick = e => e.native.stopPropagation();
+      legend.onHover = this._legendHoverHandler;
+      legend.onLeave = this._legendLeaveHandler;
     }
   }
 
   /**
    * @param {object[]} items
-   * @param {number} items._index
-   * @param {number} items._datasetIndex
+   * @param {number} items.index
+   * @param {number} items.datasetIndex
    */
   _onClick(event, items) {
-    if (!items.length || this._isMaxSegmentsExceeded(this.chartJs.config, items[0]._index)) {
+    if (!items.length) {
+      return;
+    }
+    let relevantItem = this._selectRelevantItem(items);
+
+    if (this._isMaxSegmentsExceeded(this.chartJs.config, relevantItem.index)) {
       return;
     }
 
-    let itemIndex = items[0]._index,
-      datasetIndex = items[0]._datasetIndex,
+    let itemIndex = relevantItem.index,
+      datasetIndex = relevantItem.datasetIndex,
       clickObject = {
         datasetIndex: datasetIndex,
         dataIndex: itemIndex
@@ -1647,10 +2088,34 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
     let e = new Event();
     e.data = clickObject;
-    e.originalEvent = event;
+    e.originalEvent = event.native;
     this.chart._onValueClick(e);
   }
 
+  /**
+   * Selects the most relevant item. Default is the first item.
+   *
+   * @param {object[]} items
+   * @param {number} items.index
+   * @param {number} items.datasetIndex
+   * @private
+   */
+  _selectRelevantItem(items) {
+    let chartDatasets = this.chartJs.config.data.datasets;
+    let relevantItem = items[0];
+
+    if (this.chartJs.config.type === Chart.Type.BUBBLE) {
+      // The smallest bubble, which is drawn in the foreground, is the most relevant item for the bubble chart.
+      // If two bubbles are the same size, we choose the one which comes later in the array (bubble with array index n + 1 is draw in front of bubble with array index n)
+      items.forEach(item => {
+        if (chartDatasets[item.datasetIndex].data[item.index].z <= chartDatasets[relevantItem.datasetIndex].data[relevantItem.index].z) {
+          relevantItem = item;
+        }
+      });
+    }
+    return relevantItem;
+  }
+
   _onHover(event, items) {
     if (!this.chartJs.config || !this.chartJs.config.type) {
       return;
@@ -1664,14 +2129,14 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
     let update = false;
     if (this.resetDatasetAfterHover) {
-      this._adjustColors(config);
+      this._restoreBackgroundColor();
       this.resetDatasetAfterHover = false;
       update = true;
     }
     items.forEach(item => {
-      let dataset = config.data.datasets[item._datasetIndex];
+      let dataset = config.data.datasets[item.datasetIndex];
       if (scout.isOneOf((dataset.type || type), Chart.Type.LINE, Chart.Type.RADAR)) {
-        dataset.backgroundColor = dataset.hoverBackgroundColor;
+        this._setHoverBackgroundColor(dataset);
         this.resetDatasetAfterHover = true;
         update = true;
       }
@@ -1683,35 +2148,38 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
 
   _onHoverPointer(event, items) {
     this._onHover(event, items);
-    if (items.length && !this._isMaxSegmentsExceeded(this.chartJs.config, items[0]._index)) {
+    if (!this.rendered || this.removing) {
+      return;
+    }
+    if (items.length && !this._isMaxSegmentsExceeded(this.chartJs.config, items[0].index)) {
       this.$canvas.css('cursor', 'pointer');
     } else {
       this.$canvas.css('cursor', 'default');
     }
   }
 
-  _onLegendClick(event, item) {
+  _onLegendClick(e, legendItem, legend) {
     if (!this.chartJs.config || !this.chartJs.config.type) {
       return;
     }
 
     let type = this.chartJs.config.type,
       defaultTypeLegendClick;
-    if (ChartJs.defaults[type] && ChartJs.defaults[type].legend) {
-      defaultTypeLegendClick = ChartJs.defaults[type].legend.onClick;
+    if (ChartJs.overrides[type] && ChartJs.overrides[type].plugins && ChartJs.overrides[type].plugins.legend) {
+      defaultTypeLegendClick = ChartJs.overrides[type].plugins.legend.onClick;
     }
-    let defaultLegendClick = defaultTypeLegendClick || ChartJs.defaults.global.legend.onClick;
-    defaultLegendClick.call(this.chartJs, event, item);
-    this._onLegendLeave(event, item);
-    this._onLegendHoverPointer(event, item, true);
+    let defaultLegendClick = defaultTypeLegendClick || ChartJs.defaults.plugins.legend.onClick;
+    defaultLegendClick.call(this.chartJs, e, legendItem, legend);
+    this._onLegendLeave(e, legendItem, legend);
+    this._onLegendHoverPointer(e, legendItem, true);
   }
 
-  _onLegendHover(event, item, animated) {
-    let index = item.datasetIndex,
+  _onLegendHover(e, legendItem, legend) {
+    let index = legendItem.datasetIndex,
       config = this.chartJs.config,
       type = config.type;
     if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
-      index = item.index;
+      index = legendItem.index;
     }
 
     if (this.legendHoverDatasets.indexOf(index) > -1) {
@@ -1721,29 +2189,28 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     let dataset = config.data.datasets[index],
       datasetType = dataset ? dataset.type : null;
     if ((datasetType || type) === Chart.Type.LINE) {
-      dataset.backgroundColor = dataset.hoverBackgroundColor;
+      this._setHoverBackgroundColor(dataset);
       this.chartJs.update();
     }
     this._updateHoverStyle(index, true);
-    if (animated) {
-      this.chartJs.render();
-    } else {
-      this.chartJs.render({duration: 0});
-    }
+    this.chartJs.render();
     this.legendHoverDatasets.push(index);
   }
 
-  _onLegendHoverPointer(event, item, animated) {
-    this._onLegendHover(event, item, animated);
+  _onLegendHoverPointer(e, legendItem, legend) {
+    this._onLegendHover(e, legendItem, legend);
+    if (!this.rendered || this.removing) {
+      return;
+    }
     this.$canvas.css('cursor', 'pointer');
   }
 
-  _onLegendLeave(event, item) {
-    let index = item.datasetIndex,
+  _onLegendLeave(e, legendItem, legend) {
+    let index = legendItem.datasetIndex,
       config = this.chartJs.config,
       type = config.type;
     if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
-      index = item.index;
+      index = legendItem.index;
     }
 
     if (this.legendHoverDatasets.indexOf(index) < 0) {
@@ -1753,7 +2220,7 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     let dataset = config.data.datasets[index],
       datasetType = dataset ? dataset.type : null;
     if ((datasetType || type) === Chart.Type.LINE) {
-      this._adjustColors(config);
+      this._restoreBackgroundColor(dataset);
       this.chartJs.update();
     }
     this._updateHoverStyle(index, false);
@@ -1761,30 +2228,76 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     this.legendHoverDatasets.splice(this.legendHoverDatasets.indexOf(index), 1);
   }
 
-  _onLegendLeavePointer(event, item) {
-    this._onLegendLeave(event, item);
+  /**
+   * Sets the hover background color as the datasets background color.
+   * This little workaround is necessary for the line chart, which does not support a native hover effect.
+   * The previous background color will be backuped on the dataset property "backgroundColorBackup"
+   * and can be restored with {@link _restoreBackgroundColor}.
+   * @param {Dataset} dataset
+   */
+  _setHoverBackgroundColor(dataset) {
+    if (!dataset) {
+      return;
+    }
+    // backup the old background color first
+    dataset.backgroundColorBackup = dataset.backgroundColor;
+    // overwrite the current background color with the hover color
+    dataset.backgroundColor = dataset.hoverBackgroundColor;
+    this._adjustDatasetBorderWidths(dataset);
+  }
+
+  /**
+   * Restores the background color of a dataset or of all datasets,
+   * if they were previously overwritten by {@link _setHoverBackgroundColor}.
+   * @param {Dataset} [dataset]
+   */
+  _restoreBackgroundColor(dataset) {
+    if (dataset) {
+      dataset.backgroundColor = dataset.backgroundColorBackup || dataset.backgroundColor;
+      delete dataset.backgroundColorBackup;
+      this._adjustDatasetBorderWidths(dataset);
+    } else {
+      this.chartJs.config.data.datasets.forEach(dataset => this._restoreBackgroundColor(dataset));
+    }
+  }
+
+  _onLegendLeavePointer(e, legendItem, legend) {
+    this._onLegendLeave(e, legendItem, legend);
+    if (!this.rendered || this.removing) {
+      return;
+    }
     this.$canvas.css('cursor', 'default');
   }
 
-  _updateHoverStyle(index, enabled) {
+  _updateHoverStyle(datasetIndex, enabled) {
     let config = this.chartJs.config,
       type = config.type,
+      mode,
+      elements = [],
       datasets = config.data.datasets,
-      dataset = datasets ? datasets[index] : null,
+      dataset = datasets ? datasets[datasetIndex] : null,
       datasetType = dataset ? dataset.type : null;
-    if ((datasetType || type) === Chart.Type.LINE) {
-      this.chartJs.updateHoverStyle(this.chartJs.getDatasetMeta(index).data, 'point', enabled);
-    } else if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
-      let elements = [];
-      for (let i = 0; i < datasets.length; i++) {
-        elements.push(this.chartJs.getDatasetMeta(i).data[index]);
-      }
-      this.chartJs.updateHoverStyle(elements, 'point', enabled);
+    if (scout.isOneOf(type, Chart.Type.LINE, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA) || datasetType === Chart.Type.LINE) {
+      mode = 'point';
     } else {
-      let elements = this.chartJs.getDatasetMeta(index).data;
-      if (elements && elements.length) {
-        this.chartJs.updateHoverStyle(this.chartJs.getDatasetMeta(index).data, 'dataset', enabled);
-      }
+      mode = 'dataset';
+    }
+    if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
+      this.chartJs.getSortedVisibleDatasetMetas().forEach((meta, index) => elements.push({
+        element: meta.data[datasetIndex],
+        datasetIndex: index,
+        index: datasetIndex
+      }));
+    } else {
+      this.chartJs.getDatasetMeta(datasetIndex).data.forEach((element, index) => elements.push({
+        element: element,
+        datasetIndex: datasetIndex,
+        index: index
+      }));
+    }
+    if (elements && elements.length) {
+      // noinspection JSCheckFunctionSignatures
+      this.chartJs.updateHoverStyle(elements, mode, enabled);
     }
   }
 
@@ -1827,8 +2340,8 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       // Compute a scalingFactor and an offset to get the new radius newR = r * scalingFactor + offset.
       bubbleScalingFactor = 1,
       bubbleRadiusOffset = 0,
-      sizeOfLargestBubble = config.bubble ? config.bubble.sizeOfLargestBubble : 0,
-      minBubbleSize = config.bubble ? config.bubble.minBubbleSize : 0;
+      sizeOfLargestBubble = (config.options || {}).bubble ? config.options.bubble.sizeOfLargestBubble : 0,
+      minBubbleSize = (config.options || {}).bubble ? config.options.bubble.minBubbleSize : 0;
     if (sizeOfLargestBubble) {
       let width = Math.abs(chartArea.right - chartArea.left),
         height = Math.abs(chartArea.top - chartArea.bottom);
@@ -1977,39 +2490,48 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
   }
 
   _adjustGridMaxMin(config, chartArea) {
-    if (!config || !config.type || !config.options || !config.options.adjustGridMaxMin || (!config.options.scale && !config.options.scales) || !chartArea) {
+    if (!config || !config.type || !config.options || !config.options.adjustGridMaxMin || !config.options.scales || !chartArea) {
       return;
     }
 
     let type = config.type;
-    if (!scout.isOneOf(type, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.LINE, Chart.Type.POLAR_AREA, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
+    if (!scout.isOneOf(type, Chart.Type.BAR, Chart.Type.LINE, Chart.Type.POLAR_AREA, Chart.Type.RADAR, Chart.Type.BUBBLE)) {
       return;
     }
 
+    let scales = config.options.scales,
+      xAxis = scales.x,
+      yAxis = scales.y,
+      rAxis = scales.r,
+      minSpaceBetweenXTicks = xAxis ? xAxis.minSpaceBetweenTicks : 1,
+      minSpaceBetweenYTicks = yAxis ? yAxis.minSpaceBetweenTicks : 1;
+
+    if (rAxis) {
+      minSpaceBetweenXTicks = rAxis.minSpaceBetweenTicks;
+      minSpaceBetweenYTicks = rAxis.minSpaceBetweenTicks;
+    }
+
     let width = Math.abs(chartArea.right - chartArea.left),
       height = Math.abs(chartArea.top - chartArea.bottom),
-      maxXTicks = Math.max(Math.floor(width / this.minSpaceBetweenXTicks), 3),
-      maxYTicks = Math.max(Math.floor(height / this.minSpaceBetweenYTicks), 3);
+      maxXTicks = Math.max(Math.floor(width / minSpaceBetweenXTicks) + 1, 3),
+      maxYTicks = Math.max(Math.floor(height / minSpaceBetweenYTicks) + 1, 3);
 
     let yBoundaries = this._computeYBoundaries(config, height),
       yBoundary = yBoundaries.yBoundary,
       yBoundaryDiffType = yBoundaries.yBoundaryDiffType;
 
-    if (config.options.scale) {
-      this._adjustScaleMaxMin(config.options.scale, maxYTicks, yBoundary);
+    if (rAxis) {
+      this._adjustAxisMaxMin(rAxis, Math.ceil(Math.min(maxXTicks, maxYTicks) / 2), yBoundary);
       return;
     }
 
-    let xAxes = config.options.scales.xAxes,
-      yAxes = config.options.scales.yAxes;
-
     if (yBoundaryDiffType) {
-      this._adjustAxes(arrays.ensure(yAxes[0]), maxYTicks, yBoundary);
-      this._adjustAxes(arrays.ensure(yAxes[1]), maxYTicks, yBoundaryDiffType);
-    } else if (type === Chart.Type.BAR_HORIZONTAL) {
-      this._adjustAxes(xAxes, maxXTicks, yBoundary);
+      this._adjustAxisMaxMin(yAxis, maxYTicks, yBoundary);
+      this._adjustAxisMaxMin(scales.yDiffType, maxYTicks, yBoundaryDiffType);
+    } else if (this._isHorizontalBar(config)) {
+      this._adjustAxisMaxMin(xAxis, maxXTicks, yBoundary);
     } else {
-      this._adjustAxes(yAxes, maxYTicks, yBoundary);
+      this._adjustAxisMaxMin(yAxis, maxYTicks, yBoundary);
     }
 
     if (type !== Chart.Type.BUBBLE) {
@@ -2017,7 +2539,7 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
 
     let xBoundary = this._computeXBoundaryBubble(config, width);
-    this._adjustAxes(xAxes, maxXTicks, xBoundary);
+    this._adjustAxisMaxMin(xAxis, maxXTicks, xBoundary);
   }
 
   _computeBoundaryBubble(config, identifier, space) {
@@ -2026,10 +2548,9 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
     }
 
     let datasets = config.data.datasets,
-      axes = config.options.scales[identifier + 'Axes'],
-      axis = (axes && axes.length) ? axes[0] : null,
+      axis = config.options.scales[identifier],
       offset = axis && axis.offset,
-      labelMap = config.options.scales[identifier + 'LabelMap'],
+      labelMap = config.options[identifier + 'LabelMap'],
       boundary;
 
     let maxR = this._computeMaxMinValue(datasets, 'r', true).maxValue,
@@ -2105,89 +2626,83 @@ export default class ChartJsRenderer extends AbstractChartRenderer {
       return;
     }
 
-    if (!config.options || !config.options.scales || !config.options.scales.yAxes || config.options.scales.yAxes.length !== 1) {
+    if (!config.options || !config.options.scales || !config.options.scales.y || config.options.scales.yDiffType) {
       return;
     }
 
     let type = config.type,
-      scales = config.options.scales,
-      yAxis = scales.yAxes[0],
+      options = config.options,
+      scales = options.scales,
+      yAxis = scales.y,
       yAxisDiffType = $.extend(true, {}, yAxis);
-    scales.yAxes.push(yAxisDiffType);
+    scales.yDiffType = yAxisDiffType;
 
-    yAxis.id = 'yAxis';
-    yAxisDiffType.id = 'yAxisDiffType';
+    yAxis.id = 'y';
+    yAxisDiffType.id = 'yDiffType';
 
     if (config.data && config.data.datasets && config.data.datasets.length && config.data.datasets[0].type && config.data.datasets[0].type !== type) {
       yAxisDiffType.position = Chart.Position.LEFT;
       yAxis.position = Chart.Position.RIGHT;
-      yAxis.gridLines.drawOnChartArea = false;
+      yAxis.grid.drawOnChartArea = false;
     } else {
       yAxis.position = Chart.Position.LEFT;
       yAxisDiffType.position = Chart.Position.RIGHT;
-      yAxisDiffType.gridLines.drawOnChartArea = false;
+      yAxisDiffType.grid.drawOnChartArea = false;
     }
 
-    yAxis.gridLines.drawBorder = true;
-    yAxis.gridLines.drawTicks = true;
-    yAxisDiffType.gridLines.drawBorder = true;
-    yAxisDiffType.gridLines.drawTicks = true;
+    yAxis.grid.drawBorder = true;
+    yAxis.grid.drawTicks = true;
+    yAxisDiffType.grid.drawBorder = true;
+    yAxisDiffType.grid.drawTicks = true;
 
     let yAxisType = (datasets[0].type || type),
       yAxisDiffTypeType = (datasetsDiffType[0].type || type),
       yAxisTypeLabel = this.chart.session.text('ui.' + yAxisType),
       yAxisDiffTypeTypeLabel = this.chart.session.text('ui.' + yAxisDiffTypeType),
-      yAxisScaleLabel = scales.scaleLabelByTypeMap ? scales.scaleLabelByTypeMap[yAxisType] : null,
-      yAxisDiffTypeScaleLabel = scales.scaleLabelByTypeMap ? scales.scaleLabelByTypeMap[yAxisDiffTypeType] : null;
+      yAxisScaleLabel = options.scaleLabelByTypeMap ? options.scaleLabelByTypeMap[yAxisType] : null,
+      yAxisDiffTypeScaleLabel = options.scaleLabelByTypeMap ? options.scaleLabelByTypeMap[yAxisDiffTypeType] : null;
 
-    yAxis.scaleLabel.display = true;
-    yAxis.scaleLabel.labelString = yAxisScaleLabel ? yAxisScaleLabel + ' (' + yAxisTypeLabel + ')' : yAxisTypeLabel;
-    yAxisDiffType.scaleLabel.display = true;
-    yAxisDiffType.scaleLabel.labelString = yAxisDiffTypeScaleLabel ? yAxisDiffTypeScaleLabel + ' (' + yAxisDiffTypeTypeLabel + ')' : yAxisDiffTypeTypeLabel;
+    yAxis.title.display = true;
+    yAxis.title.text = yAxisScaleLabel ? yAxisScaleLabel + ' (' + yAxisTypeLabel + ')' : yAxisTypeLabel;
+    yAxisDiffType.title.display = true;
+    yAxisDiffType.title.text = yAxisDiffTypeScaleLabel ? yAxisDiffTypeScaleLabel + ' (' + yAxisDiffTypeTypeLabel + ')' : yAxisDiffTypeTypeLabel;
 
     datasets.forEach(dataset => {
-      dataset.yAxisID = 'yAxis';
+      dataset.yAxisID = 'y';
     });
     datasetsDiffType.forEach(dataset => {
-      dataset.yAxisID = 'yAxisDiffType';
+      dataset.yAxisID = 'yDiffType';
     });
   }
 
-  _adjustScaleMaxMin(scale, maxTicks, maxMinValue) {
-    scale.ticks = $.extend(true, {}, scale.ticks, {
-      maxTicksLimit: Math.ceil(maxTicks / 2),
-      stepSize: (this.onlyIntegers ? 1 : undefined)
-    });
-    if (maxMinValue) {
-      scale.ticks.suggestedMax = maxMinValue.maxValue;
-      scale.ticks.suggestedMin = maxMinValue.minValue;
-    }
-  }
-
-  _adjustAxes(axes, maxTicks, maxMinValue) {
-    if (!axes || !Array.isArray(axes) || !axes.length) {
+  _adjustAxisMaxMin(axis, maxTicks, maxMinValue) {
+    if (!axis) {
       return;
     }
 
-    for (let i = 0; i < axes.length; i++) {
-      axes[i].ticks = $.extend(true, {}, axes[i].ticks, {
-        maxTicksLimit: maxTicks,
-        stepSize: (this.onlyIntegers ? 1 : undefined)
-      });
-      if (maxMinValue) {
-        axes[i].ticks.suggestedMax = maxMinValue.maxValue;
-        axes[i].ticks.suggestedMin = maxMinValue.minValue;
-      }
+    let maxRangeBetweenTwoTicks = 1;
+
+    axis.ticks = $.extend(true, {}, axis.ticks, {
+      maxTicksLimit: maxTicks
+    });
+    if (maxMinValue) {
+      axis.suggestedMax = maxMinValue.maxValue;
+      axis.suggestedMin = maxMinValue.minValue;
+
+      maxRangeBetweenTwoTicks = (maxMinValue.maxValue - maxMinValue.minValue) / (maxTicks - 1);
     }
+    axis.ticks.stepSize = this.onlyIntegers && maxRangeBetweenTwoTicks < 1 ? 1 : undefined;
   }
 
   _remove(afterRemoveFunc) {
-    if (this.rendered) {
-      this.$canvas.remove();
-      this.$canvas = null;
+    if (this.rendered && !this.removing) {
+      this.removing = true;
       this.chartJs.destroy();
       this.chartJs = null;
+      this.$canvas.remove();
+      this.$canvas = null;
     }
     super._remove(afterRemoveFunc);
+    this.removing = false;
   }
 }