@oliasoft-open-source/charts-library 3.4.6 → 3.4.7

package/dist/index.js

@@ -576,7 +576,7 @@ let Color$1 = class Color {
   }
 };
 /*!
- * Chart.js v4.3.0
+ * Chart.js v4.3.2
  * 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, iScale.axis, min).lo,
+        _lookupByKey$1(_parsed, 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$2 = [
+const colors$1 = [
   "color",
   "borderColor",
   "backgroundColor"
@@ -1194,7 +1194,7 @@ function applyAnimationsDefaults(defaults2) {
   defaults2.set("animations", {
     colors: {
       type: "color",
-      properties: colors$2
+      properties: colors$1
     },
     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.0
+ * Chart.js v4.3.2
  * 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;
+    line.points = points.slice(Math.max(this._drawStart - 1, 0), this._drawStart + this._drawCount);
     const options = this.resolveDatasetElementOptions(mode);
     if (!this.options.showLine) {
       options.borderWidth = 0;
@@ -4939,6 +4939,9 @@ 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;
@@ -4950,6 +4953,9 @@ 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);
   }
@@ -7956,7 +7962,7 @@ function needContext$1(proxy, names2) {
   }
   return false;
 }
-var version$3 = "4.3.0";
+var version$3 = "4.3.2";
 const KNOWN_POSITIONS$1 = [
   "top",
   "bottom",
@@ -10563,7 +10569,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);
+        cursor.y += calculateLegendItemHeight(legendItem2, fontLineHeight) + padding;
       } else {
         cursor.y += lineHeight;
       }
@@ -10677,7 +10683,7 @@ function calculateItemHeight(_itemHeight, legendItem2, fontLineHeight) {
   return itemHeight;
 }
 function calculateLegendItemHeight(legendItem2, fontLineHeight) {
-  const labelHeight = legendItem2.text ? legendItem2.text.length + 0.5 : 0;
+  const labelHeight = legendItem2.text ? legendItem2.text.length : 0;
   return fontLineHeight * labelHeight;
 }
 function isListened(type, opts) {
@@ -12724,7 +12730,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((a2, b2) => a2 - b2).map((x2) => +x2);
+    return Object.keys(ticks).sort(sorter$1).map((x2) => +x2);
   }
   getLabelForValue(value) {
     const adapter = this._adapter;
@@ -12922,6 +12928,18 @@ 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) {
@@ -13086,12 +13104,15 @@ 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;
@@ -13119,16 +13140,18 @@ const getMinorTickPositions = (majorTickPositions, scale) => {
   return positions2;
 };
 const drawMinorTicksForScale = (scale) => {
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
   const { chart: chart2, ctx } = scale;
-  if (!chart2.config._config.options.scales[scale.id].grid.drawOnChartArea)
+  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))
     return;
-  if (chart2.config._config.options.indexAxis === scale.axis)
+  if (config2.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 = chart2.config._config.options.scales[scale.id].grid.color || "rgba(0,0,0,0.06)";
+  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.lineWidth = 0.5;
   minorTickPositions.forEach((minorTickPosition) => {
     ctx.beginPath();
@@ -13267,6 +13290,7 @@ var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
   PanZoomMode2["X"] = "x";
   PanZoomMode2["Y"] = "y";
   PanZoomMode2["XY"] = "xy";
+  PanZoomMode2["Z"] = "z";
   return PanZoomMode2;
 })(PanZoomMode || {});
 var Key = /* @__PURE__ */ ((Key2) => {
@@ -13284,7 +13308,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 }
@@ -13299,6 +13323,7 @@ const chartAreaBorderPlugin = {
   }
 };
 const getPlugins = (graph, legend2) => {
+  var _a2;
   let plugins = [];
   if (graph.showMinorGridlines) {
     plugins.push(chartMinorGridlinesPlugin);
@@ -13307,25 +13332,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,
-      ...legend2.customLegend.customLegendPlugin
+      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
     });
   }
   plugins.push(chartAreaBorderPlugin);
   return plugins;
 };
