@eclipse-scout/chart 23.1.19 → 23.2.2

package/dist/eclipse-scout-chart.js

@@ -12,6 +12,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "AbstractChartRenderer": () => (/* binding */ AbstractChartRenderer)
 /* harmony export */ });
+/* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @eclipse-scout/core */ "@eclipse-scout/core");
+/* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__);
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -24,6 +26,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  *
  * SPDX-License-Identifier: EPL-2.0
  */
+
 class AbstractChartRenderer {
   constructor(chart) {
     _defineProperty(this, "chart", void 0);
@@ -69,7 +72,7 @@ class AbstractChartRenderer {
         }
       }
       // color should have been set.
-      if (!this.chart.config.options.autoColor && !chartValueGroup.colorHexValue && !chartValueGroup.cssClass) {
+      if (!this.chart.config.options.autoColor && !_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.arrays.ensure(chartValueGroup.colorHexValue).length && !chartValueGroup.cssClass) {
         return false;
       }
     }
@@ -1792,7 +1795,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       index;
     if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR_HORIZONTAL, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
       borderColor = dataset.borderColor;
-      legendColor = dataset.legendColor;
+      legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[tooltipItem.dataIndex] : dataset.legendColor;
       index = tooltipItem.datasetIndex;
     }
     if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA)) {
@@ -2458,12 +2461,20 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       };
     colors = jquery__WEBPACK_IMPORTED_MODULE_4___default().extend(true, colors, this._computeDatasetColors(config, multipleColorsPerDataset));
     data.datasets.forEach((elem, idx) => {
-      let backgroundColor = multipleColorsPerDataset ? colors.backgroundColors : colors.backgroundColors[idx],
-        borderColor = multipleColorsPerDataset ? colors.borderColors : colors.borderColors[idx],
-        hoverBackgroundColor = multipleColorsPerDataset ? colors.hoverBackgroundColors : colors.hoverBackgroundColors[idx],
-        hoverBorderColor = multipleColorsPerDataset ? colors.hoverBorderColors : colors.hoverBorderColors[idx],
-        legendColor = multipleColorsPerDataset ? colors.legendColors : colors.legendColors[idx],
-        pointHoverBackgroundColor = multipleColorsPerDataset ? colors.pointHoverColors : colors.legendColors[idx];
+      const getColor = colorsArray => {
+        let candidate = colorsArray[idx];
+        if (multipleColorsPerDataset && !Array.isArray(candidate)) {
+          // we want multiple colors -> get the parent array
+          candidate = colorsArray;
+        }
+        return candidate;
+      };
+      let backgroundColor = getColor(colors.backgroundColors),
+        borderColor = getColor(colors.borderColors),
+        hoverBackgroundColor = getColor(colors.hoverBackgroundColors),
+        hoverBorderColor = getColor(colors.hoverBorderColors),
+        legendColor = getColor(colors.legendColors),
+        pointHoverBackgroundColor = getColor(colors.pointHoverColors);
       let setProperty = (identifier, value) => {
         if (typeof elem[identifier] === 'function') {
           return;
@@ -2483,12 +2494,18 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         setProperty('pointHoverBorderColor', this.firstOpaqueBackgroundColor);
       }
       if (checkable) {
-        let datasetLength = elem.data.length;
+        const datasetLength = elem.data.length,
+          ensureColorArray = color => {
+            if (Array.isArray(color)) {
+              return color;
+            }
+            return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, color);
+          };
         if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR && (elem.type || _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR) {
-          let uncheckedBackgroundColor = multipleColorsPerDataset ? colors.backgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.backgroundColors[idx]),
-            uncheckedHoverBackgroundColor = multipleColorsPerDataset ? colors.hoverBackgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.hoverBackgroundColors[idx]),
-            checkedBackgroundColor = multipleColorsPerDataset ? colors.checkedBackgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.checkedBackgroundColors[idx]),
-            checkedHoverBackgroundColor = multipleColorsPerDataset ? colors.checkedHoverBackgroundColors : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, colors.checkedHoverBackgroundColors[idx]);
+          let uncheckedBackgroundColor = ensureColorArray(backgroundColor),
+            uncheckedHoverBackgroundColor = ensureColorArray(hoverBackgroundColor),
+            checkedBackgroundColor = ensureColorArray(getColor(colors.checkedBackgroundColors)),
+            checkedHoverBackgroundColor = ensureColorArray(getColor(colors.checkedHoverBackgroundColors));
           setProperty('uncheckedBackgroundColor', uncheckedBackgroundColor);
           setProperty('uncheckedHoverBackgroundColor', uncheckedHoverBackgroundColor);
           setProperty('checkedBackgroundColor', checkedBackgroundColor);
