@oliasoft-open-source/charts-library 3.4.7-beta-1 → 3.4.8-beta-1

package/dist/index.js

@@ -576,7 +576,7 @@ let Color$1 = class Color {
   }
 };
 /*!
- * Chart.js v4.3.2
+ * Chart.js v4.3.0
  * https://www.chartjs.org
  * (c) 2023 Chart.js Contributors
  * Released under the MIT License
@@ -1048,7 +1048,7 @@ function _getStartAndCountOfVisiblePoints$1(meta, points, animationsDisabled) {
     if (minDefined) {
       start = _limitValue$1(Math.min(
         // @ts-expect-error Need to type _parsed
-        _lookupByKey$1(_parsed, axis, min).lo,
+        _lookupByKey$1(_parsed, iScale.axis, min).lo,
         // @ts-expect-error Need to fix types on _lookupByKey
         animationsDisabled ? pointCount : _lookupByKey$1(points, axis, iScale.getPixelForValue(min)).lo
       ), 0, pointCount - 1);
@@ -1170,7 +1170,7 @@ const numbers$1 = [
   "radius",
   "tension"
 ];
-const colors$1 = [
+const colors$2 = [
   "color",
   "borderColor",
   "backgroundColor"
@@ -1194,7 +1194,7 @@ function applyAnimationsDefaults(defaults2) {
   defaults2.set("animations", {
     colors: {
       type: "color",
-      properties: colors$1
+      properties: colors$2
     },
     numbers: {
       type: "number",
@@ -2891,7 +2891,7 @@ function styleChanged$1(style, prevStyle) {
   return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
 }
 /*!
- * Chart.js v4.3.2
+ * Chart.js v4.3.0
  * https://www.chartjs.org
  * (c) 2023 Chart.js Contributors
  * Released under the MIT License
@@ -4825,7 +4825,7 @@ let LineController$1 = (_d = class extends DatasetController$1 {
     line._chart = this.chart;
     line._datasetIndex = this.index;
     line._decimated = !!_dataset._decimated;
-    line.points = points.slice(Math.max(this._drawStart - 1, 0), this._drawStart + this._drawCount);
+    line.points = points;
     const options = this.resolveDatasetElementOptions(mode);
     if (!this.options.showLine) {
       options.borderWidth = 0;
@@ -4939,9 +4939,6 @@ let ScatterController$1 = (_f = class extends DatasetController$1 {
       count = points.length;
     }
     if (this.options.showLine) {
-      if (!this.datasetElementType) {
-        this.addElements();
-      }
       const { dataset: line, _dataset } = meta;
       line._chart = this.chart;
       line._datasetIndex = this.index;
@@ -4953,9 +4950,6 @@ let ScatterController$1 = (_f = class extends DatasetController$1 {
         animated: !animationsDisabled,
         options
       }, mode);
-    } else if (this.datasetElementType) {
-      delete meta.dataset;
-      this.datasetElementType = false;
     }
     this.updateElements(points, start, count, mode);
   }
@@ -7962,7 +7956,7 @@ function needContext$1(proxy, names2) {
   }
   return false;
 }
-var version$3 = "4.3.2";
+var version$3 = "4.3.0";
 const KNOWN_POSITIONS$1 = [
   "top",
   "bottom",
@@ -10569,7 +10563,7 @@ let Legend$1 = class Legend extends Element$2 {
         cursor.x += width + padding;
       } else if (typeof legendItem2.text !== "string") {
         const fontLineHeight = labelFont.lineHeight;
-        cursor.y += calculateLegendItemHeight(legendItem2, fontLineHeight) + padding;
+        cursor.y += calculateLegendItemHeight(legendItem2, fontLineHeight);
       } else {
         cursor.y += lineHeight;
       }
@@ -10683,7 +10677,7 @@ function calculateItemHeight(_itemHeight, legendItem2, fontLineHeight) {
   return itemHeight;
 }
 function calculateLegendItemHeight(legendItem2, fontLineHeight) {
-  const labelHeight = legendItem2.text ? legendItem2.text.length : 0;
+  const labelHeight = legendItem2.text ? legendItem2.text.length + 0.5 : 0;
   return fontLineHeight * labelHeight;
 }
 function isListened(type, opts) {
@@ -12730,7 +12724,7 @@ let TimeScale$1 = (_q = class extends Scale$1 {
     if (time === max || options.bounds === "ticks" || count === 1) {
       addTick$1(ticks, time, timestamps);
     }
-    return Object.keys(ticks).sort(sorter$1).map((x2) => +x2);
+    return Object.keys(ticks).sort((a2, b2) => a2 - b2).map((x2) => +x2);
   }
   getLabelForValue(value) {
     const adapter = this._adapter;
@@ -12928,18 +12922,6 @@ let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
     }
     return table2;
   }
-  _generate() {
-    const min = this.min;
-    const max = this.max;
-    let timestamps = super.getDataTimestamps();
-    if (!timestamps.includes(min) || !timestamps.length) {
-      timestamps.splice(0, 0, min);
-    }
-    if (!timestamps.includes(max) || timestamps.length === 1) {
-      timestamps.push(max);
-    }
-    return timestamps.sort((a2, b2) => a2 - b2);
-  }
   _getTimestampsForTable() {
     let timestamps = this._cache.all || [];
     if (timestamps.length) {
@@ -13104,15 +13086,12 @@ const Pie = /* @__PURE__ */ createTypedChart("pie", PieController$1);
 const Scatter = /* @__PURE__ */ createTypedChart("scatter", ScatterController$1);
 const MINOR_TICKS_PER_MAJOR = 10;
 const getLargestMajorTickWidth = (majorTickPositions) => {
-  return majorTickPositions.reduce(
-    (acc, curr, index2) => {
-      if (index2 === 0)
-        return acc;
-      const gap = Math.abs(curr - majorTickPositions[index2 - 1]);
-      return Math.max(gap, acc);
-    },
-    0
-  );
+  return majorTickPositions.reduce((acc, curr, index2) => {
+    if (index2 === 0)
+      return acc;
+    const gap = Math.abs(curr - majorTickPositions[index2 - 1]);
+    return Math.max(gap, acc);
+  }, 0);
 };
 const isValidPosition = (minorTickPosition, majorTickPositions, scale) => {
   const { axis, left: left2, top: top2, right: right2, bottom: bottom2 } = scale;
@@ -13140,18 +13119,16 @@ const getMinorTickPositions = (majorTickPositions, scale) => {
   return positions2;
 };
 const drawMinorTicksForScale = (scale) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
   const { chart: chart2, ctx } = scale;
-  const config2 = chart2.config;
-  if (!((_d2 = (_c2 = (_b2 = (_a2 = config2 == null ? void 0 : config2.options) == null ? void 0 : _a2.scales) == null ? void 0 : _b2[scale.id]) == null ? void 0 : _c2.grid) == null ? void 0 : _d2.drawOnChartArea))
+  if (!chart2.config._config.options.scales[scale.id].grid.drawOnChartArea)
     return;
-  if (config2.options.indexAxis === scale.axis)
+  if (chart2.config._config.options.indexAxis === scale.axis)
     return;
   const isHorizontal = scale.axis === "x";
   const majorTickPositions = scale.ticks.map((_2, index2) => scale.getPixelForTick(index2)).sort((a2, b2) => a2 - b2);
   const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
   ctx.save();
-  ctx.strokeStyle = ((_i2 = (_h2 = (_g2 = (_f2 = (_e2 = config2 == null ? void 0 : config2._config) == null ? void 0 : _e2.options) == null ? void 0 : _f2.scales) == null ? void 0 : _g2[scale.id]) == null ? void 0 : _h2.grid) == null ? void 0 : _i2.color) || "rgba(0,0,0,0.06)";
+  ctx.strokeStyle = chart2.config._config.options.scales[scale.id].grid.color || "rgba(0,0,0,0.06)";
   ctx.lineWidth = 0.5;
   minorTickPositions.forEach((minorTickPosition) => {
     ctx.beginPath();
@@ -13290,7 +13267,6 @@ var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
   PanZoomMode2["X"] = "x";
   PanZoomMode2["Y"] = "y";
   PanZoomMode2["XY"] = "xy";
-  PanZoomMode2["Z"] = "z";
   return PanZoomMode2;
 })(PanZoomMode || {});
 var Key = /* @__PURE__ */ ((Key2) => {
@@ -13308,7 +13284,7 @@ var Events = /* @__PURE__ */ ((Events2) => {
 })(Events || {});
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
-  beforeDraw(chart2, _args, options) {
+  beforeDraw(chart2, args, options) {
     const {
       ctx,
       chartArea: { left: left2, top: top2, width, height }
@@ -13323,7 +13299,6 @@ const chartAreaBorderPlugin = {
   }
 };
 const getPlugins = (graph, legend2) => {
-  var _a2;
   let plugins = [];
   if (graph.showMinorGridlines) {
     plugins.push(chartMinorGridlinesPlugin);
@@ -13332,25 +13307,25 @@ const getPlugins = (graph, legend2) => {
   if ((customLegend == null ? void 0 : customLegend.customLegendPlugin) && (customLegend == null ? void 0 : customLegend.customLegendContainerID)) {
     plugins.push({
       id: CUSTOM_LEGEND_PLUGIN_NAME,
-      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
+      ...legend2.customLegend.customLegendPlugin
     });
   }
   plugins.push(chartAreaBorderPlugin);
   return plugins;
 };
-const generateRandomColor = (colors2) => {
+const generateRandomColor$1 = (colors2) => {
   const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
     16
   )}`;
   if (colors2.includes(color2)) {
-    return generateRandomColor(colors2);
+    return generateRandomColor$1(colors2);
   } else {
     colors2.push(color2);
-    return colors2;
+    return color2;
   }
 };
 const setAnnotations = (annotationsData) => {
-  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_v, i2) => i2) : [];
+  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((v2, i2) => i2) : [];
 };
 const getTitle = (options) => {
   return options.title !== "" ? {
@@ -13376,16 +13351,16 @@ const getClassName = (chartStyling, styles2) => {
   }
   return cx(styles2.chart, heightStyles, squareAspectRatioStyle);
 };
-const getLegend = (options, clickHandler) => {
-  const { legend: legend2 } = options || {};
+const getLegend = (options, clickHandler, state = null) => {
+  const { legend: legend2 } = options;
   return {
-    position: (legend2 == null ? void 0 : legend2.position) || Position.Top,
-    display: legend2 == null ? void 0 : legend2.display,
-    align: legend2 == null ? void 0 : legend2.align,
+    position: legend2.position || Position.Top,
+    display: legend2.display,
+    align: legend2.align,
     labels: {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
-      boxWidth: (legend2 == null ? void 0 : legend2.usePointStyle) ? LEGEND_LABEL_BOX_SIZE : void 0,
-      usePointStyle: legend2 == null ? void 0 : legend2.usePointStyle
+      boxWidth: legend2.usePointStyle ? LEGEND_LABEL_BOX_SIZE : void 0,
+      usePointStyle: legend2.usePointStyle
     },
     onClick: clickHandler
   };
@@ -13406,7 +13381,7 @@ const getChartFileName = (axes) => {
   }
   const axesLabels = axes.reduce((acc, cur, index2) => {
     var _a2;
-    const labelWithNoSpace = ((_a2 = cur.label) == null ? void 0 : _a2.replace(/\s/g, "_")) || String(index2);
+    const labelWithNoSpace = ((_a2 = cur.label) == null ? void 0 : _a2.replace(/\s/g, "_")) || index2;
     return [...acc, labelWithNoSpace];
   }, []);
   return axesLabels.join("_");
@@ -13423,7 +13398,7 @@ const styles$5 = {
 };
 const ScatterChart = (props) => {
   setDefaultTheme();
-  const { data = { datasets: [] }, options, testId = null } = props.chart;
+  const { data, options, testId = null } = props.chart;
   return /* @__PURE__ */ jsx("div", { className: styles$5.chart, children: /* @__PURE__ */ jsx(Scatter, { options, data, "data-testid": testId }) });
 };
 function getDefaultExportFromCjs(x2) {
@@ -22098,7 +22073,6 @@ const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
 const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
 const reducer$1 = (state, action) => {
   return produce(state, (draft) => {
-    var _a2;
     switch (action.type) {
       case TOGGLE_ZOOM: {
         draft.zoomEnabled = !draft.zoomEnabled;
@@ -22156,11 +22130,11 @@ const reducer$1 = (state, action) => {
       }
       case TOGGLE_ANNOTATION: {
         const { annotationIndex } = action.payload;
-        const updatedIndexes = ((_a2 = draft == null ? void 0 : draft.showAnnotationLineIndex) == null ? void 0 : _a2.includes(
+        const updatedIndexes = draft.showAnnotationLineIndex.includes(
           annotationIndex
-        )) ? draft.showAnnotationLineIndex.filter(
+        ) ? draft.showAnnotationLineIndex.filter(
           (v2) => v2 !== annotationIndex
-        ) : [...(draft == null ? void 0 : draft.showAnnotationLineIndex) ?? [], annotationIndex];
+        ) : [...draft.showAnnotationLineIndex, annotationIndex];
         draft.showAnnotationLineIndex = updatedIndexes;
         break;
       }
@@ -22197,7 +22171,7 @@ const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
 };
 const getAxisTypeFromKey = (string) => {
   var _a2;
-  return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
+  return ((_a2 = string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) || "";
 };
 const generateKey = (values) => {
   const key = values.join("");
@@ -22220,7 +22194,7 @@ const removeExpiredChartStates = (maxAgeInHours = 72) => {
   const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1e3;
   for (let i2 = 0; i2 < localStorage.length; i2++) {
     const key = localStorage.key(i2);
-    if (key == null ? void 0 : key.includes("line-chart-state-")) {
+    if (key.includes("line-chart-state-")) {
       const chartStateObjectJSON = localStorage.getItem(key);
       if (chartStateObjectJSON) {
         const chartStateObject = JSON.parse(chartStateObjectJSON);
@@ -22249,40 +22223,38 @@ const storeChartStateInStorage = (state, persistenceId) => {
 };
 const initialState = ({ options, persistenceId }) => {
   const {
-    additionalAxesOptions: { range: customAxesRange = {} },
-    annotations: { annotationsData = [] },
+    additionalAxesOptions: { range: customAxesRange },
+    annotations: { annotationsData },
     axes,
     chartOptions: { enableZoom, enablePan, showPoints, showLine },
     legend: { display },
     dragData
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2, _c2;
     if (!axes[axisType]) {
       return [];
     }
     if (((_a2 = axes[axisType]) == null ? void 0 : _a2.length) > 1) {
-      return axes[axisType].map(
-        (axisObj, index2) => {
-          var _a3, _b3;
-          const id = generateAxisId(axisType, index2, axes[axisType].length > 1);
-          const customMin = (_a3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _a3.min;
-          const customMax = (_b3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b3.max;
-          const { unit } = axisObj;
-          return {
-            id,
-            //only add custom axis ranges if defined:
-            ...customMin ? { min: customMin } : {},
-            ...customMax ? { max: customMax } : {},
-            ...unit ? { unit } : {}
-          };
-        }
-      );
+      return axes[axisType].map((axisObj, index2) => {
+        var _a3, _b3;
+        const id = generateAxisId(axisType, index2, axes[axisType].length > 1);
+        const customMin = (_a3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _a3.min;
+        const customMax = (_b3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b3.max;
+        const { unit } = axisObj;
+        return {
+          id,
+          //only add custom axis ranges if defined:
+          ...customMin ? { min: customMin } : {},
+          ...customMax ? { max: customMax } : {},
+          ...unit ? { unit } : {}
+        };
+      });
     } else {
       const id = generateAxisId(axisType);
       const customMin = (_b2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b2.min;
       const customMax = (_c2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _c2.max;
-      const unit = (_e2 = (_d2 = axes == null ? void 0 : axes[id]) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.unit;
+      const unit = axes == null ? void 0 : axes[id][0].unit;
       return [
         {
           id,
@@ -22449,15 +22421,15 @@ const LineOptions = ({
     }
   ];
   const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
     Button,
     {
       small: true,
       basic: true,
       colored: "muted",
       round: true,
-      icon: selectedOption == null ? void 0 : selectedOption.icon,
-      onClick: selectedOption == null ? void 0 : selectedOption.onClick
+      icon: selectedOption.icon,
+      onClick: selectedOption.onClick
     }
   ) });
 };
@@ -22550,8 +22522,8 @@ const DragOptions = ({
             colored: "muted",
             basic: true,
             small: true,
-            label: (selectedOption == null ? void 0 : selectedOption.buttonLabel) || (selectedOption == null ? void 0 : selectedOption.label),
-            icon: selectedOption == null ? void 0 : selectedOption.icon
+            label: selectedOption.buttonLabel || selectedOption.label,
+            icon: selectedOption.icon
           }
         )
       }
@@ -23531,19 +23503,15 @@ const useChartFunctions = ({
 }) => {
   const {
     annotations,
-    interactions: {
-      onLegendClick,
-      onHover: onPointHover,
-      onUnhover: onPointUnhover
-    },
+    interactions: { onLegendClick, onPointHover, onPointUnhover },
     additionalAxesOptions,
     axes
   } = options;
   const legendClick = useCallback(
-    (_e2, legendItem2) => {
+    (e2, legendItem2) => {
       const { datasetIndex } = legendItem2;
-      const chartInstance = chartRef == null ? void 0 : chartRef.current;
-      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
+      const chartInstance = chartRef.current;
+      const { datasets } = chartInstance.data;
       const dataset = datasets[datasetIndex];
       const meta = chartInstance.getDatasetMeta(datasetIndex);
       meta.hidden = meta.hidden === null ? !dataset.hidden : null;
@@ -23552,7 +23520,7 @@ const useChartFunctions = ({
         dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
       }
       if (dataset.displayGroup) {
-        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
+        datasets.forEach((ds, ix) => {
           if (ds.displayGroup !== dataset.displayGroup)
             return;
           chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
@@ -23561,13 +23529,13 @@ const useChartFunctions = ({
       if (onLegendClick) {
         onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
       }
-      chartInstance == null ? void 0 : chartInstance.update();
+      chartInstance.update();
     },
     [onLegendClick, annotations]
   );
   const resetZoom2 = useCallback(() => {
-    const chartInstance = chartRef == null ? void 0 : chartRef.current;
-    chartInstance == null ? void 0 : chartInstance.resetZoom();
+    const chartInstance = chartRef.current;
+    chartInstance.resetZoom();
     dispatch({ type: "RESET_AXES_RANGES" });
   }, [chartRef]);
   const onHover = useCallback((hoveredPoint, setHoveredPoint) => {
@@ -23607,30 +23575,22 @@ const useChartFunctions = ({
   }, [chartRef, state.axes]);
   const handleKeyDown = useCallback(
     (evt) => {
-      var _a2, _b2, _c2, _d2, _e2;
       if (evt.key === Key.Shift) {
         const chart2 = chartRef.current;
-        const zoom2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.config) == null ? void 0 : _a2.options) == null ? void 0 : _b2.plugins) == null ? void 0 : _c2.zoom;
-        if (((_d2 = zoom2 == null ? void 0 : zoom2.zoom) == null ? void 0 : _d2.mode) && ((_e2 = zoom2 == null ? void 0 : zoom2.pan) == null ? void 0 : _e2.mode)) {
-          zoom2.zoom.mode = PanZoomMode.Y;
-          zoom2.pan.mode = PanZoomMode.Y;
-          chart2 == null ? void 0 : chart2.update();
-        }
+        chart2.config.options.plugins.zoom.zoom.mode = PanZoomMode.Y;
+        chart2.config.options.plugins.zoom.pan.mode = PanZoomMode.Y;
+        chart2.update();
       }
     },
     [chartRef]
   );
   const handleKeyUp = useCallback(
     (evt) => {
-      var _a2, _b2, _c2, _d2, _e2;
       if (evt.key === Key.Shift) {
         const chart2 = chartRef.current;
-        const zoom2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.config) == null ? void 0 : _a2.options) == null ? void 0 : _b2.plugins) == null ? void 0 : _c2.zoom;
-        if (((_d2 = zoom2 == null ? void 0 : zoom2.zoom) == null ? void 0 : _d2.mode) && ((_e2 = zoom2 == null ? void 0 : zoom2.pan) == null ? void 0 : _e2.mode)) {
-          zoom2.zoom.mode = PanZoomMode.XY;
-          zoom2.pan.mode = PanZoomMode.XY;
-          chart2 == null ? void 0 : chart2.update();
-        }
+        chart2.config.options.plugins.zoom.zoom.mode = PanZoomMode.Z;
+        chart2.config.options.plugins.zoom.pan.mode = PanZoomMode.Z;
+        chart2.update();
       }
     },
     [chartRef]
@@ -23676,15 +23636,13 @@ const useChartFunctions = ({
   );
   const updateAxesRangesFromChart = useCallback(() => {
     const { scales = {} } = (chartRef == null ? void 0 : chartRef.current) || {};
-    const axes2 = Object.entries(scales).map(
-      ([key, { min, max }]) => {
-        return {
-          id: key,
-          min: min ?? 0,
-          max: max ?? 0
-        };
-      }
-    );
+    const axes2 = Object.entries(scales).map(([key, { min, max }]) => {
+      return {
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0
+      };
+    });
     dispatch({
       type: UPDATE_AXES_RANGES,
       payload: { axes: axes2 }
@@ -23716,11 +23674,8 @@ var actionTypes = /* @__PURE__ */ ((actionTypes2) => {
   actionTypes2["UnitUpdated"] = "unitUpdated";
   return actionTypes2;
 })(actionTypes || {});
-const initializeFormState = ({
-  initialAxesRanges,
-  axes = []
-}) => {
-  return (initialAxesRanges == null ? void 0 : initialAxesRanges.map((initialAxisRange) => {
+const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
+  return initialAxesRanges.map((initialAxisRange) => {
     const currentAxisRange = axes.find((a2) => a2.id === initialAxisRange.id);
     return {
       id: initialAxisRange.id,
@@ -23728,7 +23683,7 @@ const initializeFormState = ({
       max: (currentAxisRange == null ? void 0 : currentAxisRange.max) ?? (initialAxisRange == null ? void 0 : initialAxisRange.max),
       unit: currentAxisRange == null ? void 0 : currentAxisRange.unit
     };
-  })) || [];
+  });
 };
 const isEmptyString = (value) => value === "";
 const createErrorMessages = (value, compareTo, type) => {
@@ -23746,12 +23701,11 @@ const validateAxes = (formState) => {
   return formState.reduce(
     (acc, { id, min, max }) => {
       return produce(acc, (draft) => {
-        var _a2;
         const errors = {
-          min: createErrorMessages(String(min), String(max), "min"),
-          max: createErrorMessages(String(max), String(min), "max")
+          min: createErrorMessages(min, max, "min"),
+          max: createErrorMessages(max, min, "max")
         };
-        (_a2 = draft == null ? void 0 : draft.errors) == null ? void 0 : _a2.push({
+        draft.errors.push({
           id,
           ...errors
         });
@@ -23771,17 +23725,13 @@ const reducer = (state, action) => {
       return produce(state, (draft) => {
         const { name: name2, value, id } = action.payload;
         const axis = draft.find((a2) => a2.id === id);
-        if (axis) {
-          axis[name2] = value;
-        }
+        axis[name2] = value;
       });
     case actionTypes.UnitUpdated:
       return produce(state, (draft) => {
         const { name: name2, value, id } = action.payload;
         const axis = draft.find((a2) => a2.id === id);
-        if (axis) {
-          axis.unit[name2] = value;
-        }
+        axis.unit[name2] = value;
       });
     default:
       return state;
@@ -23834,55 +23784,54 @@ const AxesOptionsPopover = (optionsPopover) => {
       onUpdateAxes({
         axes: sanitizedFormState
       });
-      sanitizedFormState.map((el, i2) => {
+      sanitizedFormState.forEach((el, i2) => {
         var _a3, _b2, _c2;
         const selectedUnit = (_a3 = el.unit) == null ? void 0 : _a3.selectedUnit;
         if (selectedUnit) {
           (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
         }
       });
-      if (depthType && (depthType == null ? void 0 : depthType.setSelectedDepthType)) {
-        depthType == null ? void 0 : depthType.setSelectedDepthType(depthTypeState);
+      if (depthType) {
+        depthType.setSelectedDepthType(depthTypeState);
       }
     }
-    close == null ? void 0 : close();
+    close();
   };
   const onReset = () => {
     dispatch({
       type: actionTypes.Reset,
       payload: { axes, initialAxesRanges }
     });
-    initialAxesRanges.map((el, i2) => {
+    initialAxesRanges.forEach((el, i2) => {
       var _a3, _b2, _c2;
-      const selectedUnit = (_a3 = el.unit) == null ? void 0 : _a3.selectedUnit;
+      const selectedUnit = (_a3 = el == null ? void 0 : el.unit) == null ? void 0 : _a3.selectedUnit;
       if (selectedUnit) {
         (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
       }
     });
     onResetAxes();
-    close == null ? void 0 : close();
+    close();
   };
   const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
   const handleInputFocus = (e2) => e2.target.select();
   return /* @__PURE__ */ jsxs("form", { onSubmit: onDone, children: [
     axes.map((axis, i2) => {
-      var _a3, _b2, _c2;
-      const axisControl = controlsAxesLabels.find(
+      var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+      const axisLabel = (_a3 = controlsAxesLabels.find(
         (el) => el.id === axis.id
-      );
-      const axisLabel = axisControl == null ? void 0 : axisControl.label;
-      const axisState = formState.find((a2) => a2.id === axis.id);
-      const axisErrors = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id);
-      const { min, max, unit } = axisState || {};
-      const minErrorMsg = ((_a3 = axisErrors == null ? void 0 : axisErrors.min) == null ? void 0 : _a3[0]) ? translations[axisErrors.min[0]] : null;
-      const maxErrorMsg = ((_b2 = axisErrors == null ? void 0 : axisErrors.max) == null ? void 0 : _b2[0]) ? translations[axisErrors.max[0]] : null;
+      )) == null ? void 0 : _a3.label;
+      const min = (_b2 = formState.find((a2) => a2.id === axis.id)) == null ? void 0 : _b2.min;
+      const max = (_c2 = formState.find((a2) => a2.id === axis.id)) == null ? void 0 : _c2.max;
+      const minError = (_e2 = (_d2 = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id)) == null ? void 0 : _d2.min) == null ? void 0 : _e2[0];
+      const maxError = (_g2 = (_f2 = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id)) == null ? void 0 : _f2.max) == null ? void 0 : _g2[0];
+      const unit = (_h2 = formState.find((a2) => a2.id === axis.id)) == null ? void 0 : _h2.unit;
       return /* @__PURE__ */ jsx(Field, { label: axisLabel || axis.id || "", children: /* @__PURE__ */ jsxs(InputGroup, { small: true, width: "300px", children: [
         /* @__PURE__ */ jsx(
           NumberInput,
           {
             name: "min",
             value: min,
-            error: minErrorMsg,
+            error: translations[minError],
             size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
@@ -23899,7 +23848,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           {
             name: "max",
             value: max,
-            error: maxErrorMsg,
+            error: translations[maxError],
             size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
@@ -23914,7 +23863,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           Select,
           {
             name: "selectedUnit",
-            options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
+            options: (_i2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _i2.options,
             value: unit == null ? void 0 : unit.selectedUnit,
             onChange: (e2) => {
               onEditUnit({
@@ -24010,19 +23959,14 @@ const AxesOptions = (optionsPopover) => {
     }
   );
 };
-const ControlsPortal = ({
-  children,
-  controlsPortalId
-}) => {
+const ControlsPortal = ({ children, controlsPortalId }) => {
   if (controlsPortalId && document.getElementById(controlsPortalId)) {
     return /* @__PURE__ */ jsx(Portal, { id: controlsPortalId, children });
   }
   return children;
 };
 const Controls = ({
-  headerComponent,
-  subheaderComponent,
-  table: table2,
+  props: { headerComponent, subheaderComponent, table: table2 },
   chartRef,
   state,
   options,
@@ -24040,7 +23984,7 @@ const Controls = ({
     showTable,
     zoomEnabled
   } = state;
-  const { dragData, depthType } = options;
+  const { dragData } = options;
   const {
     onToggleLine,
     onTogglePan,
@@ -24067,7 +24011,7 @@ const Controls = ({
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
       headerComponent,
-      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId, children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -24077,7 +24021,7 @@ const Controls = ({
               controlsAxesLabels,
               onUpdateAxes,
               onResetAxes,
-              depthType,
+              depthType: options.depthType,
               translations
             }
           ),
@@ -24260,7 +24204,7 @@ const LegendItemLine = ({ dataset }) => {
   ) });
 };
 const LegendItemPoint = ({ dataset }) => {
-  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset;
+  const { pointBackgroundColor, pointRadius, pointStyle } = dataset;
   if (!pointRadius)
     return null;
   const size = pointRadius * 2;
@@ -24347,12 +24291,12 @@ const LegendPanel = forwardRef((props, ref) => {
   const { data, chartArea, height = 0, width = 0 } = chart2;
   const { datasets } = data;
   const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
-  const items = ((_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels(chart2)) ?? [];
+  const items = ((_d2 = (_c2 = (_b2 = (_a2 = chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels(chart2)) ?? [];
   const style = {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    left: legendPosition.includes("left") ? left2 : null,
+    right: legendPosition.includes("right") ? width - right2 : null,
+    top: legendPosition.includes("top") ? top2 : null,
+    bottom: legendPosition.includes("bottom") ? height - bottom2 : null,
     maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
     maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
     margin: LEGEND_MARGIN
@@ -24503,7 +24447,7 @@ const Legend2 = ({
       LegendDropZones,
       {
         chartArea,
-        setLegendPosition: (position) => setLegendPosition(position),
+        setLegendPosition,
         isDragging: isDragging2,
         placeholderSize: panelSize
       }
@@ -24521,122 +24465,116 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
-const defaultAxes$1 = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [],
-  y: (axes == null ? void 0 : axes.y) || []
-});
-const defaultAdditionalAxesOptions$1 = (options) => ({
-  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
-  reverse: (options == null ? void 0 : options.reverse) || false,
-  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? false,
-  stepSize: options == null ? void 0 : options.stepSize,
-  suggestedMin: options == null ? void 0 : options.suggestedMin,
-  suggestedMax: options == null ? void 0 : options.suggestedMax,
-  range: (options == null ? void 0 : options.range) || {},
-  autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
-});
-const defaultChartStyling$2 = (options) => ({
-  width: options == null ? void 0 : options.width,
-  height: options == null ? void 0 : options.height,
-  maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
-  staticChartHeight: (options == null ? void 0 : options.staticChartHeight) ?? false,
-  performanceMode: (options == null ? void 0 : options.performanceMode) ?? true,
-  squareAspectRatio: options == null ? void 0 : options.squareAspectRatio,
-  layoutPadding: (options == null ? void 0 : options.layoutPadding) || {
-    top: 0,
-    bottom: 20,
-    left: 0,
-    right: 0
-  }
-});
-const defaultTooltip$2 = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) ?? false,
-  hideSimulationName: (tooltip == null ? void 0 : tooltip.hideSimulationName) ?? false
-});
-const defaultGraph$2 = (graph) => ({
-  lineTension: (graph == null ? void 0 : graph.lineTension) ?? 0.01,
-  spanGaps: (graph == null ? void 0 : graph.spanGaps) ?? false,
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
-});
-const defaultAnnotations$1 = (annotations) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-  return {
-    labelAnnotation: {
-      showLabel: ((_a2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
-      text: ((_b2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
-      position: ((_c2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
-      fontSize: ((_d2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
-      xOffset: ((_e2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
-      yOffset: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
-      maxWidth: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
-      lineHeight: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
-    },
-    showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
-    controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
-    annotationsData: (annotations == null ? void 0 : annotations.annotationsData) ?? []
-  };
-};
-const defaultLegend$2 = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  position: (legend2 == null ? void 0 : legend2.position) ?? Position.BottomLeft,
-  align: (legend2 == null ? void 0 : legend2.align) ?? AlignOptions.Center,
-  customLegend: (legend2 == null ? void 0 : legend2.customLegend) ?? {
-    customLegendPlugin: null,
-    customLegendContainerID: ""
-  },
-  usePointStyle: (legend2 == null ? void 0 : legend2.usePointStyle) ?? true
-});
-const defaultChartOptions$2 = (options) => ({
-  showPoints: (options == null ? void 0 : options.showPoints) ?? true,
-  enableZoom: (options == null ? void 0 : options.enableZoom) ?? true,
-  enablePan: (options == null ? void 0 : options.enablePan) ?? false,
-  showLine: (options == null ? void 0 : options.showLine) ?? true,
-  closeOnOutsideClick: (options == null ? void 0 : options.closeOnOutsideClick) ?? false
-});
-const defaultInteractions$2 = (interactions) => ({
-  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
-  onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover,
-  onAnimationComplete: interactions == null ? void 0 : interactions.onAnimationComplete
-});
-const defaultDragData$1 = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
-  showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
-  roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
-  dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
-  dragY: (dragData == null ? void 0 : dragData.dragY) ?? true,
-  onDragStart: dragData == null ? void 0 : dragData.onDragStart,
-  onDrag: dragData == null ? void 0 : dragData.onDrag,
-  onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
-});
 const getDefaultProps$2 = (props) => {
-  const chart2 = (props == null ? void 0 : props.chart) || {};
-  const options = (chart2 == null ? void 0 : chart2.options) || {};
-  return {
-    persistenceId: (chart2 == null ? void 0 : chart2.persistenceId) ?? "",
-    controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
-    data: chart2 == null ? void 0 : chart2.data,
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions = props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend.customLegend || { customLegendPlugin: null, customLegendContainerID: "" };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
+  const chart2 = {
+    persistenceId: props.chart.persistenceId ?? "",
+    controlsPortalId: props.chart.controlsPortalId ?? null,
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
     options: {
-      title: (options == null ? void 0 : options.title) ?? "",
-      scales: (options == null ? void 0 : options.scales) ?? {},
-      axes: defaultAxes$1(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions$1(
-        options == null ? void 0 : options.additionalAxesOptions
-      ),
-      chartStyling: defaultChartStyling$2(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$2(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$2(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations$1(options == null ? void 0 : options.annotations),
-      legend: defaultLegend$2(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$2(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$2(options == null ? void 0 : options.interactions),
-      dragData: defaultDragData$1(options == null ? void 0 : options.dragData),
-      depthType: (options == null ? void 0 : options.depthType) ?? {}
+      title: props.chart.options.title || "",
+      scales: props.chart.options.scales || {},
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}]
+      },
+      additionalAxesOptions: {
+        chartScaleType: props.chart.options.additionalAxesOptions.chartScaleType || "linear",
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        beginAtZero: props.chart.options.additionalAxesOptions.beginAtZero || false,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        range: props.chart.options.additionalAxesOptions.range,
+        autoAxisPadding: props.chart.options.additionalAxesOptions.autoAxisPadding ?? false
+      },
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio: props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight: props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode: props.chart.options.chartStyling.performanceMode ?? true,
+        squareAspectRatio: props.chart.options.chartStyling.squareAspectRatio || false,
+        layoutPadding: props.chart.options.chartStyling.layoutPadding || {
+          top: 0,
+          bottom: 20,
+          left: 0,
+          right: 0
+        }
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips ?? true,
+        showLabelsInTooltips: props.chart.options.tooltip.showLabelsInTooltips || false,
+        hideSimulationName: props.chart.options.tooltip.hideSimulationName || false
+      },
+      graph: {
+        lineTension: props.chart.options.graph.lineTension || 0.01,
+        spanGaps: props.chart.options.graph.spanGaps || false,
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines: props.chart.options.graph.showMinorGridlines || false
+      },
+      annotations: {
+        labelAnnotation: {
+          showLabel: ((_a2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
+          text: ((_b2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
+          position: ((_c2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
+          fontSize: ((_d2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
+          xOffset: ((_e2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
+          yOffset: ((_f2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
+          maxWidth: ((_g2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
+          lineHeight: ((_h2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
+        },
+        showAnnotations: props.chart.options.annotations.showAnnotations ?? false,
+        controlAnnotation: props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || []
+      },
+      legend: {
+        display: props.chart.options.legend.display ?? true,
+        position: props.chart.options.legend.position || "bottom-left",
+        align: props.chart.options.legend.align || "center",
+        customLegend: props.chart.options.legend.customLegend,
+        usePointStyle: props.chart.options.legend.usePointStyle ?? true
+      },
+      chartOptions: {
+        showPoints: props.chart.options.chartOptions.showPoints ?? true,
+        enableZoom: props.chart.options.chartOptions.enableZoom || true,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+        showLine: props.chart.options.chartOptions.showLine ?? true,
+        closeOnOutsideClick: props.chart.options.chartOptions.closeOnOutsideClick || false
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPointHover: props.chart.options.interactions.onPointHover,
+        onPointUnhover: props.chart.options.interactions.onPointUnhover,
+        onAnimationComplete: props.chart.options.interactions.onAnimationComplete
+      },
+      depthType: props.chart.options.depthType,
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData ?? false,
+        showTooltip: props.chart.options.dragData.showTooltip ?? true,
+        roundPoints: props.chart.options.dragData.roundPoints ?? true,
+        dragX: props.chart.options.dragData.dragX ?? true,
+        dragY: props.chart.options.dragData.dragY ?? true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd
+      }
     }
   };
+  return chart2;
 };
 const DEFAULT_POINT_RADIUS = 2;
 const DEFAULT_HOVER_RADIUS = 5;
@@ -24698,7 +24636,7 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     if (formation) {
       const axesMin = (_a2 = axes[0]) == null ? void 0 : _a2.min;
       const axesMax = (_b2 = axes[0]) == null ? void 0 : _b2.max;
-      const [startPoint, endPoint] = data;
+      const [startPoint, midPointWithLabel, endPoint] = data;
       if (axesMin && (startPoint == null ? void 0 : startPoint.x)) {
         data[0].x = Math.max(axesMin, startPoint.x);
       }
@@ -24720,9 +24658,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
-      borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
+      borderColor: borderColor ?? indexedColor ?? generateRandomColor$1(COLORS),
       backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-      pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
+      pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor$1(COLORS),
       pointRadius: pointsEnabled ? linePointRadius : DEFAULT_LINE_POINT_RADIUS,
       pointHoverRadius: hoverRadius,
       pointHitRadius: line.pointHitRadius ?? hoverRadius
@@ -24762,8 +24700,8 @@ const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
 };
 const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-  const axisData = currentScales || options.axes[axisType][0] || {};
-  const stateAxis = state == null ? void 0 : state.axes.filter(
+  const axisData = currentScales || options.axes[axisType][0];
+  const stateAxis = state.axes.filter(
     (axis) => axis.id.startsWith(axisType)
   )[i2];
   const ticksConfigFromProps = (_b2 = (_a2 = options == null ? void 0 : options.scales) == null ? void 0 : _a2[`${i2 === 0 ? axisType : axisType + i2}`]) == null ? void 0 : _b2.ticks;
@@ -24810,17 +24748,14 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
 };
 const getLineChartAxes = (options, axisType, state) => {
   const axesData = options.axes[axisType];
-  const axes = axesData.reduce(
-    (acc, curr, i2) => {
-      const axisData = curr;
-      axisData.color = curr.color || COLORS[i2] || generateRandomColor(COLORS);
-      axisData.position = curr.position || getAxisPosition(axisType, i2);
-      const axis = getLineChartAxis(options, axisType, state, axisData, i2);
-      const axisId = generateAxisId(axisType, i2, true);
-      return { ...acc, [axisId]: axis };
-    },
-    {}
-  );
+  const axes = axesData.reduce((acc, curr, i2) => {
+    const axisData = curr;
+    axisData.color = curr.color || COLORS[i2] || generateRandomColor$1(COLORS);
+    axisData.position = curr.position || getAxisPosition(axisType, i2);
+    const axis = getLineChartAxis(options, axisType, state, axisData, i2);
+    const axisId = generateAxisId(axisType, i2, true);
+    return { ...acc, [axisId]: axis };
+  }, {});
   return axes;
 };
 const getLineChartScales = (options, state) => {
@@ -24869,9 +24804,11 @@ const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
     }
     return acc;
   }, {});
-  return Object.values(axesFirstLast).some(({ xFirst, xLast, yFirst, yLast }) => {
-    return isCloseTo(xFirst, xLast, { absoluteDiff: MAX_DECIMAL_DIFF }) || isCloseTo(yFirst, yLast, { absoluteDiff: MAX_DECIMAL_DIFF });
-  });
+  return Object.values(axesFirstLast).some(
+    ({ xFirst, xLast, yFirst, yLast }) => {
+      return isCloseTo(xFirst, xLast, { absoluteDiff: MAX_DECIMAL_DIFF }) || isCloseTo(yFirst, yLast, { absoluteDiff: MAX_DECIMAL_DIFF });
+    }
+  );
 };
 const whiteSpacePercentage = 0.05;
 const defaultRange = { min: -1, max: 1 };
@@ -24943,20 +24880,13 @@ const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
   }, {}));
 };
 const autoScale = (options, state, generatedDatasets, chartRef) => {
-  const {
-    additionalAxesOptions = {},
-    annotations: { annotationsData = [] } = {}
-  } = options || {};
+  const { additionalAxesOptions = {}, annotations: { annotationsData } = {} } = options || {};
   const scales = getLineChartScales(options, state) || {};
   if (!(additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding) && !estimateDataSeriesHaveCloseValues(generatedDatasets)) {
     return scales;
   }
   const scalesKeys = Object.keys(scales) ?? [];
-  const data = getAxesDataFromMetasets(
-    chartRef,
-    scalesKeys,
-    annotationsData
-  );
+  const data = getAxesDataFromMetasets(chartRef, scalesKeys, annotationsData);
   const adjustedScales = data && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
     const { min: propMin = void 0, max: propMax = void 0 } = scales[key];
     const { min, max } = getSuggestedAxisRange({
@@ -25034,7 +24964,7 @@ const annotationLeave = ({ element }, { chart: chart2 }) => {
   chart2.canvas.style.cursor = CursorStyle.Initial;
 };
 const generateAnnotations = (options, state) => {
-  const { annotationsData } = (options == null ? void 0 : options.annotations) || {};
+  const { annotationsData } = options.annotations;
   const annotations = annotationsData == null ? void 0 : annotationsData.reduce((acc, curr, i2) => {
     var _a2;
     if (!((_a2 = state == null ? void 0 : state.showAnnotationLineIndex) == null ? void 0 : _a2.includes(i2))) {
@@ -25086,9 +25016,9 @@ const generateAnnotations = (options, state) => {
   return annotations;
 };
 const getAnnotation = (options, state) => {
-  const { showAnnotations, annotationsData } = (options == null ? void 0 : options.annotations) || {};
+  const { showAnnotations, annotationsData } = options.annotations || {};
   const shouldGenerateAnnotations = showAnnotations && (annotationsData == null ? void 0 : annotationsData.length);
-  const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : {};
+  const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : null;
   return { annotations };
 };
 const getUnitsFromLabel = (label) => {
@@ -25098,12 +25028,12 @@ const getUnitsFromLabel = (label) => {
 };
 const getLineChartToolTips = (options) => {
   const getTooltipLabels = (dataset) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2;
     const xIndex = ((_a2 = dataset.xAxisID) == null ? void 0 : _a2.length) > 1 ? dataset.xAxisID[1] - 1 : 0;
     const yIndex = ((_b2 = dataset.yAxisID) == null ? void 0 : _b2.length) > 1 ? dataset.yAxisID[1] - 1 : 0;
     const xAxis = options.axes.x[xIndex];
     const yAxis = options.axes.y[yIndex];
-    if (((_e2 = (_d2 = (_c2 = options == null ? void 0 : options.axes) == null ? void 0 : _c2.x) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.position) === Position.Top) {
+    if (options.axes.x[0].position === Position.Top) {
       return {
         titleAxisLabel: (yAxis == null ? void 0 : yAxis.label) || "",
         valueAxisLabel: (xAxis == null ? void 0 : xAxis.label) || "",
@@ -25196,7 +25126,6 @@ const useChartOptions = ({
   dispatch,
   generatedDatasets
 }) => {
-  var _a2, _b2;
   const {
     interactions: { onAnimationComplete },
     annotations: {
@@ -25209,7 +25138,7 @@ const useChartOptions = ({
         yOffset,
         maxWidth,
         lineHeight
-      } = {}
+      }
     },
     chartStyling: { layoutPadding }
   } = options;
@@ -25238,7 +25167,7 @@ const useChartOptions = ({
     [showAnnotationLineIndex, legendClick]
   );
   const legend2 = useMemo(
-    () => getLegend(options, legendClick),
+    () => getLegend(options, legendClick, state),
     [legendEnabled]
   );
   const scales = useMemo(
@@ -25253,8 +25182,8 @@ const useChartOptions = ({
     () => ({
       enabled: panEnabled,
       mode: PanZoomMode.XY,
-      onPanComplete() {
-        updateAxesRangesFromChart();
+      onPanComplete({ chart: chart2 }) {
+        updateAxesRangesFromChart(chart2);
       }
     }),
     [panEnabled]
@@ -25269,8 +25198,8 @@ const useChartOptions = ({
         borderColor: BORDER_COLOR,
         borderWidth: 1
       },
-      onZoomComplete() {
-        updateAxesRangesFromChart();
+      onZoomComplete({ chart: chart2 }) {
+        updateAxesRangesFromChart(chart2);
       }
     }),
     [zoomEnabled]
@@ -25282,8 +25211,8 @@ const useChartOptions = ({
     tooltip,
     legend: { ...legend2, display: false },
     // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: ((_a2 = options.legend.customLegend) == null ? void 0 : _a2.customLegendPlugin) && {
-      containerID: (_b2 = options.legend.customLegend) == null ? void 0 : _b2.customLegendContainerID
+    [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend.customLegendPlugin && {
+      containerID: options.legend.customLegend.customLegendContainerID
     },
     chartAreaBorder: {
       borderColor: BORDER_COLOR
@@ -25307,7 +25236,7 @@ const useChartOptions = ({
       },
       onHover: onHover(hoveredPoint, setHoveredPoint),
       maintainAspectRatio: options.chartStyling.maintainAspectRatio,
-      aspectRatio: options.chartStyling.squareAspectRatio ? 1 : 0,
+      aspectRatio: options.chartStyling.squareAspectRatio ? 1 : null,
       animation: options.chartStyling.performanceMode ? false : {
         duration: ANIMATION_DURATION.FAST,
         onComplete: onAnimationComplete
@@ -25329,7 +25258,10 @@ const useChartOptions = ({
     [state, options]
   );
 };
-const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
+const useChartPlugins = ({
+  options,
+  resetZoom: resetZoom2
+}) => {
   const { graph, legend: legend2 } = options;
   const debouncedResetZoom = useCallback(
     debounce$3(() => {
@@ -25339,7 +25271,7 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
-    (_chart, args) => {
+    (chart2, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
         debouncedResetZoom();
@@ -25372,19 +25304,15 @@ const getAxesRangesFromChart = (chartRef, axes) => {
   });
 };
 const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
-  var _a2, _b2;
   useEffect(() => {
-    var _a3, _b3;
-    if ((_b3 = (_a3 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a3.customLegend) == null ? void 0 : _b3.customLegendPlugin) {
+    if (memoOptions.legend.customLegend.customLegendPlugin) {
       const parent = document.getElementById(
         memoOptions.legend.customLegend.customLegendContainerID
       );
-      if (parent !== null) {
-        parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
-      }
+      parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
     }
   }, [
-    (_b2 = (_a2 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin,
+    memoOptions.legend.customLegend.customLegendPlugin,
     memoState.legendEnabled
   ]);
 };
@@ -25401,7 +25329,7 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 const useUpdateAxesRanges = (range, dispatch) => {
-  const prevRange = useRef(null);
+  const prevRange = useRef();
   const updateAxesRanges = useCallback(() => {
     if (range && range.x && range.y && !isEqual(range, prevRange.current)) {
       const axes = Object.entries(range).map(([key, { min, max }]) => ({
@@ -25585,9 +25513,9 @@ const chartAreaTextPlugin = {
       maxWidth: initialMaxWidth,
       position
     } = options;
+    const { ctx, chartArea } = chart2;
     if (!showLabel || !text)
       return;
-    const { ctx, chartArea } = chart2;
     const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
     const [x2, y2] = getPositionCoordinates(position, chart2, xOffset, yOffset);
     renderWrappedText(ctx, {
@@ -25665,7 +25593,7 @@ const LineChart = (props) => {
   const { translations, languageKey } = getConfig();
   const chart2 = getDefaultProps$2(props);
   const {
-    data: { datasets } = { datasets: [] },
+    data: { datasets },
     options,
     testId,
     persistenceId,
@@ -25723,7 +25651,7 @@ const LineChart = (props) => {
         /* @__PURE__ */ jsx(
           Controls,
           {
-            ...props,
+            props,
             chartRef,
             state,
             options,
@@ -25733,7 +25661,7 @@ const LineChart = (props) => {
             controlsPortalId
           }
         ),
-        table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$4.table, children: table2 }) : /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, children: /* @__PURE__ */ jsxs("div", { className: styles$4.canvas, id: "canvas", children: [
+        table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$4.table, children: table2 }) : /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$4.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Line,
             {
@@ -25748,6 +25676,7 @@ const LineChart = (props) => {
           showCustomLegend && /* @__PURE__ */ jsx(
             Legend2,
             {
+              props,
               chartRef,
               state,
               options,
@@ -25794,59 +25723,84 @@ const styles$1 = {
   help: help$1,
   autoWeight: autoWeight$1
 };
-const defaultChartStyling$1 = (styling) => ({
-  width: styling == null ? void 0 : styling.width,
-  height: styling == null ? void 0 : styling.height,
-  maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
-  staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
-  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
-});
-const defaultTooltip$1 = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
-});
-const defaultGraph$1 = (graph) => ({
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
-  stacked: (graph == null ? void 0 : graph.stacked) || false,
-  cutout: (graph == null ? void 0 : graph.cutout) || 0
-});
-const defaultLegend$1 = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  useDataset: (legend2 == null ? void 0 : legend2.useDataset) || false,
-  position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
-  align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center
-});
-const defaultChartOptions$1 = (options) => ({
-  enableZoom: (options == null ? void 0 : options.enableZoom) || false,
-  enablePan: (options == null ? void 0 : options.enablePan) || false
-});
-const defaultInteractions$1 = (interactions) => ({
-  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
-  onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover
-});
-const defaultChartData = (data) => {
-  return {
-    labels: (data == null ? void 0 : data.labels) || [],
-    datasets: (data == null ? void 0 : data.datasets) || []
-  };
+const colors$1 = [
+  "#3366cc",
+  "#dc3912",
+  "#ff9900",
+  "#109618",
+  "#990099",
+  "#0099c6",
+  "#dd4477",
+  "#66aa00",
+  "#b82e2e",
+  "#316395",
+  "#994499",
+  "#22aa99",
+  "#aaaa11",
+  "#6633cc",
+  "#e67300",
+  "#8b0707",
+  "#651067",
+  "#329262",
+  "#5574a6",
+  "#3b3eac"
+];
+const generateRandomColor = () => {
+  const color2 = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  if (colors$1.includes(color2)) {
+    return generateRandomColor();
+  } else {
+    colors$1.push(color2);
+    return color2;
+  }
 };
 const getDefaultProps$1 = (props) => {
-  const chart2 = (props == null ? void 0 : props.chart) || {};
-  const options = (chart2 == null ? void 0 : chart2.options) || {};
-  return {
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
-    data: defaultChartData(chart2 == null ? void 0 : chart2.data),
+  props.chart.options = props.chart.options || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  const chart2 = {
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
     options: {
-      title: (options == null ? void 0 : options.title) || "",
-      chartStyling: defaultChartStyling$1(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$1(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$1(options == null ? void 0 : options.graph),
-      legend: defaultLegend$1(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$1(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$1(options == null ? void 0 : options.interactions)
+      title: props.chart.options.title || "",
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio: props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight: props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode: props.chart.options.chartStyling.performanceMode != null ? props.chart.options.chartStyling.performanceMode : true
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips != null ? props.chart.options.tooltip.tooltips : true,
+        showLabelsInTooltips: props.chart.options.tooltip.showLabelsInTooltips || false
+      },
+      graph: {
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        stacked: props.chart.options.graph.stacked || false,
+        cutout: props.chart.options.graph.cutout || 0
+      },
+      legend: {
+        display: props.chart.options.legend.display != null ? props.chart.options.legend.display : true,
+        useDataset: props.chart.options.legend.useDataset || false,
+        position: props.chart.options.legend.position || "bottom",
+        align: props.chart.options.legend.align || "center"
+      },
+      chartOptions: {
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPieHover: props.chart.options.interactions.onPieHover,
+        onPieUnhover: props.chart.options.interactions.onPieUnhover
+      }
     }
   };
+  return chart2;
 };
 Chart$2.register(
   LinearScale$1,
@@ -25867,25 +25821,25 @@ const PieChart = (props) => {
   const [pointHover, setPointHover] = useState(false);
   const { data, options, testId } = chart2;
   const generateDatasets = (datasets) => {
-    const copyDataset = [...datasets];
+    const copyDataset = JSON.parse(JSON.stringify(datasets));
     if (options.graph.stacked) {
       const generatedDataset = {
         label: copyDataset[0].label,
         backgroundColor: [],
         borderColor: [],
-        borderWidth: Number(copyDataset[0].borderWidth) || 1,
+        borderWidth: parseFloat(copyDataset[0].borderWidth) || "1",
         data: []
       };
-      data.labels.map((_label, labelIndex) => {
+      data.labels.map((label, labelIndex) => {
         copyDataset.map((arc, arcIndex) => {
           generatedDataset.data.push(arc.data[labelIndex]);
           const { backgroundColor } = arc;
           const { borderColor } = arc;
           generatedDataset.backgroundColor.push(
-            (Array.isArray(backgroundColor) ? backgroundColor[labelIndex % ((borderColor == null ? void 0 : borderColor.length) || 1)] : backgroundColor) || COLORS[labelIndex] + `${99 - 10 * arcIndex}`
+            (Array.isArray(backgroundColor) ? backgroundColor[labelIndex % borderColor.length] : backgroundColor) || colors$1[labelIndex] + `${99 - 10 * arcIndex}`
           );
           generatedDataset.borderColor.push(
-            (Array.isArray(borderColor) ? borderColor[labelIndex % borderColor.length] : borderColor) || COLORS[labelIndex]
+            (Array.isArray(borderColor) ? borderColor[labelIndex % borderColor.length] : borderColor) || colors$1[labelIndex]
           );
         });
       });
@@ -25894,7 +25848,9 @@ const PieChart = (props) => {
     const generatedDatasets2 = copyDataset.map(
       (pieDataset, index2) => {
         const borderWidth = parseFloat(pieDataset.borderWidth) || "1";
-        const color2 = pieDataset.data.map((_pie, i2) => COLORS[i2]) || generateRandomColor(COLORS);
+        const color2 = pieDataset.data.map(
+          (_pie, i2) => colors$1[i2] || generateRandomColor()
+        );
         const borderColor = pieDataset.borderColor || color2;
         const backgroundColor = pieDataset.backgroundColor || color2.map((col) => col + `${99 - 11 * index2}`);
         return {
@@ -25914,10 +25870,10 @@ const PieChart = (props) => {
       text: chart2.options.title
     } : {};
   };
-  const legendClick = (_e2, legendItem2, legend2) => {
+  const legendClick = (e2, legendItem2, legend2) => {
     const chartInstance = legend2.chart;
     const { datasets } = chartInstance.data;
-    const { index: index2 = 0, text = "", hidden = false } = legendItem2 || {};
+    const { index: index2 } = legendItem2;
     if (options.graph.stacked) {
       if (options.legend.useDataset) {
         for (let i2 = 0; i2 < chartInstance.config._config.data.datasets[0].data.length; i2++) {
@@ -25929,7 +25885,7 @@ const PieChart = (props) => {
         }
       } else {
         for (let i2 = 0; i2 < chartInstance.config._config.data.datasets[0].data.length; i2++) {
-          if (parseInt(String(i2 / data.datasets.length)) === index2) {
+          if (parseInt(i2 / data.datasets.length) === index2) {
             const meta = chartInstance.getDatasetMeta(0);
             const arc = meta.data[i2];
             arc.hidden = !arc.hidden;
@@ -25955,25 +25911,25 @@ const PieChart = (props) => {
       }
     }
     if (options.interactions.onLegendClick)
-      options.interactions.onLegendClick(text, hidden);
+      options.interactions.onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
     chartInstance.update();
   };
-  const onClick = (_evt, _elements, chartInstance) => {
+  const onClick = (evt, elements, chartInstance) => {
     chartInstance.resetZoom();
   };
   const onHover = (evt, hoveredItems) => {
     if (pointHover && !(hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(false);
-      if (options.interactions.onUnhover) {
-        options.interactions.onUnhover(evt);
+      if (options.interactions.onPieUnhover) {
+        options.interactions.onPieUnhover(evt);
       }
     }
     if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(true);
-      if (options.interactions.onHover) {
+      if (options.interactions.onPieHover) {
         const { index: index2, datasetIndex } = hoveredItems[0];
         const generatedDataset = generatedDatasets;
-        options.interactions.onHover(
+        options.interactions.onPieHover(
           evt,
           datasetIndex,
           index2,
@@ -25987,7 +25943,7 @@ const PieChart = (props) => {
       display: "auto",
       align: "center",
       anchor: "center",
-      formatter: (_value, context) => {
+      formatter: (value, context) => {
         if (context.chart.getDatasetMeta(
           options.graph.stacked ? 0 : context.datasetIndex
         ).data[context.dataIndex].hidden)
@@ -26006,74 +25962,85 @@ const PieChart = (props) => {
     };
   };
   const getLegend2 = () => {
-    const generateLabels = (chartInstance) => {
-      const meta = chartInstance.getDatasetMeta(0);
-      const getStyles = (dataset, i2) => {
-        const dataPoint = dataset.data[i2 % dataset.data.length];
-        const { label } = dataPoint;
-        const arc = meta.data[i2];
-        const text = arc.hidden ? "-".repeat(label.length) : label;
-        const backgroundColor = dataPoint == null ? void 0 : dataPoint.backgroundColor;
-        const borderColor = dataPoint == null ? void 0 : dataPoint.borderColor;
-        return {
-          text,
-          fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[0] : backgroundColor) || COLORS[0] + `${99 - 20 * i2}`,
-          strokeStyle: (Array.isArray(borderColor) ? borderColor[0] : borderColor) || COLORS[0],
-          index: i2
-        };
-      };
-      let mappedData;
-      if (options.graph.stacked) {
-        if (options.legend.useDataset) {
-          mappedData = data.datasets.map(getStyles);
-        } else {
-          mappedData = data.labels.map((label, i2) => {
-            var _a2, _b2;
-            const arc = meta.data[parseInt(String(i2 * data.datasets.length))];
-            const text = arc.hidden ? "-".repeat(label.length) : label;
-            const backgroundColor = (_a2 = data.datasets[0]) == null ? void 0 : _a2.backgroundColor;
-            const borderColor = (_b2 = data.datasets[0]) == null ? void 0 : _b2.borderColor;
-            return {
-              text,
-              fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[i2 % backgroundColor.length] : backgroundColor) || COLORS[i2] + "99",
-              strokeStyle: (Array.isArray(borderColor) ? borderColor[i2 % ((backgroundColor == null ? void 0 : backgroundColor.length) ?? 0)] : borderColor) || COLORS[i2],
-              index: i2
-            };
-          });
-        }
-      } else if (options.legend.useDataset) {
-        mappedData = data.datasets.map(getStyles);
-      } else {
-        mappedData = data.labels.map((label, i2) => {
-          var _a2, _b2;
-          const arc = meta.data[i2];
-          const text = arc.hidden ? "-".repeat(label.length) : label;
-          const backgroundColor = (_a2 = data.datasets[0]) == null ? void 0 : _a2.backgroundColor;
-          const borderColor = (_b2 = data.datasets[0]) == null ? void 0 : _b2.borderColor;
-          return {
-            text,
-            fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[i2 % backgroundColor.length] : backgroundColor) || COLORS[i2] + "99",
-            strokeStyle: (Array.isArray(borderColor) ? borderColor[i2 % ((backgroundColor == null ? void 0 : backgroundColor.length) ?? 0)] : borderColor) || COLORS[i2],
-            index: i2
-          };
-        });
-      }
-      return mappedData;
-    };
     return {
       position: options.legend.position,
       display: options.legend.display,
       align: options.legend.align,
       labels: {
-        generateLabels,
+        generateLabels(chartInstance) {
+          if (options.graph.stacked) {
+            const meta = chartInstance.getDatasetMeta(0);
+            if (options.legend.useDataset) {
+              return data.datasets.map((data2, i2) => {
+                var _a2, _b2;
+                const { label } = data2.datasets[i2 % data2.datasets.length];
+                const arc = meta.data[i2];
+                const text = arc.hidden ? label.split("").reduce((acc, curr) => acc + "-", "") : label;
+                const backgroundColor = (_a2 = data2.datasets[i2]) == null ? void 0 : _a2.backgroundColor;
+                const borderColor = (_b2 = data2.datasets[i2]) == null ? void 0 : _b2.borderColor;
+                return {
+                  text,
+                  fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[0] : backgroundColor) || colors$1[0] + `${99 - 20 * i2}`,
+                  strokeStyle: (Array.isArray(borderColor) ? borderColor[0] : borderColor) || colors$1[0],
+                  index: i2
+                };
+              });
+            } else {
+              return data.labels.map((data2, i2) => {
+                var _a2, _b2;
+                const label = data2.labels[i2];
+                const arc = meta.data[parseInt(i2 * data2.datasets.length)];
+                const text = arc.hidden ? label.split("").reduce((acc, curr) => acc + "-", "") : label;
+                const backgroundColor = (_a2 = data2.datasets[0]) == null ? void 0 : _a2.backgroundColor;
+                const borderColor = (_b2 = data2.datasets[0]) == null ? void 0 : _b2.borderColor;
+                return {
+                  text,
+                  fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[i2 % backgroundColor.length] : backgroundColor) || colors$1[i2] + "99",
+                  strokeStyle: (Array.isArray(borderColor) ? borderColor[i2 % backgroundColor.length] : borderColor) || colors$1[i2],
+                  index: i2
+                };
+              });
+            }
+          }
+          if (options.legend.useDataset) {
+            return data.datasets.map((dataset, i2) => {
+              var _a2, _b2;
+              const meta = chartInstance.getDatasetMeta(i2);
+              const text = meta.hidden ? dataset.label.split("").reduce((acc, curr) => acc + "-", "") : dataset.label;
+              const backgroundColor = (_a2 = data.datasets[i2]) == null ? void 0 : _a2.backgroundColor;
+              const borderColor = (_b2 = data.datasets[i2]) == null ? void 0 : _b2.borderColor;
+              return {
+                text,
+                fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[0] : backgroundColor) || colors$1[0] + `${99 - 20 * i2}`,
+                strokeStyle: (Array.isArray(borderColor) ? borderColor[0] : borderColor) || colors$1[0],
+                index: i2
+              };
+            });
+          } else {
+            return data.labels.map((label, i2) => {
+              var _a2, _b2;
+              const meta = chartInstance.getDatasetMeta(0);
+              const arc = meta.data[i2];
+              const text = arc.hidden ? label.split("").reduce((acc, curr) => acc + "-", "") : label;
+              const backgroundColor = (_a2 = data.datasets[0]) == null ? void 0 : _a2.backgroundColor;
+              const borderColor = (_b2 = data.datasets[0]) == null ? void 0 : _b2.borderColor;
+              return {
+                text,
+                fillStyle: (Array.isArray(backgroundColor) ? backgroundColor[i2 % backgroundColor.length] : backgroundColor) || colors$1[i2] + "99",
+                strokeStyle: (Array.isArray(borderColor) ? borderColor[i2 % backgroundColor.length] : borderColor) || colors$1[i2],
+                index: i2
+              };
+            });
+          }
+        },
         boxHeight: 6,
         boxWidth: 6,
         usePointStyle: true,
-        filter: (item) => {
+        filter: (item, data2) => {
           var _a2;
           if (!options.legend.useDataset)
             return true;
-          return !((_a2 = data.datasets[item.index]) == null ? void 0 : _a2.hideLegend);
+          return !((_a2 = data2.datasets[item.index]) == null ? void 0 : _a2.hideLegend);
         }
       },
       onClick: legendClick
@@ -26084,7 +26051,7 @@ const PieChart = (props) => {
       callbacks: {
         title: (tooltipItem) => {
           const { dataIndex } = tooltipItem[0];
-          const index2 = options.graph.stacked ? parseInt(String(dataIndex / data.labels.length)) : dataIndex;
+          const index2 = options.graph.stacked ? parseInt(dataIndex / data.labels.length) : dataIndex;
           const label = data.labels[index2];
           return `${label}`;
         },
@@ -26096,7 +26063,7 @@ const PieChart = (props) => {
           const value = tooltipItem.dataset.data[dataIndex];
           const labelValue = typeof value === "object" ? `${value.value || ""} ${options.tooltip.showLabelsInTooltips && value.label ? "(" + value.label + ")" : ""}` : value;
           const unit = (data == null ? void 0 : data.yUnit) ? `[${data == null ? void 0 : data.yUnit}]` : "";
-          const formattedValue = Math.abs(labelValue) < 1 ? roundNumberToPrecision(labelValue, 3) : round$2(labelValue, 3);
+          const formattedValue = Math.abs(labelValue) < 1 ? roundNumberToPrecision(labelValue, { n: 3 }) : round$2(labelValue, 3);
           return `${dataLabel} ${formattedValue} ${unit}`;
         }
       },
@@ -26138,14 +26105,32 @@ const PieChart = (props) => {
             },
             hover: {
               mode: "nearest",
-              intersect: true
+              intersect: "true"
             },
             onHover,
+            elements: {
+              pie: {
+                pointStyle: "circle"
+              }
+            },
             plugins: {
               annotation: false,
               // Disable globally-registered annotation plugin
               title: getTitle2(),
               datalabels: getDatalabels(),
+              // zoom: {
+              //   pan: {
+              //     enabled: ,
+              //     mode: ,
+              //   },
+              //   zoom: {
+              //     drag: {
+              //       enabled:,
+              //     },
+              //     mode: ,
+              //     speed: ,
+              //   },
+              // },
               tooltip: getToolTips(),
               legend: getLegend2()
             }
@@ -38531,102 +38516,93 @@ const styles = {
   help,
   autoWeight
 };
-const defaultAxes = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
-});
-const defaultAdditionalAxesOptions = (options) => ({
-  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
-  reverse: (options == null ? void 0 : options.reverse) || false,
-  stacked: (options == null ? void 0 : options.stacked) || false,
-  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? true,
-  stepSize: options == null ? void 0 : options.stepSize,
-  suggestedMin: options == null ? void 0 : options.suggestedMin,
-  suggestedMax: options == null ? void 0 : options.suggestedMax,
-  min: options == null ? void 0 : options.min,
-  max: options == null ? void 0 : options.max
-});
-const defaultChartStyling = (styling) => ({
-  width: styling == null ? void 0 : styling.width,
-  height: styling == null ? void 0 : styling.height,
-  maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
-  staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
-  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
-});
-const defaultTooltip = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
-});
-const defaultGraph = (graph) => ({
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
-});
-const defaultAnnotations = (annotations) => ({
-  showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
-  controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
-  annotationsData: (annotations == null ? void 0 : annotations.annotationsData) || []
-});
-const defaultLegend = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
-  align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center,
-  customLegend: (legend2 == null ? void 0 : legend2.customLegend) || {
-    customLegendPlugin: null,
-    customLegendContainerID: ""
-  }
-});
-const defaultChartOptions = (options) => ({
-  enableZoom: (options == null ? void 0 : options.enableZoom) || false,
-  enablePan: (options == null ? void 0 : options.enablePan) || false
-});
-const defaultInteractions = (interactions) => ({
-  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
-  onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover
-});
-const defaultDragData = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) || false,
-  showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
-  roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
-  dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
-  dragY: (dragData == null ? void 0 : dragData.dragY) ?? true,
-  onDragStart: dragData == null ? void 0 : dragData.onDragStart,
-  onDrag: dragData == null ? void 0 : dragData.onDrag,
-  onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
-});
 const getDefaultProps = (props) => {
-  const chart2 = (props == null ? void 0 : props.chart) || {};
-  const options = (chart2 == null ? void 0 : chart2.options) || {};
-  return {
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? "",
-    data: chart2 == null ? void 0 : chart2.data,
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions = props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend.customLegend || { customLegendPlugin: null, customLegendContainerID: "" };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
+  const chart2 = {
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
     options: {
-      title: (options == null ? void 0 : options.title) || "",
-      direction: (options == null ? void 0 : options.direction) || "vertical",
-      axes: defaultAxes(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions(
-        options == null ? void 0 : options.additionalAxesOptions
-      ),
-      chartStyling: defaultChartStyling(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations(options == null ? void 0 : options.annotations),
-      legend: defaultLegend(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions(options == null ? void 0 : options.interactions),
-      dragData: defaultDragData(options == null ? void 0 : options.dragData)
-    }
-  };
-};
-const getBarChartAxis = ({
-  chart: chart2,
-  axisType = AxisType.X,
-  currentScale,
-  i: i2
-}) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
+      title: props.chart.options.title || "",
+      direction: props.chart.options.direction || "vertical",
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}]
+      },
+      additionalAxesOptions: {
+        chartScaleType: props.chart.options.additionalAxesOptions.chartScaleType || "linear",
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        stacked: props.chart.options.additionalAxesOptions.stacked || false,
+        beginAtZero: props.chart.options.additionalAxesOptions.beginAtZero != null ? props.chart.options.additionalAxesOptions.beginAtZero : true,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        min: props.chart.options.additionalAxesOptions.min,
+        max: props.chart.options.additionalAxesOptions.max
+      },
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio: props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight: props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode: props.chart.options.chartStyling.performanceMode != null ? props.chart.options.chartStyling.performanceMode : true
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips != null ? props.chart.options.tooltip.tooltips : true,
+        showLabelsInTooltips: props.chart.options.tooltip.showLabelsInTooltips || false
+      },
+      graph: {
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines: props.chart.options.graph.showMinorGridlines || false
+      },
+      annotations: {
+        showAnnotations: props.chart.options.annotations.showAnnotations != null ? props.chart.options.annotations.showAnnotations : true,
+        controlAnnotation: props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || []
+      },
+      legend: {
+        display: props.chart.options.legend.display != null ? props.chart.options.legend.display : true,
+        position: props.chart.options.legend.position || "bottom",
+        align: props.chart.options.legend.align || "center",
+        customLegend: props.chart.options.legend.customLegend
+      },
+      chartOptions: {
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onBarHover: props.chart.options.interactions.onBarHover,
+        onBarUnhover: props.chart.options.interactions.onBarUnhover
+      },
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData || false,
+        showTooltip: props.chart.options.dragData.showTooltip || true,
+        roundPoints: props.chart.options.dragData.roundPoints || true,
+        dragX: props.chart.options.dragData.dragX || true,
+        dragY: props.chart.options.dragData.dragY || true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd
+      }
+    }
+  };
+  return chart2;
+};
+const getBarChartAxis = (chart2, axisType, currentScales, i2) => {
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
   const isDirectionVertical = isVertical(chart2.options.direction);
-  const axisData = currentScale || chart2.options.axes[axisType][0];
+  const axisData = currentScales || chart2.options.axes[axisType][0];
   const isDirectionCompatibleWithAxisType = isDirectionVertical && axisType === AxisType.Y || !isDirectionVertical && axisType === AxisType.X;
   const grid = (axisData == null ? void 0 : axisData.gridLines) || {};
   const getScaleType = () => {
@@ -38647,7 +38623,7 @@ const getBarChartAxis = ({
       return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
     };
     const stepSize = !isLogarithmic ? {
-      stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions == null ? void 0 : additionalAxesOptions.stepSize : null)
+      stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null)
     } : {};
     const ticks = {
       ...stepSize,
@@ -38663,68 +38639,56 @@ const getBarChartAxis = ({
   };
   return {
     type: getScaleType(),
-    position: axisData == null ? void 0 : axisData.position,
-    beginAtZero: (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.additionalAxesOptions) == null ? void 0 : _b2.beginAtZero,
+    position: axisData.position,
+    beginAtZero: chart2.options.additionalAxesOptions.beginAtZero,
     reverse: getReverse(),
-    suggestedMax: (_d2 = (_c2 = chart2.options) == null ? void 0 : _c2.additionalAxesOptions) == null ? void 0 : _d2.suggestedMax,
-    suggestedMin: (_f2 = (_e2 = chart2.options) == null ? void 0 : _e2.additionalAxesOptions) == null ? void 0 : _f2.suggestedMin,
-    min: isDirectionCompatibleWithAxisType ? (_h2 = (_g2 = chart2.options) == null ? void 0 : _g2.additionalAxesOptions) == null ? void 0 : _h2.min : void 0,
-    max: isDirectionCompatibleWithAxisType ? (_j2 = (_i2 = chart2.options) == null ? void 0 : _i2.additionalAxesOptions) == null ? void 0 : _j2.max : void 0,
+    suggestedMax: (_b2 = (_a2 = chart2.options) == null ? void 0 : _a2.additionalAxesOptions) == null ? void 0 : _b2.suggestedMax,
+    suggestedMin: (_d2 = (_c2 = chart2.options) == null ? void 0 : _c2.additionalAxesOptions) == null ? void 0 : _d2.suggestedMin,
+    min: isDirectionCompatibleWithAxisType ? (_f2 = (_e2 = chart2.options) == null ? void 0 : _e2.additionalAxesOptions) == null ? void 0 : _f2.min : void 0,
+    max: isDirectionCompatibleWithAxisType ? (_h2 = (_g2 = chart2.options) == null ? void 0 : _g2.additionalAxesOptions) == null ? void 0 : _h2.max : void 0,
     title: {
-      display: ((_k2 = axisData == null ? void 0 : axisData.label) == null ? void 0 : _k2.length) || ((_l2 = axisData == null ? void 0 : axisData.unit) == null ? void 0 : _l2.length),
-      text: (axisData == null ? void 0 : axisData.label) || (axisData == null ? void 0 : axisData.unit),
+      display: ((_i2 = axisData.label) == null ? void 0 : _i2.length) || ((_j2 = axisData.unit) == null ? void 0 : _j2.length),
+      text: axisData.label || axisData.unit,
       padding: 0
     },
     ticks: getTicks(),
     grid: {
       ...grid
     },
-    stacked: (_n2 = (_m2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _m2.additionalAxesOptions) == null ? void 0 : _n2.stacked
+    stacked: chart2.options.additionalAxesOptions.stacked
   };
 };
 const getBarChartAxes = (chart2, axisType) => {
-  var _a2, _b2;
-  const axesData = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.axes) == null ? void 0 : _b2[axisType]) || [];
-  const axes = axesData.reduce(
-    (acc, curr, i2) => {
-      const axisData = curr;
-      const color2 = curr.color || COLORS[i2] || generateRandomColor(COLORS);
-      axisData.color = color2;
-      axisData.position = curr.position || getAxisPosition(axisType, i2);
-      const axis = getBarChartAxis({ chart: chart2, axisType, currentScale: axisData });
-      const axisId = i2 === 0 ? axisType : `${axisType}${i2 + 1}`;
-      return { ...acc, [axisId]: axis };
-    },
-    {}
-  );
+  const axesData = chart2.options.axes[axisType];
+  const axes = axesData.reduce((acc, curr, i2) => {
+    const axisData = curr;
+    const color2 = curr.color || COLORS[i2] || generateRandomColor$1(COLORS);
+    axisData.color = color2;
+    axisData.position = curr.position || getAxisPosition(axisType, i2);
+    const axis = getBarChartAxis(chart2, axisType, axisData);
+    const axisId = i2 === 0 ? axisType : `${axisType}${i2 + 1}`;
+    return { ...acc, [axisId]: axis };
+  }, {});
   return axes;
 };
 const getBarChartScales = (chart2) => {
   var _a2, _b2;
   const hasMultipleXAxes = ((_a2 = chart2.options.axes.x) == null ? void 0 : _a2.length) > 1;
   const hasMultipleYAxes = ((_b2 = chart2.options.axes.y) == null ? void 0 : _b2.length) > 1;
-  const xAxesScales = hasMultipleXAxes ? getBarChartAxes(chart2, AxisType.X) : { x: getBarChartAxis({ chart: chart2, axisType: AxisType.X }) };
-  const yAxesScales = hasMultipleYAxes ? getBarChartAxes(chart2, AxisType.Y) : { y: getBarChartAxis({ chart: chart2, axisType: AxisType.Y }) };
+  const xAxesScales = hasMultipleXAxes ? getBarChartAxes(chart2, AxisType.X) : { x: getBarChartAxis(chart2, AxisType.X) };
+  const yAxesScales = hasMultipleYAxes ? getBarChartAxes(chart2, AxisType.Y) : { y: getBarChartAxis(chart2, AxisType.Y) };
   return {
     ...xAxesScales,
     ...yAxesScales
   };
 };
 const getBarChartToolTips = (options) => {
-  var _a2;
   const getTooltipLabels = (dataset) => {
-    var _a3, _b2;
+    var _a2, _b2;
     const isDirectionVertical = isVertical(options.direction);
-    const x2 = ((_a3 = options.axes) == null ? void 0 : _a3.x) || [];
-    const y2 = ((_b2 = options.axes) == null ? void 0 : _b2.y) || [];
-    const getAxisIndex = (axisID) => {
-      if (!axisID)
-        return 0;
-      const match = axisID.match(/\d+$/);
-      return match ? parseInt(match[0], 10) - 1 : 0;
-    };
-    const xIndex = getAxisIndex(dataset == null ? void 0 : dataset.xAxisID);
-    const yIndex = getAxisIndex(dataset == null ? void 0 : dataset.yAxisID);
+    const { x: x2, y: y2 } = options.axes;
+    const xIndex = ((_a2 = dataset.xAxisID) == null ? void 0 : _a2.length) > 1 ? dataset.xAxisID[1] - 1 : 0;
+    const yIndex = ((_b2 = dataset.yAxisID) == null ? void 0 : _b2.length) > 1 ? dataset.yAxisID[1] - 1 : 0;
     const xAxis = isDirectionVertical ? x2[xIndex] : y2[yIndex];
     const yAxis = isDirectionVertical ? y2[yIndex] : x2[xIndex];
     return {
@@ -38736,18 +38700,18 @@ const getBarChartToolTips = (options) => {
       valueUnit: (yAxis == null ? void 0 : yAxis.unit) || ""
     };
   };
-  const titleCallback = (tooltipItems, _data) => {
-    var _a3, _b2;
-    const barLabel = ((_a3 = tooltipItems == null ? void 0 : tooltipItems[0]) == null ? void 0 : _a3.label) || "";
-    const labels = getTooltipLabels((_b2 = tooltipItems == null ? void 0 : tooltipItems[0]) == null ? void 0 : _b2.dataset);
+  const titleCallback = (tooltipItem, data) => {
+    var _a2;
+    const barLabel = ((_a2 = tooltipItem[0]) == null ? void 0 : _a2.label) || "";
+    const labels = getTooltipLabels(tooltipItem[0].dataset);
     const { titleAxisLabel, titleUnit } = labels;
     const axisLabel = !titleAxisLabel && !titleUnit ? "" : `${titleAxisLabel || titleUnit}: `;
     return axisLabel + barLabel;
   };
   const labelCallback = (tooltipItem) => {
-    var _a3;
-    const { showLabelsInTooltips = false } = (options == null ? void 0 : options.tooltip) || {};
-    let label = ((_a3 = tooltipItem.dataset) == null ? void 0 : _a3.label) || "";
+    var _a2;
+    const { showLabelsInTooltips } = options.tooltip;
+    let label = ((_a2 = tooltipItem.dataset) == null ? void 0 : _a2.label) || "";
     const labels = getTooltipLabels(tooltipItem.dataset);
     const { valueUnit, valueAxisLabel } = labels;
     const getTooltipItemValue = () => {
@@ -38765,12 +38729,9 @@ const getBarChartToolTips = (options) => {
         tooltipItemValue2 = labelNumberFormatted;
       }
       if (Array.isArray(tooltipItem.raw)) {
-        tooltipItemValue2 = tooltipItem.raw.reduce(
-          (acc, curr, i2) => {
-            return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
-          },
-          ""
-        );
+        tooltipItemValue2 = tooltipItem.raw.reduce((acc, curr, i2) => {
+          return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+        }, "");
       }
       if (typeof tooltipItem.raw === "object") {
         tooltipItemValue2 = formattedValue;
@@ -38785,7 +38746,7 @@ const getBarChartToolTips = (options) => {
     return `${label}: ${tooltipItemValue} ${unit}${valAxisLabel}${tooltipLabel}`;
   };
   return {
-    enabled: (_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.tooltips,
+    enabled: options.tooltip.tooltips,
     mode: ChartHoverMode.Nearest,
     intersect: true,
     padding: TOOLTIP_PADDING,
@@ -38800,11 +38761,9 @@ const getBarChartToolTips = (options) => {
   };
 };
 const getBarChartDataLabels = (options) => {
-  var _a2;
-  const { beginAtZero, reverse } = (options == null ? void 0 : options.additionalAxesOptions) || {};
-  const formatterCallback = (_value, context) => {
-    const { datasetIndex, dataIndex } = context;
-    const dataset = context.chart.data.datasets[datasetIndex];
+  const { beginAtZero, reverse } = options.additionalAxesOptions;
+  const formatterCallback = (value, context) => {
+    const { dataset, dataIndex } = context;
     const dataElement = dataset.data[dataIndex];
     let dataLabel = "";
     if (typeof dataElement === "number") {
@@ -38819,7 +38778,7 @@ const getBarChartDataLabels = (options) => {
   };
   const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
   const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
-  return ((_a2 = options == null ? void 0 : options.graph) == null ? void 0 : _a2.showDataLabels) ? {
+  return options.graph.showDataLabels ? {
     display: AUTO,
     align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
     anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
@@ -38841,7 +38800,6 @@ Chart$2.register(
   Ht
 );
 const BarChart = (props) => {
-  var _a2, _b2, _c2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
@@ -38852,44 +38810,42 @@ const BarChart = (props) => {
     setAnnotations(annotations.annotationsData)
   );
   const generateBarChartDatasets = (datasets) => {
-    var _a3;
+    var _a2;
     const barDatasetsCopy = [...datasets];
-    if (annotations.controlAnnotation && annotations.showAnnotations && ((_a3 = annotations.annotationsData) == null ? void 0 : _a3.length)) {
-      annotations.annotationsData.forEach(
-        (annotation2, index2) => {
-          barDatasetsCopy.push({
-            isAnnotation: true,
-            label: annotation2.label,
-            annotationIndex: index2,
-            backgroundColor: annotation2.color || COLORS[index2],
-            borderColor: annotation2.color || COLORS[index2],
-            data: [],
-            type: ChartType.Bar
-          });
-        }
-      );
+    if (annotations.controlAnnotation && annotations.showAnnotations && ((_a2 = annotations.annotationsData) == null ? void 0 : _a2.length)) {
+      annotations.annotationsData.forEach((annotation2, index2) => {
+        barDatasetsCopy.push({
+          isAnnotation: true,
+          label: annotation2.label,
+          annotationIndex: index2,
+          backgroundColor: annotation2.color || COLORS[index2],
+          borderColor: annotation2.color || COLORS[index2],
+          data: [],
+          type: ChartType.Bar
+        });
+      });
     }
     const generatedDatasets2 = barDatasetsCopy.map((barDataset, index2) => {
       const colorSchema = COLORS;
       const colors2 = barDataset.data.map((_2, i2) => {
         const colorSelectionIndex = datasets.length > 1 ? index2 : i2;
-        return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
+        return colorSchema[colorSelectionIndex] || generateRandomColor$1(COLORS);
       });
       const backgroundColors = barDataset.backgroundColor || colors2.map((color2) => color2 + ALPHA_CHANEL);
       return {
         ...barDataset,
-        borderWidth: parseFloat(String(barDataset.borderWidth)) ?? 1,
-        borderColor: barDataset.borderColor || colors2[index2],
+        borderWidth: parseFloat(barDataset.borderWidth) || "1",
+        borderColor: barDataset.borderColor || colors2,
         backgroundColor: backgroundColors
       };
     });
-    return generatedDatasets2 || [];
+    return generatedDatasets2;
   };
-  const generatedDatasets = generateBarChartDatasets((_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets);
-  const legendClick = (_e2, legendItem2) => {
-    const index2 = (legendItem2 == null ? void 0 : legendItem2.datasetIndex) ?? null;
+  const generatedDatasets = generateBarChartDatasets(chart2.data.datasets);
+  const legendClick = (e2, legendItem2) => {
+    const index2 = legendItem2.datasetIndex;
     const chartInstance = chartRef.current;
-    if (chartInstance && index2 !== null) {
+    if (chartInstance) {
       const { datasets } = chartInstance.data;
       const dataset = datasets[index2];
       const meta = chartInstance.getDatasetMeta(index2);
@@ -38916,30 +38872,27 @@ const BarChart = (props) => {
         });
       }
       if (interactions.onLegendClick) {
-        interactions.onLegendClick(
-          legendItem2 == null ? void 0 : legendItem2.text,
-          (legendItem2 == null ? void 0 : legendItem2.hidden) ?? false
-        );
+        interactions.onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
       }
       chartInstance.update();
     }
   };
-  const onClick = (_evt, _elements, chartInstance) => {
+  const onClick = (evt, elements, chartInstance) => {
     chartInstance.resetZoom();
   };
-  const onHover = (evt, hoveredItems) => {
+  const onHover = (evt, hoveredItems, chartInstance) => {
     if (pointHover && !(hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(false);
-      if (interactions.onUnhover) {
-        interactions.onUnhover(evt);
+      if (interactions.onBarUnhover) {
+        interactions.onBarUnhover(evt);
       }
     }
     if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(true);
-      if (interactions.onHover) {
+      if (interactions.onBarHover) {
         const { index: index2, datasetIndex } = hoveredItems[0];
         const generatedDataset = generatedDatasets;
-        interactions.onHover(evt, datasetIndex, index2, generatedDataset);
+        interactions.onBarHover(evt, datasetIndex, index2, generatedDataset);
       }
     }
   };
@@ -38957,7 +38910,7 @@ const BarChart = (props) => {
         {
           ref: chartRef,
           data: {
-            labels: ((_c2 = (_b2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _b2.labels) == null ? void 0 : _c2.length) ? chart2.data.labels : [""],
+            labels: chart2.data.labels.length ? chart2.data.labels : [""],
             datasets: generatedDatasets
           },
           options: {
@@ -38972,9 +38925,9 @@ const BarChart = (props) => {
               mode: ChartHoverMode.Nearest,
               intersect: true
             },
-            // elements: {
-            //   bar: { pointStyle: PointStyle.Circle },
-            // },
+            elements: {
+              bar: { pointStyle: PointStyle.Circle }
+            },
             scales: getBarChartScales(chart2),
             plugins: {
               title: getTitle(options),