-const generateRandomColor$1 = (colors2) => {
+const generateRandomColor = (colors2) => {
   const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
     16
   )}`;
   if (colors2.includes(color2)) {
-    return generateRandomColor$1(colors2);
+    return generateRandomColor(colors2);
   } else {
     colors2.push(color2);
-    return color2;
+    return colors2;
   }
 };
 const setAnnotations = (annotationsData) => {
-  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((v2, i2) => i2) : [];
+  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_v, i2) => i2) : [];
 };
 const getTitle = (options) => {
   return options.title !== "" ? {
@@ -13351,16 +13376,16 @@ const getClassName = (chartStyling, styles2) => {
   }
   return cx(styles2.chart, heightStyles, squareAspectRatioStyle);
 };
-const getLegend = (options, clickHandler, state = null) => {
-  const { legend: legend2 } = options;
+const getLegend = (options, clickHandler) => {
+  const { legend: legend2 } = options || {};
   return {
-    position: legend2.position || Position.Top,
-    display: legend2.display,
-    align: legend2.align,
+    position: (legend2 == null ? void 0 : legend2.position) || Position.Top,
+    display: legend2 == null ? void 0 : legend2.display,
+    align: legend2 == null ? void 0 : legend2.align,
     labels: {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
-      boxWidth: legend2.usePointStyle ? LEGEND_LABEL_BOX_SIZE : void 0,
-      usePointStyle: legend2.usePointStyle
+      boxWidth: (legend2 == null ? void 0 : legend2.usePointStyle) ? LEGEND_LABEL_BOX_SIZE : void 0,
+      usePointStyle: legend2 == null ? void 0 : legend2.usePointStyle
     },
     onClick: clickHandler
   };
@@ -13381,7 +13406,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, "_")) || index2;
+    const labelWithNoSpace = ((_a2 = cur.label) == null ? void 0 : _a2.replace(/\s/g, "_")) || String(index2);
     return [...acc, labelWithNoSpace];
   }, []);
   return axesLabels.join("_");
@@ -13398,7 +13423,7 @@ const styles$5 = {
 };
 const ScatterChart = (props) => {
   setDefaultTheme();
-  const { data, options, testId = null } = props.chart;
+  const { data = { datasets: [] }, 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) {
@@ -22073,6 +22098,7 @@ 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;
@@ -22130,11 +22156,11 @@ const reducer$1 = (state, action) => {
       }
       case TOGGLE_ANNOTATION: {
         const { annotationIndex } = action.payload;
-        const updatedIndexes = draft.showAnnotationLineIndex.includes(
+        const updatedIndexes = ((_a2 = draft == null ? void 0 : draft.showAnnotationLineIndex) == null ? void 0 : _a2.includes(
           annotationIndex
-        ) ? draft.showAnnotationLineIndex.filter(
+        )) ? draft.showAnnotationLineIndex.filter(
           (v2) => v2 !== annotationIndex
-        ) : [...draft.showAnnotationLineIndex, annotationIndex];
+        ) : [...(draft == null ? void 0 : draft.showAnnotationLineIndex) ?? [], annotationIndex];
         draft.showAnnotationLineIndex = updatedIndexes;
         break;
       }
@@ -22171,7 +22197,7 @@ const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
 };
 const getAxisTypeFromKey = (string) => {
   var _a2;
-  return ((_a2 = string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) || "";
+  return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
 };
 const generateKey = (values) => {
   const key = values.join("");
@@ -22194,7 +22220,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.includes("line-chart-state-")) {
+    if (key == null ? void 0 : key.includes("line-chart-state-")) {
       const chartStateObjectJSON = localStorage.getItem(key);
       if (chartStateObjectJSON) {
         const chartStateObject = JSON.parse(chartStateObjectJSON);
@@ -22223,38 +22249,40 @@ 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;
+    var _a2, _b2, _c2, _d2, _e2;
     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 = axes == null ? void 0 : axes[id][0].unit;
+      const unit = (_e2 = (_d2 = axes == null ? void 0 : axes[id]) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.unit;
       return [
         {
           id,
@@ -22421,15 +22449,15 @@ const LineOptions = ({
     }
   ];
   const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
     Button,
     {
       small: true,
       basic: true,
       colored: "muted",
       round: true,
-      icon: selectedOption.icon,
-      onClick: selectedOption.onClick
+      icon: selectedOption == null ? void 0 : selectedOption.icon,
+      onClick: selectedOption == null ? void 0 : selectedOption.onClick
     }
   ) });
 };
@@ -22522,8 +22550,8 @@ const DragOptions = ({
             colored: "muted",
             basic: true,
             small: true,
-            label: selectedOption.buttonLabel || selectedOption.label,
-            icon: selectedOption.icon
+            label: (selectedOption == null ? void 0 : selectedOption.buttonLabel) || (selectedOption == null ? void 0 : selectedOption.label),
+            icon: selectedOption == null ? void 0 : selectedOption.icon
           }
         )
       }
@@ -23503,15 +23531,19 @@ const useChartFunctions = ({
 }) => {
   const {
     annotations,
-    interactions: { onLegendClick, onPointHover, onPointUnhover },
+    interactions: {
+      onLegendClick,
+      onHover: onPointHover,
+      onUnhover: onPointUnhover
+    },
     additionalAxesOptions,
     axes
   } = options;
   const legendClick = useCallback(
-    (e2, legendItem2) => {
+    (_e2, legendItem2) => {
       const { datasetIndex } = legendItem2;
-      const chartInstance = chartRef.current;
-      const { datasets } = chartInstance.data;
+      const chartInstance = chartRef == null ? void 0 : chartRef.current;
+      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
       const dataset = datasets[datasetIndex];
       const meta = chartInstance.getDatasetMeta(datasetIndex);
       meta.hidden = meta.hidden === null ? !dataset.hidden : null;
@@ -23520,7 +23552,7 @@ const useChartFunctions = ({
         dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
       }
       if (dataset.displayGroup) {
-        datasets.forEach((ds, ix) => {
+        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
           if (ds.displayGroup !== dataset.displayGroup)
             return;
           chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
@@ -23529,13 +23561,13 @@ const useChartFunctions = ({
       if (onLegendClick) {
         onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
       }
-      chartInstance.update();
+      chartInstance == null ? void 0 : chartInstance.update();
     },
     [onLegendClick, annotations]
   );
   const resetZoom2 = useCallback(() => {
-    const chartInstance = chartRef.current;
-    chartInstance.resetZoom();
+    const chartInstance = chartRef == null ? void 0 : chartRef.current;
+    chartInstance == null ? void 0 : chartInstance.resetZoom();
     dispatch({ type: "RESET_AXES_RANGES" });
   }, [chartRef]);
   const onHover = useCallback((hoveredPoint, setHoveredPoint) => {
@@ -23575,22 +23607,30 @@ const useChartFunctions = ({
   }, [chartRef, state.axes]);
   const handleKeyDown = useCallback(
     (evt) => {
+      var _a2, _b2, _c2, _d2, _e2;
       if (evt.key === Key.Shift) {
         const chart2 = chartRef.current;
-        chart2.config.options.plugins.zoom.zoom.mode = PanZoomMode.Y;
-        chart2.config.options.plugins.zoom.pan.mode = PanZoomMode.Y;
-        chart2.update();
+        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();
+        }
       }
     },
     [chartRef]
   );
   const handleKeyUp = useCallback(
     (evt) => {
+      var _a2, _b2, _c2, _d2, _e2;
       if (evt.key === Key.Shift) {
         const chart2 = chartRef.current;
-        chart2.config.options.plugins.zoom.zoom.mode = PanZoomMode.Z;
-        chart2.config.options.plugins.zoom.pan.mode = PanZoomMode.Z;
-        chart2.update();
+        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();
+        }
       }
     },
     [chartRef]
@@ -23636,13 +23676,15 @@ 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 }
@@ -23674,8 +23716,11 @@ var actionTypes = /* @__PURE__ */ ((actionTypes2) => {
   actionTypes2["UnitUpdated"] = "unitUpdated";
   return actionTypes2;
 })(actionTypes || {});
-const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
-  return initialAxesRanges.map((initialAxisRange) => {
+const initializeFormState = ({
+  initialAxesRanges,
+  axes = []
+}) => {
+  return (initialAxesRanges == null ? void 0 : initialAxesRanges.map((initialAxisRange) => {
     const currentAxisRange = axes.find((a2) => a2.id === initialAxisRange.id);
     return {
       id: initialAxisRange.id,
@@ -23683,7 +23728,7 @@ const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
       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) => {
@@ -23701,11 +23746,12 @@ const validateAxes = (formState) => {
   return formState.reduce(
     (acc, { id, min, max }) => {
       return produce(acc, (draft) => {
+        var _a2;
         const errors = {
-          min: createErrorMessages(min, max, "min"),
-          max: createErrorMessages(max, min, "max")
+          min: createErrorMessages(String(min), String(max), "min"),
+          max: createErrorMessages(String(max), String(min), "max")
         };
-        draft.errors.push({
+        (_a2 = draft == null ? void 0 : draft.errors) == null ? void 0 : _a2.push({
           id,
           ...errors
         });
@@ -23725,13 +23771,17 @@ const reducer = (state, action) => {
       return produce(state, (draft) => {
         const { name: name2, value, id } = action.payload;
         const axis = draft.find((a2) => a2.id === id);
-        axis[name2] = value;
+        if (axis) {
+          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);
-        axis.unit[name2] = value;
+        if (axis) {
+          axis.unit[name2] = value;
+        }
       });
     default:
       return state;
@@ -23784,54 +23834,55 @@ const AxesOptionsPopover = (optionsPopover) => {
       onUpdateAxes({
         axes: sanitizedFormState
       });
-      sanitizedFormState.forEach((el, i2) => {
+      sanitizedFormState.map((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.setSelectedDepthType(depthTypeState);
+      if (depthType && (depthType == null ? void 0 : depthType.setSelectedDepthType)) {
+        depthType == null ? void 0 : depthType.setSelectedDepthType(depthTypeState);
       }
     }
-    close();
+    close == null ? void 0 : close();
   };
   const onReset = () => {
     dispatch({
       type: actionTypes.Reset,
       payload: { axes, initialAxesRanges }
     });
-    initialAxesRanges.forEach((el, i2) => {
+    initialAxesRanges.map((el, i2) => {
       var _a3, _b2, _c2;
-      const selectedUnit = (_a3 = el == null ? void 0 : el.unit) == null ? void 0 : _a3.selectedUnit;
+      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);
       }
     });
     onResetAxes();
-    close();
+    close == null ? void 0 : 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, _d2, _e2, _f2, _g2, _h2, _i2;
-      const axisLabel = (_a3 = controlsAxesLabels.find(
+      var _a3, _b2, _c2;
+      const axisControl = controlsAxesLabels.find(
         (el) => el.id === axis.id
-      )) == 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;
+      );
+      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;
       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: translations[minError],
+            error: minErrorMsg,
             size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
@@ -23848,7 +23899,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           {
             name: "max",
             value: max,
-            error: translations[maxError],
+            error: maxErrorMsg,
             size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
@@ -23863,7 +23914,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           Select,
           {
             name: "selectedUnit",
-            options: (_i2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _i2.options,
+            options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
             value: unit == null ? void 0 : unit.selectedUnit,
             onChange: (e2) => {
               onEditUnit({
@@ -23959,14 +24010,19 @@ 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 = ({
-  props: { headerComponent, subheaderComponent, table: table2 },
+  headerComponent,
+  subheaderComponent,
+  table: table2,
   chartRef,
   state,
   options,
@@ -23984,7 +24040,7 @@ const Controls = ({
     showTable,
     zoomEnabled
   } = state;
-  const { dragData } = options;
+  const { dragData, depthType } = options;
   const {
     onToggleLine,
     onTogglePan,
@@ -24011,7 +24067,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, children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -24021,7 +24077,7 @@ const Controls = ({
               controlsAxesLabels,
               onUpdateAxes,
               onResetAxes,
-              depthType: options.depthType,
+              depthType,
               translations
             }
           ),
@@ -24204,7 +24260,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;
@@ -24291,12 +24347,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.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 == 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 style = {
-    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,
+    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,
     maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
     maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
     margin: LEGEND_MARGIN
@@ -24447,7 +24503,7 @@ const Legend2 = ({
       LegendDropZones,
       {
         chartArea,
-        setLegendPosition,
+        setLegendPosition: (position) => setLegendPosition(position),
         isDragging: isDragging2,
         placeholderSize: panelSize
       }
@@ -24465,116 +24521,122 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
-const getDefaultProps$2 = (props) => {
+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;
-  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,
+  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,
     options: {
-      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
-      }
+      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) ?? {}
     }
   };
-  return chart2;
 };
 const DEFAULT_POINT_RADIUS = 2;
 const DEFAULT_HOVER_RADIUS = 5;
@@ -24636,7 +24698,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, midPointWithLabel, endPoint] = data;
+      const [startPoint, endPoint] = data;
       if (axesMin && (startPoint == null ? void 0 : startPoint.x)) {
         data[0].x = Math.max(axesMin, startPoint.x);
       }
@@ -24658,9 +24720,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
-      borderColor: borderColor ?? indexedColor ?? generateRandomColor$1(COLORS),
+      borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
       backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-      pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor$1(COLORS),
+      pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
       pointRadius: pointsEnabled ? linePointRadius : DEFAULT_LINE_POINT_RADIUS,
       pointHoverRadius: hoverRadius,
       pointHitRadius: line.pointHitRadius ?? hoverRadius
@@ -24700,8 +24762,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.axes.filter(
+  const axisData = currentScales || options.axes[axisType][0] || {};
+  const stateAxis = state == null ? void 0 : 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;
@@ -24748,14 +24810,17 @@ 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$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 };
-  }, {});
+  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 };
+    },
+    {}
+  );
   return axes;
 };
 const getLineChartScales = (options, state) => {
@@ -24804,11 +24869,9 @@ 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 };
@@ -24880,13 +24943,20 @@ 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({
@@ -24964,7 +25034,7 @@ const annotationLeave = ({ element }, { chart: chart2 }) => {
   chart2.canvas.style.cursor = CursorStyle.Initial;
 };
 const generateAnnotations = (options, state) => {
-  const { annotationsData } = options.annotations;
+  const { annotationsData } = (options == null ? void 0 : 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))) {
@@ -25016,9 +25086,9 @@ const generateAnnotations = (options, state) => {
   return annotations;
 };
 const getAnnotation = (options, state) => {
-  const { showAnnotations, annotationsData } = options.annotations || {};
+  const { showAnnotations, annotationsData } = (options == null ? void 0 : options.annotations) || {};
   const shouldGenerateAnnotations = showAnnotations && (annotationsData == null ? void 0 : annotationsData.length);
-  const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : null;
+  const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : {};
   return { annotations };
 };
 const getUnitsFromLabel = (label) => {
@@ -25028,12 +25098,12 @@ const getUnitsFromLabel = (label) => {
 };
 const getLineChartToolTips = (options) => {
   const getTooltipLabels = (dataset) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2, _d2, _e2;
     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 (options.axes.x[0].position === Position.Top) {
+    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) {
       return {
         titleAxisLabel: (yAxis == null ? void 0 : yAxis.label) || "",
         valueAxisLabel: (xAxis == null ? void 0 : xAxis.label) || "",
@@ -25126,6 +25196,7 @@ const useChartOptions = ({
   dispatch,
   generatedDatasets
 }) => {
+  var _a2, _b2;
   const {
     interactions: { onAnimationComplete },
     annotations: {
@@ -25138,7 +25209,7 @@ const useChartOptions = ({
         yOffset,
         maxWidth,
         lineHeight
-      }
+      } = {}
     },
     chartStyling: { layoutPadding }
   } = options;
@@ -25167,7 +25238,7 @@ const useChartOptions = ({
     [showAnnotationLineIndex, legendClick]
   );
   const legend2 = useMemo(
-    () => getLegend(options, legendClick, state),
+    () => getLegend(options, legendClick),
     [legendEnabled]
   );
   const scales = useMemo(
@@ -25182,8 +25253,8 @@ const useChartOptions = ({
     () => ({
       enabled: panEnabled,
       mode: PanZoomMode.XY,
-      onPanComplete({ chart: chart2 }) {
-        updateAxesRangesFromChart(chart2);
+      onPanComplete() {
+        updateAxesRangesFromChart();
       }
     }),
     [panEnabled]
@@ -25198,8 +25269,8 @@ const useChartOptions = ({
         borderColor: BORDER_COLOR,
         borderWidth: 1
       },
-      onZoomComplete({ chart: chart2 }) {
-        updateAxesRangesFromChart(chart2);
+      onZoomComplete() {
+        updateAxesRangesFromChart();
       }
     }),
     [zoomEnabled]
@@ -25211,8 +25282,8 @@ const useChartOptions = ({
     tooltip,
     legend: { ...legend2, display: false },
     // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend.customLegendPlugin && {
-      containerID: options.legend.customLegend.customLegendContainerID
+    [CUSTOM_LEGEND_PLUGIN_NAME]: ((_a2 = options.legend.customLegend) == null ? void 0 : _a2.customLegendPlugin) && {
+      containerID: (_b2 = options.legend.customLegend) == null ? void 0 : _b2.customLegendContainerID
     },
     chartAreaBorder: {
       borderColor: BORDER_COLOR
@@ -25236,7 +25307,7 @@ const useChartOptions = ({
       },
       onHover: onHover(hoveredPoint, setHoveredPoint),
       maintainAspectRatio: options.chartStyling.maintainAspectRatio,
-      aspectRatio: options.chartStyling.squareAspectRatio ? 1 : null,
+      aspectRatio: options.chartStyling.squareAspectRatio ? 1 : 0,
       animation: options.chartStyling.performanceMode ? false : {
         duration: ANIMATION_DURATION.FAST,
         onComplete: onAnimationComplete
@@ -25258,10 +25329,7 @@ const useChartOptions = ({
     [state, options]
   );
 };
-const useChartPlugins = ({
-  options,
-  resetZoom: resetZoom2
-}) => {
+const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
   const { graph, legend: legend2 } = options;
   const debouncedResetZoom = useCallback(
     debounce$3(() => {
@@ -25271,7 +25339,7 @@ const useChartPlugins = ({
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
-    (chart2, args) => {
+    (_chart, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
         debouncedResetZoom();
@@ -25304,15 +25372,19 @@ const getAxesRangesFromChart = (chartRef, axes) => {
   });
 };
 const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
+  var _a2, _b2;
   useEffect(() => {
-    if (memoOptions.legend.customLegend.customLegendPlugin) {
+    var _a3, _b3;
+    if ((_b3 = (_a3 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a3.customLegend) == null ? void 0 : _b3.customLegendPlugin) {
       const parent = document.getElementById(
         memoOptions.legend.customLegend.customLegendContainerID
       );
-      parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
+      if (parent !== null) {
+        parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
+      }
     }
   }, [
-    memoOptions.legend.customLegend.customLegendPlugin,
+    (_b2 = (_a2 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin,
     memoState.legendEnabled
   ]);
 };
@@ -25329,7 +25401,7 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 const useUpdateAxesRanges = (range, dispatch) => {
-  const prevRange = useRef();
+  const prevRange = useRef(null);
   const updateAxesRanges = useCallback(() => {
     if (range && range.x && range.y && !isEqual(range, prevRange.current)) {
       const axes = Object.entries(range).map(([key, { min, max }]) => ({
@@ -25513,9 +25585,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, {
@@ -25593,7 +25665,7 @@ const LineChart = (props) => {
   const { translations, languageKey } = getConfig();
   const chart2 = getDefaultProps$2(props);
   const {
-    data: { datasets },
+    data: { datasets } = { datasets: [] },
     options,
     testId,
     persistenceId,
@@ -25651,7 +25723,7 @@ const LineChart = (props) => {
         /* @__PURE__ */ jsx(
           Controls,
           {
-            props,
+            ...props,
             chartRef,
             state,
             options,
@@ -25676,7 +25748,6 @@ const LineChart = (props) => {
           showCustomLegend && /* @__PURE__ */ jsx(
             Legend2,
             {
-              props,
               chartRef,
               state,
               options,
@@ -25723,84 +25794,59 @@ const styles$1 = {
   help: help$1,
   autoWeight: autoWeight$1
 };
-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 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 getDefaultProps$1 = (props) => {
-  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,
+  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),
     options: {
-      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
-      }
+      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)
     }
   };
-  return chart2;
 };
 Chart$2.register(
   LinearScale$1,
@@ -25821,25 +25867,25 @@ const PieChart = (props) => {
   const [pointHover, setPointHover] = useState(false);
   const { data, options, testId } = chart2;
   const generateDatasets = (datasets) => {
-    const copyDataset = JSON.parse(JSON.stringify(datasets));
+    const copyDataset = [...datasets];
     if (options.graph.stacked) {
       const generatedDataset = {
         label: copyDataset[0].label,
         backgroundColor: [],
         borderColor: [],
-        borderWidth: parseFloat(copyDataset[0].borderWidth) || "1",
+        borderWidth: Number(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.length] : backgroundColor) || colors$1[labelIndex] + `${99 - 10 * arcIndex}`
+            (Array.isArray(backgroundColor) ? backgroundColor[labelIndex % ((borderColor == null ? void 0 : borderColor.length) || 1)] : backgroundColor) || COLORS[labelIndex] + `${99 - 10 * arcIndex}`
           );
           generatedDataset.borderColor.push(
-            (Array.isArray(borderColor) ? borderColor[labelIndex % borderColor.length] : borderColor) || colors$1[labelIndex]
+            (Array.isArray(borderColor) ? borderColor[labelIndex % borderColor.length] : borderColor) || COLORS[labelIndex]
           );
         });
       });
@@ -25848,9 +25894,7 @@ const PieChart = (props) => {
     const generatedDatasets2 = copyDataset.map(
       (pieDataset, index2) => {
         const borderWidth = parseFloat(pieDataset.borderWidth) || "1";
-        const color2 = pieDataset.data.map(
-          (_pie, i2) => colors$1[i2] || generateRandomColor()
-        );
+        const color2 = pieDataset.data.map((_pie, i2) => COLORS[i2]) || generateRandomColor(COLORS);
         const borderColor = pieDataset.borderColor || color2;
         const backgroundColor = pieDataset.backgroundColor || color2.map((col) => col + `${99 - 11 * index2}`);
         return {
@@ -25870,10 +25914,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 } = legendItem2;
+    const { index: index2 = 0, text = "", hidden = false } = legendItem2 || {};
     if (options.graph.stacked) {
       if (options.legend.useDataset) {
         for (let i2 = 0; i2 < chartInstance.config._config.data.datasets[0].data.length; i2++) {
@@ -25885,7 +25929,7 @@ const PieChart = (props) => {
         }
       } else {
         for (let i2 = 0; i2 < chartInstance.config._config.data.datasets[0].data.length; i2++) {
-          if (parseInt(i2 / data.datasets.length) === index2) {
+          if (parseInt(String(i2 / data.datasets.length)) === index2) {
             const meta = chartInstance.getDatasetMeta(0);
             const arc = meta.data[i2];
             arc.hidden = !arc.hidden;
@@ -25911,25 +25955,25 @@ const PieChart = (props) => {
       }
     }
     if (options.interactions.onLegendClick)
-      options.interactions.onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+      options.interactions.onLegendClick(text, 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.onPieUnhover) {
-        options.interactions.onPieUnhover(evt);
+      if (options.interactions.onUnhover) {
+        options.interactions.onUnhover(evt);
       }
     }
     if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(true);
-      if (options.interactions.onPieHover) {
+      if (options.interactions.onHover) {
         const { index: index2, datasetIndex } = hoveredItems[0];
         const generatedDataset = generatedDatasets;
-        options.interactions.onPieHover(
+        options.interactions.onHover(
           evt,
           datasetIndex,
           index2,
@@ -25943,7 +25987,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)
@@ -25962,85 +26006,74 @@ 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(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
-              };
-            });
-          }
-        },
+        generateLabels,
         boxHeight: 6,
         boxWidth: 6,
         usePointStyle: true,
-        filter: (item, data2) => {
+        filter: (item) => {
           var _a2;
           if (!options.legend.useDataset)
             return true;
-          return !((_a2 = data2.datasets[item.index]) == null ? void 0 : _a2.hideLegend);
+          return !((_a2 = data.datasets[item.index]) == null ? void 0 : _a2.hideLegend);
         }
       },
       onClick: legendClick
@@ -26051,7 +26084,7 @@ const PieChart = (props) => {
       callbacks: {
         title: (tooltipItem) => {
           const { dataIndex } = tooltipItem[0];
-          const index2 = options.graph.stacked ? parseInt(dataIndex / data.labels.length) : dataIndex;
+          const index2 = options.graph.stacked ? parseInt(String(dataIndex / data.labels.length)) : dataIndex;
           const label = data.labels[index2];
           return `${label}`;
         },
@@ -26063,7 +26096,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, { n: 3 }) : round$2(labelValue, 3);
+          const formattedValue = Math.abs(labelValue) < 1 ? roundNumberToPrecision(labelValue, 3) : round$2(labelValue, 3);
           return `${dataLabel} ${formattedValue} ${unit}`;
         }
       },
@@ -26105,32 +26138,14 @@ 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()
             }
@@ -38516,93 +38531,102 @@ 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) => {
-  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,
+  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,
     options: {
-      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;
+      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;
   const isDirectionVertical = isVertical(chart2.options.direction);
-  const axisData = currentScales || chart2.options.axes[axisType][0];
+  const axisData = currentScale || 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 = () => {
@@ -38623,7 +38647,7 @@ const getBarChartAxis = (chart2, axisType, currentScales, i2) => {
       return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
     };
     const stepSize = !isLogarithmic ? {
-      stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null)
+      stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions == null ? void 0 : additionalAxesOptions.stepSize : null)
     } : {};
     const ticks = {
       ...stepSize,
@@ -38639,56 +38663,68 @@ const getBarChartAxis = (chart2, axisType, currentScales, i2) => {
   };
   return {
     type: getScaleType(),
-    position: axisData.position,
-    beginAtZero: chart2.options.additionalAxesOptions.beginAtZero,
+    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,
     reverse: getReverse(),
-    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,
+    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,
     title: {
-      display: ((_i2 = axisData.label) == null ? void 0 : _i2.length) || ((_j2 = axisData.unit) == null ? void 0 : _j2.length),
-      text: axisData.label || axisData.unit,
+      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),
       padding: 0
     },
     ticks: getTicks(),
     grid: {
       ...grid
     },
-    stacked: chart2.options.additionalAxesOptions.stacked
+    stacked: (_n2 = (_m2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _m2.additionalAxesOptions) == null ? void 0 : _n2.stacked
   };
 };
 const getBarChartAxes = (chart2, axisType) => {
-  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 };
-  }, {});
+  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 };
+    },
+    {}
+  );
   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(chart2, AxisType.X) };
-  const yAxesScales = hasMultipleYAxes ? getBarChartAxes(chart2, AxisType.Y) : { y: getBarChartAxis(chart2, AxisType.Y) };
+  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 }) };
   return {
     ...xAxesScales,
     ...yAxesScales
   };
 };
 const getBarChartToolTips = (options) => {
+  var _a2;
   const getTooltipLabels = (dataset) => {
-    var _a2, _b2;
+    var _a3, _b2;
     const isDirectionVertical = isVertical(options.direction);
-    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 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 xAxis = isDirectionVertical ? x2[xIndex] : y2[yIndex];
     const yAxis = isDirectionVertical ? y2[yIndex] : x2[xIndex];
     return {
@@ -38700,18 +38736,18 @@ const getBarChartToolTips = (options) => {
       valueUnit: (yAxis == null ? void 0 : yAxis.unit) || ""
     };
   };
-  const titleCallback = (tooltipItem, data) => {
-    var _a2;
-    const barLabel = ((_a2 = tooltipItem[0]) == null ? void 0 : _a2.label) || "";
-    const labels = getTooltipLabels(tooltipItem[0].dataset);
+  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 { titleAxisLabel, titleUnit } = labels;
     const axisLabel = !titleAxisLabel && !titleUnit ? "" : `${titleAxisLabel || titleUnit}: `;
     return axisLabel + barLabel;
   };
   const labelCallback = (tooltipItem) => {
-    var _a2;
-    const { showLabelsInTooltips } = options.tooltip;
-    let label = ((_a2 = tooltipItem.dataset) == null ? void 0 : _a2.label) || "";
+    var _a3;
+    const { showLabelsInTooltips = false } = (options == null ? void 0 : options.tooltip) || {};
+    let label = ((_a3 = tooltipItem.dataset) == null ? void 0 : _a3.label) || "";
     const labels = getTooltipLabels(tooltipItem.dataset);
     const { valueUnit, valueAxisLabel } = labels;
     const getTooltipItemValue = () => {
@@ -38729,9 +38765,12 @@ 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;
@@ -38746,7 +38785,7 @@ const getBarChartToolTips = (options) => {
     return `${label}: ${tooltipItemValue} ${unit}${valAxisLabel}${tooltipLabel}`;
   };
   return {
-    enabled: options.tooltip.tooltips,
+    enabled: (_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.tooltips,
     mode: ChartHoverMode.Nearest,
     intersect: true,
     padding: TOOLTIP_PADDING,
@@ -38761,9 +38800,11 @@ const getBarChartToolTips = (options) => {
   };
 };
 const getBarChartDataLabels = (options) => {
-  const { beginAtZero, reverse } = options.additionalAxesOptions;
-  const formatterCallback = (value, context) => {
-    const { dataset, dataIndex } = context;
+  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 dataElement = dataset.data[dataIndex];
     let dataLabel = "";
     if (typeof dataElement === "number") {
@@ -38778,7 +38819,7 @@ const getBarChartDataLabels = (options) => {
   };
   const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
   const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
-  return options.graph.showDataLabels ? {
+  return ((_a2 = options == null ? void 0 : options.graph) == null ? void 0 : _a2.showDataLabels) ? {
     display: AUTO,
     align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
     anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
@@ -38800,6 +38841,7 @@ Chart$2.register(
   Ht
 );
 const BarChart = (props) => {
+  var _a2, _b2, _c2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
@@ -38810,42 +38852,44 @@ const BarChart = (props) => {
     setAnnotations(annotations.annotationsData)
   );
   const generateBarChartDatasets = (datasets) => {
-    var _a2;
+    var _a3;
     const barDatasetsCopy = [...datasets];
-    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
-        });
-      });
+    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
+          });
+        }
+      );
     }
     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$1(COLORS);
+        return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
       });
       const backgroundColors = barDataset.backgroundColor || colors2.map((color2) => color2 + ALPHA_CHANEL);
       return {
         ...barDataset,
-        borderWidth: parseFloat(barDataset.borderWidth) || "1",
-        borderColor: barDataset.borderColor || colors2,
+        borderWidth: parseFloat(String(barDataset.borderWidth)) ?? 1,
+        borderColor: barDataset.borderColor || colors2[index2],
         backgroundColor: backgroundColors
       };
     });
-    return generatedDatasets2;
+    return generatedDatasets2 || [];
   };
-  const generatedDatasets = generateBarChartDatasets(chart2.data.datasets);
-  const legendClick = (e2, legendItem2) => {
-    const index2 = legendItem2.datasetIndex;
+  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 chartInstance = chartRef.current;
-    if (chartInstance) {
+    if (chartInstance && index2 !== null) {
       const { datasets } = chartInstance.data;
       const dataset = datasets[index2];
       const meta = chartInstance.getDatasetMeta(index2);
@@ -38872,27 +38916,30 @@ const BarChart = (props) => {
         });
       }
       if (interactions.onLegendClick) {
-        interactions.onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+        interactions.onLegendClick(
+          legendItem2 == null ? void 0 : legendItem2.text,
+          (legendItem2 == null ? void 0 : legendItem2.hidden) ?? false
+        );
       }
       chartInstance.update();
     }
   };
-  const onClick = (evt, elements, chartInstance) => {
+  const onClick = (_evt, _elements, chartInstance) => {
     chartInstance.resetZoom();
   };
-  const onHover = (evt, hoveredItems, chartInstance) => {
+  const onHover = (evt, hoveredItems) => {
     if (pointHover && !(hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(false);
-      if (interactions.onBarUnhover) {
-        interactions.onBarUnhover(evt);
+      if (interactions.onUnhover) {
+        interactions.onUnhover(evt);
       }
     }
     if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
       setPointHover(true);
-      if (interactions.onBarHover) {
+      if (interactions.onHover) {
         const { index: index2, datasetIndex } = hoveredItems[0];
         const generatedDataset = generatedDatasets;
-        interactions.onBarHover(evt, datasetIndex, index2, generatedDataset);
+        interactions.onHover(evt, datasetIndex, index2, generatedDataset);
       }
     }
   };
@@ -38910,7 +38957,7 @@ const BarChart = (props) => {
         {
           ref: chartRef,
           data: {
-            labels: chart2.data.labels.length ? chart2.data.labels : [""],
+            labels: ((_c2 = (_b2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _b2.labels) == null ? void 0 : _c2.length) ? chart2.data.labels : [""],
             datasets: generatedDatasets
           },
           options: {
@@ -38925,9 +38972,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),