@@ -2496,10 +2513,10 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
           setProperty('backgroundColor', elem.uncheckedBackgroundColor);
           setProperty('hoverBackgroundColor', elem.uncheckedHoverBackgroundColor);
         } else if (_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR) || type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR && elem.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE) {
-          let uncheckedPointBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, pointHoverBackgroundColor),
-            uncheckedPointHoverBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, pointHoverBackgroundColor),
-            checkedPointBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, borderColor),
-            checkedPointHoverBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, hoverBorderColor || borderColor);
+          let uncheckedPointBackgroundColor = ensureColorArray(pointHoverBackgroundColor),
+            uncheckedPointHoverBackgroundColor = ensureColorArray(pointHoverBackgroundColor),
+            checkedPointBackgroundColor = ensureColorArray(borderColor),
+            checkedPointHoverBackgroundColor = ensureColorArray(hoverBorderColor || borderColor);
           setProperty('uncheckedPointBackgroundColor', uncheckedPointBackgroundColor);
           setProperty('uncheckedPointHoverBackgroundColor', uncheckedPointHoverBackgroundColor);
           setProperty('checkedPointBackgroundColor', checkedPointBackgroundColor);
@@ -2628,8 +2645,6 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         pointHoverColors: []
       };
     this.chart.data.chartValueGroups.forEach(elem => {
-      let rgbColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.styles.hexToRgb(elem.colorHexValue),
-        adjustColor = (opacity, darker) => this._adjustColorOpacity(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.styles.darkerColor(rgbColor, darker), opacity);
       let backgroundOpacity = 1,
         hoverBackgroundOpacity = 1,
         hoverBackgroundDarker = 0.1,
@@ -2665,14 +2680,40 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         hoverBackgroundOpacity = 0.35;
         hoverBackgroundDarker = 0;
       }
-      colors.backgroundColors.push(adjustColor(checkable || transparent ? uncheckedBackgroundOpacity : backgroundOpacity, 0));
-      colors.borderColors.push(adjustColor(1, 0));
-      colors.hoverBackgroundColors.push(adjustColor(checkable || transparent ? uncheckedHoverBackgroundOpacity : hoverBackgroundOpacity, checkable || transparent ? 0 : hoverBackgroundDarker));
-      colors.hoverBorderColors.push(adjustColor(1, hoverBorderDarker));
-      colors.checkedBackgroundColors.push(adjustColor(checkedBackgroundOpacity, checkedBackgroundDarker));
-      colors.checkedHoverBackgroundColors.push(adjustColor(checkedHoverBackgroundOpacity, checkedHoverBackgroundDarker));
-      colors.legendColors.push(adjustColor(1, 0));
-      colors.pointHoverColors.push(adjustColor(1, 0));
+      const backgroundColors = [],
+        borderColors = [],
+        hoverBackgroundColors = [],
+        hoverBorderColors = [],
+        checkedBackgroundColors = [],
+        checkedHoverBackgroundColors = [],
+        legendColors = [],
+        pointHoverColors = [];
+      let colorHexValues = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(elem.colorHexValue);
+      const datasetLength = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.length(elem.values);
+      if (colorHexValues.length && colorHexValues.length < datasetLength) {
+        // repeat colors for the whole dataset
+        colorHexValues = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.init(datasetLength, null).map((elem, idx) => colorHexValues[idx % colorHexValues.length]);
+      }
+      colorHexValues.forEach(colorHexValue => {
+        const rgbColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.styles.hexToRgb(colorHexValue),
+          adjustColor = (opacity, darker) => this._adjustColorOpacity(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.styles.darkerColor(rgbColor, darker), opacity);
+        backgroundColors.push(adjustColor(checkable || transparent ? uncheckedBackgroundOpacity : backgroundOpacity, 0));
+        borderColors.push(adjustColor(1, 0));
+        hoverBackgroundColors.push(adjustColor(checkable || transparent ? uncheckedHoverBackgroundOpacity : hoverBackgroundOpacity, checkable || transparent ? 0 : hoverBackgroundDarker));
+        hoverBorderColors.push(adjustColor(1, hoverBorderDarker));
+        checkedBackgroundColors.push(adjustColor(checkedBackgroundOpacity, checkedBackgroundDarker));
+        checkedHoverBackgroundColors.push(adjustColor(checkedHoverBackgroundOpacity, checkedHoverBackgroundDarker));
+        legendColors.push(adjustColor(1, 0));
+        pointHoverColors.push(adjustColor(1, 0));
+      });
+      colors.backgroundColors.push(backgroundColors);
+      colors.borderColors.push(borderColors);
+      colors.hoverBackgroundColors.push(hoverBackgroundColors);
+      colors.hoverBorderColors.push(hoverBorderColors);
+      colors.checkedBackgroundColors.push(checkedBackgroundColors);
+      colors.checkedHoverBackgroundColors.push(checkedHoverBackgroundColors);
+      colors.legendColors.push(legendColors);
+      colors.pointHoverColors.push(pointHoverColors);
     });
     colors.datalabelColor = this._computeDatalabelColor(type);
     return colors;
