@progress/kendo-charts 2.8.2 → 2.9.0-develop.1

package/dist/es/chart/chart.js

@@ -32,6 +32,8 @@ import { DRAG_START, DRAG, DRAG_END, ZOOM_START, ZOOM, ZOOM_END, SELECT_START, S
 import './animations';
 import './register-charts';
 import { parseDateCategory } from './utils';
+import { setupStyleObserver } from '../common/style-observer';
+import { chartCSSVariables } from './theme/load-theme';
 
 const AXIS_NAMES = [ CATEGORY, VALUE, X, Y ];
 
@@ -73,10 +75,27 @@ class Chart {
                 this._redraw();
                 this._attachEvents();
                 this._restoreOverlayElement();
+                this._initStyleObserver();
             }
         });
     }
 
+    _initStyleObserver() {
+        this._destroyStyleObserver();
+        if (this.options.observeStyles) {
+            this._stylesObserver = setupStyleObserver(this.element, () => {
+                this.trigger("styleChanged");
+            }, Object.values(chartCSSVariables));
+        }
+    }
+
+    _destroyStyleObserver() {
+        if (this._stylesObserver) {
+            this._stylesObserver.disconnect();
+            this._stylesObserver = null;
+        }
+    }
+
     _initElement(element) {
         this._setElementClass(element);
         element.style.position = "relative";
@@ -1993,6 +2012,14 @@ class Chart {
         }
     }
 
+    applyTheme(theme) {
+        const options = Object.assign({}, this._originalOptions);
+        requestAnimationFrame(() => {
+            this.applyOptions(options, theme);
+            this.noTransitionsRedraw();
+        });
+    }
+
     applyOptions(options, theme) {
         clearMissingValues(this._originalOptions, options);
         this._originalOptions = deepExtend(this._originalOptions, options);
@@ -2013,6 +2040,7 @@ class Chart {
         this.redraw();
         this.updateMouseMoveHandler();
         this._restoreOverlayElement();
+        this._initStyleObserver();
     }
 
     setDirection(rtl) {
@@ -2063,6 +2091,8 @@ class Chart {
         this._destroySurface();
 
         this._clearRedrawTimeout();
+
+        this._destroyStyleObserver();
     }
 
     _destroySurface() {
@@ -2320,6 +2350,7 @@ setDefaultOptions(Chart, {
         visible: false
     },
     transitions: true,
+    observeStyles: false,
     valueAxis: {
         narrowRange: false
     },

package/dist/es/chart/theme/load-theme.js

@@ -33,6 +33,11 @@ const getFont = (element, weightProp, sizeProp, familyProp) => {
     return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
 };
 
+const seriesColorsVars = {};
+for (let i = 1; i <= SERIES_COLORS; i++) {
+    seriesColorsVars[`series-color-${i}`] = `${seriesVar}${i}`;
+}
+
 const getSeriesColors = (element) => {
     const styles = elementStyles(element);
     const result = [];
@@ -46,13 +51,61 @@ const getSeriesColors = (element) => {
     return result;
 };
 
-const defaultFont = element => getFont(element, "--kendo-font-weight", '--kendo-chart-font-size', "--kendo-font-family");
-const paneTitleFont = (element) => getFont(element, "--kendo-chart-pane-title-font-weight", '--kendo-chart-pane-title-font-size', "--kendo-font-family");
-const normalTextColor = (element) => getProp(element, "--kendo-chart-text");
+// -----------------------------------------------------------------------------
+// CSS Variable Groups (shared + component specific)
+// -----------------------------------------------------------------------------
+export const sharedVariables = {
+    text: "--kendo-chart-text",
+    chartBg: "--kendo-chart-bg",
+    fontWeight: "--kendo-font-weight",
+    fontFamily: "--kendo-font-family",
+};
+
+// Chart-specific variables (in addition to shared)
+const chartVariables = {
+    majorLines: "--kendo-chart-major-lines",
+    minorLines: "--kendo-chart-minor-lines",
+    areaOpacity: "--kendo-chart-area-opacity",
+    surface: "--kendo-color-surface",
+    primaryBg: "--kendo-chart-primary-bg",
+    crosshairBg: "--kendo-chart-crosshair-bg",
+    axisLabelFontSize: "--kendo-chart-label-font-size",
+    axisLabelFontWeight: "--kendo-font-weight",
+    axisLabelFontFamily: "--kendo-font-family",
+    chartFontSize: "--kendo-chart-font-size", // used by defaultFont / legend labels
+    paneTitleFontSize: "--kendo-chart-pane-title-font-size",
+    paneTitleFontWeight: "--kendo-chart-pane-title-font-weight",
+    titleFontSize: "--kendo-chart-title-font-size",
+    titleFontWeight: "--kendo-font-weight",
+    errorBarsBg: "--kendo-chart-error-bars-bg",
+    areaInactiveOpacity: "--kendo-chart-area-inactive-opacity",
+    lineInactiveOpacity: "--kendo-chart-line-inactive-opacity",
+    bulletTarget: "--kendo-chart-bullet-target",
+    notesBg: "--kendo-chart-notes-bg",
+    notesBorder: "--kendo-chart-notes-border",
+    notesLines: "--kendo-chart-notes-lines",
+    inactive: "--kendo-chart-inactive"
+};
+
+// Sankey-specific variables (in addition to shared)
+const sankeyVariables = {
+    linksColor: "--kendo-color-subtle",
+};
+
+// Gauge-specific variables (in addition to shared)
+const gaugeVariables = {
+    gaugePointer: "--kendo-chart-gauge-pointer",
+    gaugeTrack: "--kendo-chart-gauge-track",
+};
+
+// Font & color helpers using variable objects (avoid raw CSS strings)
+const defaultFont = element => getFont(element, sharedVariables.fontWeight, chartVariables.chartFontSize, sharedVariables.fontFamily);
+const paneTitleFont = (element) => getFont(element, chartVariables.paneTitleFontWeight, chartVariables.paneTitleFontSize, sharedVariables.fontFamily);
+const normalTextColor = (element) => getProp(element, sharedVariables.text);
 
 const title = (element) => ({
     color: normalTextColor(element),
-    font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
+    font: getFont(element, sharedVariables.fontWeight, chartVariables.titleFontSize, sharedVariables.fontFamily),
 });
 
 const sankeyLegend = (element) => {
@@ -69,7 +122,7 @@ const sankeyLegend = (element) => {
 };
 
 const chartLegend = (element) => {
-    const inactiveColor = getProp(element, "--kendo-chart-inactive");
+    const inactiveColor = getProp(element, chartVariables.inactive);
     return Object.assign({}, {inactiveItems: {
             labels: {
                 color: inactiveColor,
@@ -80,19 +133,24 @@ const chartLegend = (element) => {
         }},
         sankeyLegend(element));
 };
+// Export composed variable objects
+export const chartCSSVariables = Object.assign({}, sharedVariables, chartVariables, seriesColorsVars);
+export const sankeyCSSVariables = Object.assign({}, sharedVariables, sankeyVariables, seriesColorsVars);
+export const gaugeCSSVariables = Object.assign({}, sharedVariables, gaugeVariables);
 
 export const gaugeTheme = (element) => {
+    const vars = gaugeCSSVariables;
     const textColorNormal = normalTextColor(element);
     return {
         pointer: {
-            color: getProp(element, "--kendo-chart-gauge-pointer")
+            color: getProp(element, vars.gaugePointer)
         },
         scale: {
             labels: {
                 color: textColorNormal
             },
 
-            rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
+            rangePlaceholderColor: getProp(element, vars.gaugeTrack),
 
             minorTicks: {
                 color: textColorNormal
@@ -109,46 +167,52 @@ export const gaugeTheme = (element) => {
     };
 };
 
-export const sankeyTheme = (element) => ({
-    labels: {
-        color: normalTextColor(element),
-        font: defaultFont(element),
-        stroke: {
-            color: getProp(element, "--kendo-chart-bg"),
+export const sankeyTheme = (element) => {
+    const vars = sankeyCSSVariables;
+    return {
+        labels: {
+            color: normalTextColor(element),
+            font: defaultFont(element),
+            stroke: {
+                color: getProp(element, vars.chartBg),
+            },
         },
-    },
-    links: {
-        color: getProp(element, "--kendo-color-subtle"),
-    },
-    nodeColors: getSeriesColors(element),
-    title: title(element),
-    legend: sankeyLegend(element),
-});
+        links: {
+            color: getProp(element, vars.linksColor),
+        },
+        nodeColors: getSeriesColors(element),
+        title: title(element),
+        legend: sankeyLegend(element),
+    };
+};
 
 const notes = (element) => ({
     icon: {
-        background: getProp(element, "--kendo-chart-notes-bg"),
+        background: getProp(element, chartVariables.notesBg),
         border: {
-            color: getProp(element, "--kendo-chart-notes-border"),
+            color: getProp(element, chartVariables.notesBorder),
         },
     },
     line: {
-        color: getProp(element, "--kendo-chart-notes-lines"),
+        color: getProp(element, chartVariables.notesLines),
     },
     label: {
         font: defaultFont(element),
     },
 });
 
+// (chartCSSVariables already exported above via composition)
+
 export const chartTheme = (element) => {
-    const majorLines = getProp(element, "--kendo-chart-major-lines");
-    const normalTextColor = getProp(element, "--kendo-chart-text");
-    const axisLabelFont = getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family");
-    const chartBg = getProp(element, "--kendo-chart-bg");
+    const vars = chartCSSVariables;
+    const majorLines = getProp(element, vars.majorLines);
+    const normalTextColor = getProp(element, vars.text);
+    const axisLabelFont = getFont(element, vars.axisLabelFontWeight, vars.axisLabelFontSize, vars.axisLabelFontFamily);
+    const chartBg = getProp(element, vars.chartBg);
     const notesProps = notes(element);
-    const areaOpacity = getNumberProp(element, "--kendo-chart-area-opacity");
-    const surfaceColor = getProp(element, "--kendo-color-surface");
-    const primaryBg = getProp(element, "--kendo-chart-primary-bg");
+    const areaOpacity = getNumberProp(element, vars.areaOpacity);
+    const surfaceColor = getProp(element, vars.surface);
+    const primaryBg = getProp(element, vars.primaryBg);
 
     const boxPlot = () => ({
         downColor: majorLines,
@@ -172,13 +236,13 @@ export const chartTheme = (element) => {
     const area = () => ({
         opacity: areaOpacity,
         highlight: {
-            inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            inactiveOpacity: getNumberProp(element, vars.areaInactiveOpacity),
         },
     });
 
     const line = () => ({
         highlight: {
-            inactiveOpacity: getNumberProp(element, "--kendo-chart-line-inactive-opacity"),
+            inactiveOpacity: getNumberProp(element, vars.lineInactiveOpacity),
         },
     });
 
@@ -191,7 +255,7 @@ export const chartTheme = (element) => {
     return {
         axisDefaults: {
             crosshair: {
-                color: getProp(element, "--kendo-chart-crosshair-bg"),
+                color: getProp(element, vars.crosshairBg),
             },
             labels: {
                 color: normalTextColor,
@@ -204,7 +268,7 @@ export const chartTheme = (element) => {
                 color: majorLines,
             },
             minorGridLines: {
-                color: getProp(element, "--kendo-chart-minor-lines"),
+                color: getProp(element, vars.minorLines),
             },
             notes: structuredClone(notesProps),
             title: {
@@ -241,7 +305,7 @@ export const chartTheme = (element) => {
                 },
             },
             errorBars: {
-                color: getProp(element, "--kendo-chart-error-bars-bg"),
+                color: getProp(element, vars.errorBarsBg),
             },
             icon: {
                 border: {

package/dist/es/common/style-observer.js

@@ -0,0 +1,43 @@
+export function setupStyleObserver(element, callback, properties) {
+    const curStyles = getComputedStyle(element);
+    const values = new Map();
+    properties.forEach(prop => {
+        values.set(prop, curStyles.getPropertyValue(prop));
+    });
+
+    let rafPending = false;
+
+    const check = () => {
+        if (!element.isConnected) {
+            return;
+        }
+        let changed = false;
+        properties.forEach(prop => {
+            const newValue = curStyles.getPropertyValue(prop);
+            if (values.get(prop) !== newValue) {
+                values.set(prop, newValue);
+                changed = true;
+            }
+        });
+        if (changed) {
+            callback();
+        }
+    };
+
+    const interval = setInterval(() => {
+        if (!rafPending) {
+            rafPending = true;
+            requestAnimationFrame(() => {
+                rafPending = false;
+                check();
+            });
+        }
+    }, 500);
+
+    return {
+        disconnect: () => {
+            clearInterval(interval);
+            values.clear();
+        },
+    };
+}

package/dist/es2015/chart/chart.js

@@ -32,6 +32,8 @@ import { DRAG_START, DRAG, DRAG_END, ZOOM_START, ZOOM, ZOOM_END, SELECT_START, S
 import './animations';
 import './register-charts';
 import { parseDateCategory } from './utils';
+import { setupStyleObserver } from '../common/style-observer';
+import { chartCSSVariables } from './theme/load-theme';
 
 const AXIS_NAMES = [ CATEGORY, VALUE, X, Y ];
 
@@ -73,10 +75,27 @@ class Chart {
                 this._redraw();
                 this._attachEvents();
                 this._restoreOverlayElement();
+                this._initStyleObserver();
             }
         });
     }
 
+    _initStyleObserver() {
+        this._destroyStyleObserver();
+        if (this.options.observeStyles) {
+            this._stylesObserver = setupStyleObserver(this.element, () => {
+                this.trigger("styleChanged");
+            }, Object.values(chartCSSVariables));
+        }
+    }
+
+    _destroyStyleObserver() {
+        if (this._stylesObserver) {
+            this._stylesObserver.disconnect();
+            this._stylesObserver = null;
+        }
+    }
+
     _initElement(element) {
         this._setElementClass(element);
         element.style.position = "relative";
@@ -1993,6 +2012,14 @@ class Chart {
         }
     }
 
+    applyTheme(theme) {
+        const options = Object.assign({}, this._originalOptions);
+        requestAnimationFrame(() => {
+            this.applyOptions(options, theme);
+            this.noTransitionsRedraw();
+        });
+    }
+
     applyOptions(options, theme) {
         clearMissingValues(this._originalOptions, options);
         this._originalOptions = deepExtend(this._originalOptions, options);
@@ -2013,6 +2040,7 @@ class Chart {
         this.redraw();
         this.updateMouseMoveHandler();
         this._restoreOverlayElement();
+        this._initStyleObserver();
     }
 
     setDirection(rtl) {
@@ -2063,6 +2091,8 @@ class Chart {
         this._destroySurface();
 
         this._clearRedrawTimeout();
+
+        this._destroyStyleObserver();
     }
 
     _destroySurface() {
@@ -2320,6 +2350,7 @@ setDefaultOptions(Chart, {
         visible: false
     },
     transitions: true,
+    observeStyles: false,
     valueAxis: {
         narrowRange: false
     },

package/dist/es2015/chart/theme/load-theme.js

@@ -33,6 +33,11 @@ const getFont = (element, weightProp, sizeProp, familyProp) => {
     return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
 };
 
+const seriesColorsVars = {};
+for (let i = 1; i <= SERIES_COLORS; i++) {
+    seriesColorsVars[`series-color-${i}`] = `${seriesVar}${i}`;
+}
+
 const getSeriesColors = (element) => {
     const styles = elementStyles(element);
     const result = [];
@@ -46,13 +51,61 @@ const getSeriesColors = (element) => {
     return result;
 };
 
-const defaultFont = element => getFont(element, "--kendo-font-weight", '--kendo-chart-font-size', "--kendo-font-family");
-const paneTitleFont = (element) => getFont(element, "--kendo-chart-pane-title-font-weight", '--kendo-chart-pane-title-font-size', "--kendo-font-family");
-const normalTextColor = (element) => getProp(element, "--kendo-chart-text");
+// -----------------------------------------------------------------------------
+// CSS Variable Groups (shared + component specific)
+// -----------------------------------------------------------------------------
+export const sharedVariables = {
+    text: "--kendo-chart-text",
+    chartBg: "--kendo-chart-bg",
+    fontWeight: "--kendo-font-weight",
+    fontFamily: "--kendo-font-family",
+};
+
+// Chart-specific variables (in addition to shared)
+const chartVariables = {
+    majorLines: "--kendo-chart-major-lines",
+    minorLines: "--kendo-chart-minor-lines",
+    areaOpacity: "--kendo-chart-area-opacity",
+    surface: "--kendo-color-surface",
+    primaryBg: "--kendo-chart-primary-bg",
+    crosshairBg: "--kendo-chart-crosshair-bg",
+    axisLabelFontSize: "--kendo-chart-label-font-size",
+    axisLabelFontWeight: "--kendo-font-weight",
+    axisLabelFontFamily: "--kendo-font-family",
+    chartFontSize: "--kendo-chart-font-size", // used by defaultFont / legend labels
+    paneTitleFontSize: "--kendo-chart-pane-title-font-size",
+    paneTitleFontWeight: "--kendo-chart-pane-title-font-weight",
+    titleFontSize: "--kendo-chart-title-font-size",
+    titleFontWeight: "--kendo-font-weight",
+    errorBarsBg: "--kendo-chart-error-bars-bg",
+    areaInactiveOpacity: "--kendo-chart-area-inactive-opacity",
+    lineInactiveOpacity: "--kendo-chart-line-inactive-opacity",
+    bulletTarget: "--kendo-chart-bullet-target",
+    notesBg: "--kendo-chart-notes-bg",
+    notesBorder: "--kendo-chart-notes-border",
+    notesLines: "--kendo-chart-notes-lines",
+    inactive: "--kendo-chart-inactive"
+};
+
+// Sankey-specific variables (in addition to shared)
+const sankeyVariables = {
+    linksColor: "--kendo-color-subtle",
+};
+
+// Gauge-specific variables (in addition to shared)
+const gaugeVariables = {
+    gaugePointer: "--kendo-chart-gauge-pointer",
+    gaugeTrack: "--kendo-chart-gauge-track",
+};
+
+// Font & color helpers using variable objects (avoid raw CSS strings)
+const defaultFont = element => getFont(element, sharedVariables.fontWeight, chartVariables.chartFontSize, sharedVariables.fontFamily);
+const paneTitleFont = (element) => getFont(element, chartVariables.paneTitleFontWeight, chartVariables.paneTitleFontSize, sharedVariables.fontFamily);
+const normalTextColor = (element) => getProp(element, sharedVariables.text);
 
 const title = (element) => ({
     color: normalTextColor(element),
-    font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
+    font: getFont(element, sharedVariables.fontWeight, chartVariables.titleFontSize, sharedVariables.fontFamily),
 });
 
 const sankeyLegend = (element) => {
@@ -69,7 +122,7 @@ const sankeyLegend = (element) => {
 };
 
 const chartLegend = (element) => {
-    const inactiveColor = getProp(element, "--kendo-chart-inactive");
+    const inactiveColor = getProp(element, chartVariables.inactive);
     return Object.assign({}, {inactiveItems: {
             labels: {
                 color: inactiveColor,
@@ -80,19 +133,24 @@ const chartLegend = (element) => {
         }},
         sankeyLegend(element));
 };
+// Export composed variable objects
+export const chartCSSVariables = Object.assign({}, sharedVariables, chartVariables, seriesColorsVars);
+export const sankeyCSSVariables = Object.assign({}, sharedVariables, sankeyVariables, seriesColorsVars);
+export const gaugeCSSVariables = Object.assign({}, sharedVariables, gaugeVariables);
 
 export const gaugeTheme = (element) => {
+    const vars = gaugeCSSVariables;
     const textColorNormal = normalTextColor(element);
     return {
         pointer: {
-            color: getProp(element, "--kendo-chart-gauge-pointer")
+            color: getProp(element, vars.gaugePointer)
         },
         scale: {
             labels: {
                 color: textColorNormal
             },
 
-            rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
+            rangePlaceholderColor: getProp(element, vars.gaugeTrack),
 
             minorTicks: {
                 color: textColorNormal
@@ -109,46 +167,52 @@ export const gaugeTheme = (element) => {
     };
 };
 
-export const sankeyTheme = (element) => ({
-    labels: {
-        color: normalTextColor(element),
-        font: defaultFont(element),
-        stroke: {
-            color: getProp(element, "--kendo-chart-bg"),
+export const sankeyTheme = (element) => {
+    const vars = sankeyCSSVariables;
+    return {
+        labels: {
+            color: normalTextColor(element),
+            font: defaultFont(element),
+            stroke: {
+                color: getProp(element, vars.chartBg),
+            },
         },
-    },
-    links: {
-        color: getProp(element, "--kendo-color-subtle"),
-    },
-    nodeColors: getSeriesColors(element),
-    title: title(element),
-    legend: sankeyLegend(element),
-});
+        links: {
+            color: getProp(element, vars.linksColor),
+        },
+        nodeColors: getSeriesColors(element),
+        title: title(element),
+        legend: sankeyLegend(element),
+    };
+};
 
 const notes = (element) => ({
     icon: {
-        background: getProp(element, "--kendo-chart-notes-bg"),
+        background: getProp(element, chartVariables.notesBg),
         border: {
-            color: getProp(element, "--kendo-chart-notes-border"),
+            color: getProp(element, chartVariables.notesBorder),
         },
     },
     line: {
-        color: getProp(element, "--kendo-chart-notes-lines"),
+        color: getProp(element, chartVariables.notesLines),
     },
     label: {
         font: defaultFont(element),
     },
 });
 
+// (chartCSSVariables already exported above via composition)
+
 export const chartTheme = (element) => {
-    const majorLines = getProp(element, "--kendo-chart-major-lines");
-    const normalTextColor = getProp(element, "--kendo-chart-text");
-    const axisLabelFont = getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family");
-    const chartBg = getProp(element, "--kendo-chart-bg");
+    const vars = chartCSSVariables;
+    const majorLines = getProp(element, vars.majorLines);
+    const normalTextColor = getProp(element, vars.text);
+    const axisLabelFont = getFont(element, vars.axisLabelFontWeight, vars.axisLabelFontSize, vars.axisLabelFontFamily);
+    const chartBg = getProp(element, vars.chartBg);
     const notesProps = notes(element);
-    const areaOpacity = getNumberProp(element, "--kendo-chart-area-opacity");
-    const surfaceColor = getProp(element, "--kendo-color-surface");
-    const primaryBg = getProp(element, "--kendo-chart-primary-bg");
+    const areaOpacity = getNumberProp(element, vars.areaOpacity);
+    const surfaceColor = getProp(element, vars.surface);
+    const primaryBg = getProp(element, vars.primaryBg);
 
     const boxPlot = () => ({
         downColor: majorLines,
@@ -172,13 +236,13 @@ export const chartTheme = (element) => {
     const area = () => ({
         opacity: areaOpacity,
         highlight: {
-            inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            inactiveOpacity: getNumberProp(element, vars.areaInactiveOpacity),
         },
     });
 
     const line = () => ({
         highlight: {
-            inactiveOpacity: getNumberProp(element, "--kendo-chart-line-inactive-opacity"),
+            inactiveOpacity: getNumberProp(element, vars.lineInactiveOpacity),
         },
     });
 
@@ -191,7 +255,7 @@ export const chartTheme = (element) => {
     return {
         axisDefaults: {
             crosshair: {
-                color: getProp(element, "--kendo-chart-crosshair-bg"),
+                color: getProp(element, vars.crosshairBg),
             },
             labels: {
                 color: normalTextColor,
@@ -204,7 +268,7 @@ export const chartTheme = (element) => {
                 color: majorLines,
             },
             minorGridLines: {
-                color: getProp(element, "--kendo-chart-minor-lines"),
+                color: getProp(element, vars.minorLines),
             },
             notes: structuredClone(notesProps),
             title: {
@@ -241,7 +305,7 @@ export const chartTheme = (element) => {
                 },
             },
             errorBars: {
-                color: getProp(element, "--kendo-chart-error-bars-bg"),
+                color: getProp(element, vars.errorBarsBg),
             },
             icon: {
                 border: {