@@ -2758,7 +2799,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
         borderColor,
         backgroundColor;
       if (dataset && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(dataset.type || config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.LINE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.RADAR, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER)) {
-        legendColor = dataset.legendColor;
+        legendColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(dataset.legendColor)[0];
         borderColor = this._adjustColorOpacity(dataset.borderColor, 1);
       } else if (data.datasets.length && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(config.type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA)) {
         dataset = data.datasets[0];
@@ -3577,7 +3618,7 @@ class FulfillmentChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
   _renderPercentage(value, total) {
     // arc segment
     let arcClass = 'fulfillment-chart',
-      color = this.chart.data.chartValueGroups[0].colorHexValue,
+      color = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.arrays.ensure(this.chart.data.chartValueGroups[0].colorHexValue)[0],
       chartGroupCss = this.chart.data.chartValueGroups[0].cssClass;
     if (this.chart.config.options.autoColor) {
       arcClass += ' auto-color';
@@ -3637,7 +3678,7 @@ class FulfillmentChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
   }
   _renderCirclePath(cssClass, id, radius) {
     let chartGroupCss = this.chart.data.chartValueGroups[0].cssClass;
-    let color = this.chart.data.chartValueGroups[1].colorHexValue;
+    let color = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.arrays.ensure(this.chart.data.chartValueGroups[1].colorHexValue)[0];
     if (this.chart.config.options.autoColor) {
       cssClass += ' auto-color';
     } else if (chartGroupCss) {
@@ -3805,7 +3846,7 @@ class SalesfunnelChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
         width: width,
         widthBottom: widthBottom,
         cssClass: 'salesfunnel-chart-bar',
-        fill: chartValueGroups[i].colorHexValue,
+        fill: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.arrays.ensure(chartValueGroups[i].colorHexValue)[0],
         label: chartValueGroups[i].groupName,
         clickObject: this._createClickObject(null, i)
       };
@@ -3962,7 +4003,7 @@ class SalesfunnelChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
         width: width,
         widthBottom: width,
         cssClass: 'salesfunnel-chart-bar',
-        fill: chartValueGroups[i].colorHexValue,
+        fill: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.arrays.ensure(chartValueGroups[i].colorHexValue)[0],
         label: chartValueGroups[i].groupName,
         clickObject: this._createClickObject(null, i)
       };
@@ -4086,6 +4127,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @eclipse-scout/core */ "@eclipse-scout/core");
 /* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../index */ "./src/index.ts");
+var _class;
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -4437,6 +4479,7 @@ class SpeedoChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.AbstractSv
     });
   }
 }
+_class = SpeedoChartRenderer;
 _defineProperty(SpeedoChartRenderer, "Position", {
   LEFT: 'left',
   CENTER: 'center',
@@ -4449,7 +4492,7 @@ _defineProperty(SpeedoChartRenderer, "TEN_THOUSAND", 10000);
 _defineProperty(SpeedoChartRenderer, "ONE_MILLION", 1000000);
 _defineProperty(SpeedoChartRenderer, "ARC_MIN", -0.25);
 _defineProperty(SpeedoChartRenderer, "ARC_MAX", 0.25);
-_defineProperty(SpeedoChartRenderer, "ARC_RANGE", SpeedoChartRenderer.ARC_MAX - SpeedoChartRenderer.ARC_MIN);
+_defineProperty(SpeedoChartRenderer, "ARC_RANGE", _class.ARC_MAX - _class.ARC_MIN);
 _defineProperty(SpeedoChartRenderer, "SEGMENT_GAP", 0.0103);
 
 /***/ }),
@@ -4683,6 +4726,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./src/index.ts");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @eclipse-scout/core */ "@eclipse-scout/core");
+/* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__);
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -4697,6 +4742,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  */
 
 
+
 class VennChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractSvgChartRenderer {
   constructor(chart) {
     super(chart);
@@ -4755,17 +4801,17 @@ class VennChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractSvgC
     this.vennCircleHelper = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircleHelper(distR, maxR, minR, total);
     // create svg elements and venns
     if (this.numberOfCircles > 0) {
-      this.$v1 = this._createCircle(0, this.data[0].colorHexValue, this.data[0].cssClass);
+      this.$v1 = this._createCircle(0, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(this.data[0].colorHexValue)[0], this.data[0].cssClass);
       this.vennNumber1 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v1);
       this.vennReal1 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v1);
     }
     if (this.numberOfCircles > 1) {
-      this.$v2 = this._createCircle(1, this.data[1].colorHexValue, this.data[1].cssClass);
+      this.$v2 = this._createCircle(1, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(this.data[1].colorHexValue)[0], this.data[1].cssClass);
       this.vennNumber2 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v2);
       this.vennReal2 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v2);
     }
     if (this.numberOfCircles > 2) {
-      this.$v3 = this._createCircle(2, this.data[2].colorHexValue, this.data[2].cssClass);
+      this.$v3 = this._createCircle(2, _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.arrays.ensure(this.data[2].colorHexValue)[0], this.data[2].cssClass);
       this.vennNumber3 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v3);
       this.vennReal3 = new _index__WEBPACK_IMPORTED_MODULE_0__.VennCircle(this.$v3);
     }
@@ -5640,6 +5686,7 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
     _defineProperty(this, "_chartValueClickedHandler", void 0);
     _defineProperty(this, "_filterResetListener", void 0);
     _defineProperty(this, "_tableUpdatedTimeOutId", void 0);
+    this.iconId = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.icons.CHART;
     this.tooltipText = '${textKey:ui.Chart}';
     this.chartAggregation = {
       modifier: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.TableMatrix.NumberGroup.COUNT
@@ -5894,7 +5941,10 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
     this.setProperty('chartType', chartType);
   }
   _hasColumns() {
-    return this.table.columns.length !== 0;
+    return this._columns().length > 0;
+  }
+  _columns() {
+    return new _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.TableMatrix(this.table, this.session).columns();
   }
   _axisCount(columnCount, column) {
     let tmpColumn;
@@ -6302,7 +6352,7 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
     return segments;
   }
   _handleIconLabel(label, axis, iconClasses) {
-    if (axis && axis.textIsIcon) {
+    if (axis && axis.isIcon) {
       let icon = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.icons.parseIconId(label);
       if (icon && icon.isFontIcon()) {
         iconClasses.push(...icon.appendCssClass('font-icon').split(' '));
@@ -6413,7 +6463,7 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
         }
       }
       label = axis.format(label);
-      if (axis.textIsIcon) {
+      if (axis.isIcon) {
         let icon = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.icons.parseIconId(label);
         if (icon && icon.isFontIcon()) {
           label = icon.iconCharacter;
@@ -6617,7 +6667,7 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
       };
     }
     return {
-      text: '[' + (this.table.visibleColumns().indexOf(column) + 1) + ']'
+      text: '[' + (this._columns().indexOf(column) + 1) + ']'
     };
   }
   _removeContent() {