@oliasoft-open-source/charts-library 3.8.1-beta-1 → 4.0.0-beta-1

package/dist/index.js

@@ -22334,9 +22334,9 @@ const BORDER_WIDTH = {
 };
 const BORDER_COLOR = "rgba(0,0,0,0.1)";
 const ANNOTATION_DASH = [10, 2];
-const DEFAULT_FONT_SIZE = 13;
-const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
-const DEFAULT_COLOR = "rgba(0,0,0,.87)";
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
+const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
 const LEGEND_LABEL_BOX_SIZE = 12;
 const TOOLTIP_PADDING = 8;
 const TOOLTIP_BOX_PADDING = 4;
@@ -22377,7 +22377,7 @@ const DECIMAL_POINT_TOLERANCE = 9;
 const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
-  beforeDraw(chart2, _args, options) {
+  beforeDraw(chart2, _2, options) {
     const {
       ctx,
       chartArea: { left: left2, top: top2, width, height }
@@ -22386,7 +22386,7 @@ const chartAreaBorderPlugin = {
     ctx.strokeStyle = options.borderColor;
     ctx.lineWidth = options.borderWidth;
     ctx.setLineDash(options.borderDash || []);
-    ctx.lineDashOffset = options.borderDashOffset;
+    ctx.lineDashOffset = options.borderDashOffset ?? 0;
     ctx.strokeRect(left2, top2, width, height);
     ctx.restore();
   }
@@ -22419,7 +22419,7 @@ const generateRandomColor = (colors2) => {
   }
 };
 const setAnnotations = (annotationsData) => {
-  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_v, i2) => i2) : [];
+  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_2, i2) => i2) : [];
 };
 const getTitle = (options) => {
   return options.title !== "" ? {
@@ -22453,6 +22453,12 @@ const getClassName = (chartStyling, styles2) => {
 const getLegend = (options, clickHandler) => {
   const { legend: legend2 } = options || {};
   return {
+    // Using 'as any' here to bypass a TypeScript type-checking issue.
+    // There is a conflict between our custom interface and the Chart.js interface
+    // for the 'plugins.legend.position' property. In our current setup, this property
+    // is typed as a string, which conflicts with the more specific string literals
+    // expected by Chart.js ('top', 'center', 'bottom', 'left', 'right', 'chartArea').
+    // As a temporary workaround, 'as any' is used to avoid this type conflict.
     position: (legend2 == null ? void 0 : legend2.position) || Position.Top,
     display: legend2 == null ? void 0 : legend2.display,
     align: legend2 == null ? void 0 : legend2.align,
@@ -22469,8 +22475,8 @@ const afterLabelCallback = (tooltipItem) => {
   return error ? `Error: ${round$2(error, 4)}` : "";
 };
 const getTooltipLabel = (tooltipItem, showLabelsInTooltips) => {
-  var _a2;
-  const datasetDataLabel = (_a2 = tooltipItem.dataset.data[tooltipItem.dataIndex]) == null ? void 0 : _a2.label;
+  var _a2, _b2, _c2;
+  const datasetDataLabel = (_c2 = (_b2 = (_a2 = tooltipItem == null ? void 0 : tooltipItem.dataset) == null ? void 0 : _a2.data) == null ? void 0 : _b2[tooltipItem == null ? void 0 : tooltipItem.dataIndex]) == null ? void 0 : _c2.label;
   const dataLabel = Array.isArray(datasetDataLabel) ? datasetDataLabel.join(" , ") : datasetDataLabel;
   return showLabelsInTooltips && (dataLabel == null ? void 0 : dataLabel.length) ? ` (${dataLabel})` : "";
 };
@@ -22585,22 +22591,20 @@ const initialState = ({ options, persistenceId }) => {
       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;
@@ -22641,6 +22645,56 @@ const initialState = ({ options, persistenceId }) => {
     initialAxesRanges: []
   };
 };
+const lineOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0uNSA2LjV2LTFoMTF2MWMtNC4xNjEwNCAwLTYuNjM1NDkgMC0xMSAweiIvPjwvZz48L3N2Zz4=";
+const pointOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjIiLz48L3N2Zz4=";
+const lineAndPointIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im03LjkzNyA2LjVjLS4xMTEyMi40MjkxMi0uMzYxNzkuODA5MTYtLjcxMjM3IDEuMDgwNDctLjM1MDU4LjI3MTMtLjc4MTMzLjQxODUtMS4yMjQ2My40MTg1cy0uODc0MDUtLjE0NzItMS4yMjQ2My0uNDE4NWMtLjM1MDU4LS4yNzEzMS0uNjAxMTUtLjY1MTM1LS43MTIzNy0xLjA4MDQ3aC0zLjU2M3YtMWgzLjU2M2MuMTExMjItLjQyOTEyLjM2MTc5LS44MDkxNi43MTIzNy0xLjA4MDQ2cy43ODEzMy0uNDE4NTEgMS4yMjQ2My0uNDE4NTEuODc0MDUuMTQ3MjEgMS4yMjQ2My40MTg1MS42MDExNS42NTEzNC43MTIzNyAxLjA4MDQ2aDMuNTYzdjF6Ii8+PC9nPjwvc3ZnPg==";
+const LineOptions = ({
+  lineEnabled,
+  onToggleLine,
+  onTogglePoints,
+  pointsEnabled,
+  translations
+}) => {
+  const options = [
+    {
+      label: translations.pointsLines,
+      icon: /* @__PURE__ */ jsx(Icon, { icon: lineAndPointIcon }),
+      selected: pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+      }
+    },
+    {
+      label: translations.linesOnly,
+      icon: /* @__PURE__ */ jsx(Icon, { icon: lineOnlyIcon }),
+      selected: !pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+        onToggleLine();
+      }
+    },
+    {
+      label: translations.pointsOnly,
+      icon: /* @__PURE__ */ jsx(Icon, { icon: pointOnlyIcon }),
+      selected: pointsEnabled && !lineEnabled,
+      onClick: () => {
+        onToggleLine();
+      }
+    }
+  ];
+  const selectedOption = options.find((option) => option.selected);
+  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom-start", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      small: true,
+      basic: true,
+      colored: "muted",
+      round: true,
+      icon: selectedOption == null ? void 0 : selectedOption.icon,
+      onClick: selectedOption == null ? void 0 : selectedOption.onClick
+    }
+  ) });
+};
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -22714,96 +22768,27 @@ function IconBase(props) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
-function RiDragMove2Line(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M11 11V5.82843L9.17157 7.65685L7.75736 6.24264L12 2L16.2426 6.24264L14.8284 7.65685L13 5.82843V11H18.1716L16.3431 9.17157L17.7574 7.75736L22 12L17.7574 16.2426L16.3431 14.8284L18.1716 13H13V18.1716L14.8284 16.3431L16.2426 17.7574L12 22L7.75736 17.7574L9.17157 16.3431L11 18.1716V13H5.82843L7.65685 14.8284L6.24264 16.2426L2 12L6.24264 7.75736L7.65685 9.17157L5.82843 11H11Z" } }] })(props);
-}
-function RiLineChartLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 3V19H21V21H3V3H5ZM20.2929 6.29289L21.7071 7.70711L16 13.4142L13 10.415L8.70711 14.7071L7.29289 13.2929L13 7.58579L16 10.585L20.2929 6.29289Z" } }] })(props);
-}
-function RiRuler2Line(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M17 19H19V14H10V5H5V7H7V9H5V11H8V13H5V15H7V17H5V19H7V17H9V19H11V16H13V19H15V17H17V19ZM12 12H20C20.5523 12 21 12.4477 21 13V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H11C11.5523 3 12 3.44772 12 4V12Z" } }] })(props);
+function TbArrowsMove(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 9l3 3l-3 3" } }, { "tag": "path", "attr": { "d": "M15 12h6" } }, { "tag": "path", "attr": { "d": "M6 9l-3 3l3 3" } }, { "tag": "path", "attr": { "d": "M3 12h6" } }, { "tag": "path", "attr": { "d": "M9 18l3 3l3 -3" } }, { "tag": "path", "attr": { "d": "M12 15v6" } }, { "tag": "path", "attr": { "d": "M15 6l-3 -3l-3 3" } }, { "tag": "path", "attr": { "d": "M12 3v6" } }] })(props);
 }
-function RiTableLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 8H20V5H4V8ZM14 19V10H10V19H14ZM16 19H20V10H16V19ZM8 19V10H4V19H8ZM3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3Z" } }] })(props);
+function TbBan(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" } }, { "tag": "path", "attr": { "d": "M5.7 5.7l12.6 12.6" } }] })(props);
 }
-function RiFileDownloadLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M13 12H16L12 16L8 12H11V8H13V12ZM15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z" } }] })(props);
-}
-function RiForbidLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM8.52313 7.10891L16.8911 15.4769C16.6997 15.7454 16.4836 16.0017 16.2426 16.2426C16.0017 16.4836 15.7454 16.6997 15.4769 16.8911L7.10891 8.52313C7.30029 8.25459 7.51644 7.99828 7.75736 7.75736C7.99828 7.51644 8.25459 7.30029 8.52313 7.10891Z" } }] })(props);
-}
-function RiZoomInLine(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z" } }] })(props);
-}
-const lineOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDEydjEyaC0xMnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSI+PHBhdGggZD0ibS41IDYuNXYtMWgxMXYxYy00LjE2MTA0IDAtNi42MzU0OSAwLTExIDB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L2c+PC9zdmc+";
-const pointOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI2IiBjeT0iNiIgZmlsbD0iY3VycmVudENvbG9yIiByPSIyIi8+PC9zdmc+";
-const lineAndPointIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDEydjEyaC0xMnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSI+PHBhdGggZD0ibTcuOTM3IDYuNWMtLjExMTIyLjQyOTEyLS4zNjE3OS44MDkxNi0uNzEyMzcgMS4wODA0Ny0uMzUwNTguMjcxMy0uNzgxMzMuNDE4NS0xLjIyNDYzLjQxODVzLS44NzQwNS0uMTQ3Mi0xLjIyNDYzLS40MTg1Yy0uMzUwNTgtLjI3MTMxLS42MDExNS0uNjUxMzUtLjcxMjM3LTEuMDgwNDdoLTMuNTYzdi0xaDMuNTYzYy4xMTEyMi0uNDI5MTIuMzYxNzktLjgwOTE2LjcxMjM3LTEuMDgwNDZzLjc4MTMzLS40MTg1MSAxLjIyNDYzLS40MTg1MS44NzQwNS4xNDcyMSAxLjIyNDYzLjQxODUxLjYwMTE1LjY1MTM0LjcxMjM3IDEuMDgwNDZoMy41NjN2MXoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
-const LineOptions = ({
-  lineEnabled,
-  onToggleLine,
-  onTogglePoints,
-  pointsEnabled,
-  translations,
-  hasCustomOpt
-}) => {
-  const options = [
-    {
-      label: translations.pointsLines,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineAndPointIcon }),
-      selected: pointsEnabled && lineEnabled,
-      onClick: () => {
-        onTogglePoints();
-      }
-    },
-    {
-      label: translations.linesOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineOnlyIcon }),
-      selected: !pointsEnabled && lineEnabled,
-      onClick: () => {
-        onTogglePoints();
-        onToggleLine();
-      }
-    },
-    {
-      label: translations.pointsOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: pointOnlyIcon }),
-      selected: pointsEnabled && !lineEnabled,
-      onClick: () => {
-        onToggleLine();
-      }
-    }
-  ];
-  const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(
-    Tooltip$2,
-    {
-      text: selectedOption == null ? void 0 : selectedOption.label,
-      placement: "bottom",
-      enabled: !hasCustomOpt,
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          small: true,
-          basic: true,
-          colored: "muted",
-          round: true,
-          icon: selectedOption == null ? void 0 : selectedOption.icon,
-          onClick: selectedOption == null ? void 0 : selectedOption.onClick,
-          disabled: hasCustomOpt
-        }
-      )
-    }
-  );
-};
 function TbHandStop(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" } }, { "tag": "path", "attr": { "d": "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" } }] })(props);
 }
 function TbList(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M9 6l11 0" } }, { "tag": "path", "attr": { "d": "M9 12l11 0" } }, { "tag": "path", "attr": { "d": "M9 18l11 0" } }, { "tag": "path", "attr": { "d": "M5 6l0 .01" } }, { "tag": "path", "attr": { "d": "M5 12l0 .01" } }, { "tag": "path", "attr": { "d": "M5 18l0 .01" } }] })(props);
 }
+function TbRuler(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-7a1 1 0 0 0 -1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1" } }, { "tag": "path", "attr": { "d": "M4 8l2 0" } }, { "tag": "path", "attr": { "d": "M4 12l3 0" } }, { "tag": "path", "attr": { "d": "M4 16l2 0" } }, { "tag": "path", "attr": { "d": "M8 4l0 2" } }, { "tag": "path", "attr": { "d": "M12 4l0 3" } }, { "tag": "path", "attr": { "d": "M16 4l0 2" } }] })(props);
+}
 function TbX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M18 6l-12 12" } }, { "tag": "path", "attr": { "d": "M6 6l12 12" } }] })(props);
 }
+function TbZoomIn(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" } }, { "tag": "path", "attr": { "d": "M7 10l6 0" } }, { "tag": "path", "attr": { "d": "M10 7l0 6" } }, { "tag": "path", "attr": { "d": "M21 21l-6 -6" } }] })(props);
+}
 const DragOptions = ({
   onTogglePan,
   onToggleZoom,
@@ -22830,7 +22815,7 @@ const DragOptions = ({
           /* @__PURE__ */ jsx(Text, { children: "Drag to zoom" }),
           /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: doubleClickToReset })
         ] }),
-        icon: /* @__PURE__ */ jsx(RiZoomInLine, {}),
+        icon: /* @__PURE__ */ jsx(TbZoomIn, {}),
         selected: zoomEnabled,
         onClick: onToggleZoom
       },
@@ -22840,7 +22825,7 @@ const DragOptions = ({
           /* @__PURE__ */ jsx(Text, { children: "Drag to pan" }),
           /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: orDoubleClickToCanvas })
         ] }),
-        icon: /* @__PURE__ */ jsx(RiDragMove2Line, {}),
+        icon: /* @__PURE__ */ jsx(TbArrowsMove, {}),
         selected: panEnabled,
         onClick: onTogglePan
       },
@@ -22855,7 +22840,7 @@ const DragOptions = ({
       ] : [],
       {
         label: dragDisabled,
-        icon: /* @__PURE__ */ jsx(RiForbidLine, {}),
+        icon: /* @__PURE__ */ jsx(TbBan, {}),
         selected: !zoomEnabled && !panEnabled && !enableDragPoints,
         onClick: onDisableDragOptions
       }
@@ -22892,8 +22877,8 @@ const DragOptions = ({
     }
   );
 };
-const controls = "_controls_fa3yo_1";
-const buttons = "_buttons_fa3yo_7";
+const controls = "_controls_gbo9q_1";
+const buttons = "_buttons_gbo9q_7";
 const styles$3 = {
   controls,
   buttons
@@ -23872,23 +23857,26 @@ const useChartFunctions = ({
     chartInstance == null ? void 0 : chartInstance.resetZoom();
     dispatch({ type: "RESET_AXES_RANGES" });
   }, [chartRef]);
-  const onHover = useCallback((hoveredPoint, setHoveredPoint) => {
-    return (evt, hoveredItems) => {
-      if (!(hoveredItems == null ? void 0 : hoveredItems.length) && onPointUnhover && hoveredPoint) {
-        setHoveredPoint(null);
-        onPointUnhover(evt);
-      }
-      if ((hoveredItems == null ? void 0 : hoveredItems.length) && onPointHover) {
-        const { index: index2, datasetIndex } = hoveredItems[0];
-        const dataset = generatedDatasets[datasetIndex];
-        const point = dataset == null ? void 0 : dataset.data[index2];
-        if (point && hoveredPoint !== point) {
-          setHoveredPoint(point);
-          onPointHover(evt, datasetIndex, index2, generatedDatasets);
+  const onHover = useCallback(
+    (hoveredPoint, setHoveredPoint) => {
+      return (evt, hoveredItems) => {
+        if (!(hoveredItems == null ? void 0 : hoveredItems.length) && onPointUnhover && hoveredPoint) {
+          setHoveredPoint(null);
+          onPointUnhover(evt);
         }
-      }
-    };
-  }, []);
+        if ((hoveredItems == null ? void 0 : hoveredItems.length) && onPointHover) {
+          const { index: index2, datasetIndex } = hoveredItems[0];
+          const dataset = generatedDatasets[datasetIndex];
+          const point = dataset == null ? void 0 : dataset.data[index2];
+          if (point && hoveredPoint !== point) {
+            setHoveredPoint(point);
+            onPointHover(evt, datasetIndex, index2, generatedDatasets);
+          }
+        }
+      };
+    },
+    []
+  );
   const handleDownload = useCallback(() => {
     var _a2;
     const chart2 = chartRef.current;
@@ -23908,9 +23896,9 @@ const useChartFunctions = ({
     });
   }, [chartRef, state.axes]);
   const handleKeyDown = useCallback(
-    (evt) => {
+    (event) => {
       var _a2, _b2, _c2, _d2, _e2;
-      if (evt.key === Key.Shift) {
+      if (event.key === Key.Shift) {
         const chart2 = chartRef.current;
         const zoom2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.config) == null ? void 0 : _a2.options) == null ? void 0 : _b2.plugins) == null ? void 0 : _c2.zoom;
         if (((_d2 = zoom2 == null ? void 0 : zoom2.zoom) == null ? void 0 : _d2.mode) && ((_e2 = zoom2 == null ? void 0 : zoom2.pan) == null ? void 0 : _e2.mode)) {
@@ -23923,9 +23911,9 @@ const useChartFunctions = ({
     [chartRef]
   );
   const handleKeyUp = useCallback(
-    (evt) => {
+    (event) => {
       var _a2, _b2, _c2, _d2, _e2;
-      if (evt.key === Key.Shift) {
+      if (event.key === Key.Shift) {
         const chart2 = chartRef.current;
         const zoom2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.config) == null ? void 0 : _a2.options) == null ? void 0 : _b2.plugins) == null ? void 0 : _c2.zoom;
         if (((_d2 = zoom2 == null ? void 0 : zoom2.zoom) == null ? void 0 : _d2.mode) && ((_e2 = zoom2 == null ? void 0 : zoom2.pan) == null ? void 0 : _e2.mode)) {
@@ -23967,15 +23955,13 @@ const useChartFunctions = ({
   const updateAxesRangesFromChart = useCallback(() => {
     var _a2;
     const { scales = {} } = (chartRef == null ? void 0 : chartRef.current) || {};
-    const axes2 = (_a2 = Object.entries(scales)) == null ? void 0 : _a2.map(
-      ([key, { min, max }]) => {
-        return {
-          id: key,
-          min: min ?? 0,
-          max: max ?? 0
-        };
-      }
-    );
+    const axes2 = (_a2 = Object.entries(scales)) == null ? void 0 : _a2.map(([key, { min, max }]) => {
+      return {
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0
+      };
+    });
     dispatch({
       type: UPDATE_AXES_RANGES,
       payload: { axes: axes2 }
@@ -24175,7 +24161,6 @@ const AxesOptionsPopover = (optionsPopover) => {
             name: "min",
             value: min,
             error: minErrorMsg,
-            size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
               name: evt.target.name,
@@ -24192,7 +24177,6 @@ const AxesOptionsPopover = (optionsPopover) => {
             name: "max",
             value: max,
             error: maxErrorMsg,
-            size: 5,
             width: "100%",
             onChange: (evt) => onEditValue({
               name: evt.target.name,
@@ -24276,7 +24260,7 @@ const AxesOptions = (optionsPopover) => {
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      placement: "bottom",
+      placement: "bottom-start",
       overflowContainer: true,
       content: /* @__PURE__ */ jsx(
         AxesOptionsPopover,
@@ -24294,9 +24278,9 @@ const AxesOptions = (optionsPopover) => {
         Tooltip$2,
         {
           text: translations.axesOptions,
-          placement: "bottom",
+          placement: "bottom-start",
           display: "flex",
-          children: /* @__PURE__ */ jsx(Button, { small: true, basic: true, colored: "muted", round: true, icon: /* @__PURE__ */ jsx(RiRuler2Line, {}) })
+          children: /* @__PURE__ */ jsx(Button, { small: true, basic: true, colored: "muted", round: true, icon: /* @__PURE__ */ jsx(TbRuler, {}) })
         }
       )
     }
@@ -24311,27 +24295,6 @@ const ControlsPortal = ({
   }
   return children;
 };
-const checkCustomOption = (data, customOptions) => {
-  if (isEmpty(data) || isEmpty(customOptions))
-    return false;
-  const checkOption = (dataset) => {
-    if (typeof customOptions === "string") {
-      return has(dataset, customOptions);
-    } else if (isArray$2(customOptions)) {
-      return some(customOptions, (option) => has(dataset, option));
-    } else {
-      return some(
-        Object.values(customOptions),
-        (option) => has(dataset, option)
-      );
-    }
-  };
-  if (isArray$2(data)) {
-    return some(data, (dataset) => checkOption(dataset));
-  } else {
-    return checkOption(data);
-  }
-};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -24370,7 +24333,6 @@ const Controls = ({
     dispatch,
     generatedDatasets
   });
-  const hasCustomOpt = checkCustomOption(generatedDatasets, "hasCustomOpt");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
@@ -24396,8 +24358,7 @@ const Controls = ({
               pointsEnabled,
               onToggleLine,
               onTogglePoints,
-              translations,
-              hasCustomOpt
+              translations
             }
           ),
           /* @__PURE__ */ jsx(
@@ -24412,7 +24373,7 @@ const Controls = ({
                   basic: true,
                   colored: "muted",
                   round: true,
-                  icon: /* @__PURE__ */ jsx(RiFileDownloadLine, {}),
+                  icon: "download",
                   onClick: handleDownload
                 }
               )
@@ -24445,7 +24406,7 @@ const Controls = ({
                 basic: true,
                 colored: "muted",
                 round: true,
-                icon: showTable ? /* @__PURE__ */ jsx(RiLineChartLine, {}) : /* @__PURE__ */ jsx(RiTableLine, {}),
+                icon: showTable ? "chart" : "table",
                 onClick: onToggleTable
               }
             )
@@ -24663,15 +24624,15 @@ const useLegendState = ({
     );
   };
   const legendClick = useCallback(
-    (_e2, legendItem2) => {
-      const { datasetIndex } = legendItem2;
+    (_2, legendItem2) => {
+      const { datasetIndex = 0 } = legendItem2;
       const chartInstance = chartRef == null ? void 0 : chartRef.current;
       const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
-      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
+      const dataset = (datasets == null ? void 0 : datasets[datasetIndex]) ?? {};
       const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
       const isDatasetVisible = (chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex)) ?? true;
       upsertHiddenState({
-        label: dataset.label,
+        label: dataset.label ?? "",
         datasetIndex,
         hidden: isDatasetVisible
       });
@@ -24680,7 +24641,7 @@ const useLegendState = ({
         const { annotationIndex } = dataset;
         dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
       }
-      if (dataset.displayGroup) {
+      if (dataset == null ? void 0 : dataset.displayGroup) {
         datasets == null ? void 0 : datasets.forEach((ds, ix) => {
           if (ds.displayGroup !== dataset.displayGroup)
             return;
@@ -24690,7 +24651,8 @@ const useLegendState = ({
         });
       }
       if (onLegendClick) {
-        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+        const legendState = legendItem2.hidden ?? false;
+        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendState);
       }
       chartInstance == null ? void 0 : chartInstance.update();
     },
@@ -24762,7 +24724,7 @@ const LegendItems = ({
     {
       hidden: hiddenState,
       dataset: datasets[item.datasetIndex],
-      handleClick: (event) => legendClick(event, item)
+      handleClick: (_2) => legendClick(_2, item)
     },
     `${item.datasetIndex}-hidden-${item.hidden}`
   );
@@ -24902,7 +24864,8 @@ const Legend2 = ({
   dispatch,
   generatedDatasets
 }) => {
-  const [resizeRef] = useMeasure$1();
+  const [measureRef] = useMeasure$1();
+  const resizeRef = measureRef;
   const panelRef = useRef(null);
   const chart2 = chartRef.current;
   const [legendPosition, setLegendPosition] = useState(options.legend.position);
@@ -25098,6 +25061,27 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions))
+    return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return dataset && has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return dataset && some(customOptions, (option) => dataset && has(dataset, option));
+    } else {
+      return dataset && some(
+        Object.values(customOptions),
+        (option) => dataset && has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, checkOption);
+  } else {
+    return checkOption(data);
+  }
+};
 var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
   CUSTOM_OPTION2["showLine"] = "showLine";
   CUSTOM_OPTION2["showPoints"] = "showPoints";
@@ -25145,8 +25129,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       backgroundColor,
       pointBackgroundColor,
       borderDash,
-      showPoints = true,
-      showLine
+      showPoints: customShowPoints,
+      showLine: customShowLine
     } = line ?? {};
     const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
     const { lineTension, spanGaps } = graph ?? {};
@@ -25161,30 +25145,34 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
         data[2].x = Math.min(axesMax, endPoint.x);
       }
     }
+    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
     const filteredData = data.filter(Boolean) || [];
     const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
-    const linePointRadius = parseFloat(String(pointRadiusProp)) || DEFAULT_POINT_RADIUS;
-    const pointRadius = (pointsEnabled || isSinglePoint) && showPoints ? linePointRadius : 0;
-    const hoverRadius = parseFloat(String(pointHoverRadius)) || DEFAULT_HOVER_RADIUS;
+    let pointState, lineState;
+    if (hasCustomOpt) {
+      pointState = customShowPoints !== void 0 ? customShowPoints : !customShowLine;
+      lineState = customShowLine !== void 0 ? customShowLine : !customShowPoints;
+    } else {
+      pointState = pointsEnabled || isSinglePoint;
+      lineState = lineEnabled;
+    }
+    const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
+    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
-    const hasCustomOpt = checkCustomOption(
-      line,
-      CUSTOM_OPTION
-    );
     return {
       ...line,
       label: line.label || `${label} ${i2 + 1}`,
       data: filteredData,
-      showLine: showLine ?? lineEnabled,
+      showLine: lineState,
       lineTension,
       spanGaps,
-      borderWidth: parseFloat(String(borderWidth)) || DEFAULT_BORDER_WIDTH,
+      borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
       borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
       backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
       pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
-      pointRadius,
+      pointRadius: pointState ? linePointRadius : 0,
       pointHoverRadius: hoverRadius,
       pointHitRadius: line.pointHitRadius ?? hoverRadius,
       ...hasCustomOpt ? { hasCustomOpt } : {}
@@ -25193,8 +25181,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
 };
 const calculateDelta$1 = (tickValue, ticks) => {
   let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
-  if (Math.abs(delta) >= 1 && tickValue !== Math.floor(tickValue)) {
-    delta = tickValue - Math.floor(tickValue);
+  if (Math.abs(delta) >= 1 && tickValue !== Math.floor(Number(tickValue))) {
+    delta = Number(tickValue) - Math.floor(Number(tickValue));
   }
   return delta;
 };
@@ -25214,7 +25202,7 @@ const formatAxisLabelNumbers = (tickValue, ticks) => {
     }
     delta = calculateDelta$1(tickValue, ticks);
   }
-  const logDelta = Math.log10(Math.abs(delta));
+  const logDelta = Math.log10(Math.abs(Number(delta)));
   const numDecimal = isNaN(logDelta) ? 1 : Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
   const roundScientificCoefficient = numDecimal === 0 ? 1 : numDecimal;
   return displayNumber(round$2(tickValue, numDecimal), {
@@ -25226,13 +25214,16 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   const axisData = currentScales || options.axes[axisType][0] || {};
   const stateAxis = state == null ? void 0 : state.axes.filter(
-    (axis) => axis.id.startsWith(axisType)
+    (axis) => {
+      var _a3;
+      return (_a3 = axis == null ? void 0 : axis.id) == null ? void 0 : _a3.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;
   const { additionalAxesOptions } = options;
   const getTicks = () => {
     const isLogarithmic = (additionalAxesOptions == null ? void 0 : additionalAxesOptions.chartScaleType) === ScaleType.Logarithmic;
-    const ticksFormattingCallback = (tick, _index, ticks2) => {
+    const ticksFormattingCallback = (tick, _2, ticks2) => {
       return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
     };
     const stepSize = !isLogarithmic ? {
@@ -25245,7 +25236,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
       //OW-10088 disable irregular axis ticks
       ...ticksConfigFromProps,
       font: {
-        size: 14
+        size: DEFAULT_FONT_SIZE
       }
     };
     return ticks;
@@ -25272,17 +25263,14 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
 };
 const getLineChartAxes = (options, axisType, state) => {
   const axesData = options.axes[axisType];
-  const axes = axesData.reduce(
-    (acc, curr, i2) => {
-      const axisData = curr;
-      axisData.color = curr.color || COLORS[i2] || generateRandomColor(COLORS);
-      axisData.position = curr.position || getAxisPosition(axisType, i2);
-      const axis = getLineChartAxis(options, axisType, state, axisData, i2);
-      const axisId = generateAxisId(axisType, i2, true);
-      return { ...acc, [axisId]: axis };
-    },
-    {}
-  );
+  const axes = axesData.reduce((acc, curr, i2) => {
+    const axisData = curr;
+    axisData.color = curr.color || COLORS[i2] || generateRandomColor(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) => {
@@ -25307,7 +25295,7 @@ const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
     const data = dataset == null ? void 0 : dataset.data;
     if (data && data.length) {
       const { x: xFirstCurrent, y: yFirstCurrent } = (data == null ? void 0 : data[0]) ?? {};
-      const { x: xLastCurrent, y: yLastCurrent } = data.at(-1) ?? {};
+      const { x: xLastCurrent = 0, y: yLastCurrent = 0 } = data.at(-1) ?? {};
       const xFirstAcc = ((_a2 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _a2.xFirst) ?? xFirstCurrent;
       const xLastAcc = ((_b2 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _b2.xLast) ?? xLastCurrent;
       const yFirstAcc = ((_c2 = acc == null ? void 0 : acc[yAxisId]) == null ? void 0 : _c2.yFirst) ?? yFirstCurrent;
@@ -25405,10 +25393,7 @@ 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;
@@ -25420,7 +25405,8 @@ const autoScale = (options, state, generatedDatasets, chartRef) => {
     annotationsData
   );
   const adjustedScales = data && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
-    const { min: propMin = void 0, max: propMax = void 0 } = scales[key];
+    const scale = scales[key];
+    const { min: propMin = void 0, max: propMax = void 0 } = scale;
     const { min, max } = getSuggestedAxisRange({
       data: data[key],
       beginAtZero: additionalAxesOptions == null ? void 0 : additionalAxesOptions.beginAtZero,
@@ -25428,7 +25414,7 @@ const autoScale = (options, state, generatedDatasets, chartRef) => {
     });
     const res = {
       [key]: {
-        ...scales[key],
+        ...scale,
         min: propMin ?? min,
         max: propMax ?? max
       }
@@ -25439,15 +25425,20 @@ const autoScale = (options, state, generatedDatasets, chartRef) => {
 };
 const getCondition = (x2, y2, left2, right2, bottom2) => {
   const threshold = 100;
-  const overLeftSide = x2 - threshold <= left2;
-  const overRightSide = x2 + threshold >= right2;
-  const overBottomSide = x2 + threshold >= left2 && x2 + threshold < right2 && y2 + threshold >= bottom2;
+  const safeX = x2 ?? 0;
+  const safeY = y2 ?? 0;
+  const safeLeft = left2 ?? 0;
+  const safeRight = right2 ?? 0;
+  const safeBottom = bottom2 ?? 0;
+  const overLeftSide = safeX - threshold <= safeLeft;
+  const overRightSide = safeX + threshold >= safeRight;
+  const overBottomSide = safeX + threshold >= safeLeft && safeX + threshold < safeRight && safeY + threshold >= safeBottom;
   return { overLeftSide, overRightSide, overBottomSide };
 };
 const getAlignmentData = (context) => {
   var _a2;
-  const { chart: chart2 = {}, dataIndex = 0, datasetIndex = 0 } = context || {};
-  const { chartArea = {} } = chart2;
+  const { chart: chart2, dataIndex = 0, datasetIndex = 0 } = context;
+  const { chartArea } = chart2;
   const { left: left2 = null, right: right2 = null, bottom: bottom2 = null } = chartArea;
   const meta = chart2.getDatasetMeta(datasetIndex);
   const { x: x2 = null, y: y2 = null } = ((_a2 = meta == null ? void 0 : meta.data) == null ? void 0 : _a2[dataIndex]) || {};
@@ -25474,13 +25465,15 @@ const getLineChartDataLabels = (options) => {
   return options.graph.showDataLabels ? {
     display: AUTO,
     align: getPosition(),
-    formatter: (_value, context) => context.dataset.data[context.dataIndex].label || ""
+    formatter: (_2, context) => context.dataset.data[context.dataIndex].label || ""
   } : { display: false };
 };
 const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
-    element.options.label.xAdjust = chart2.chartArea.left;
+    if (element.options.label) {
+      element.options.label.xAdjust = chart2.chartArea.left;
+    }
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
   if (element.options.label) {
@@ -25503,7 +25496,7 @@ const annotationLeave = (element, chart2) => {
 };
 const generateAnnotations = (options, state) => {
   const { annotationsData } = (options == null ? void 0 : options.annotations) || {};
-  const annotations = annotationsData == null ? void 0 : annotationsData.reduce((acc, curr, i2) => {
+  return 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))) {
       return { ...acc };
@@ -25551,7 +25544,6 @@ const generateAnnotations = (options, state) => {
     };
     return { ...acc, [`annotation${i2 + 1}`]: annotation2 };
   }, {});
-  return annotations;
 };
 const getAnnotation = (options, state) => {
   const { showAnnotations, annotationsData } = (options == null ? void 0 : options.annotations) || {};
@@ -25572,13 +25564,16 @@ const customFormatNumber = (labelNumber) => {
   return displayNumber(roundByMagnitude(labelNumber), roundOptions);
 };
 const getLineChartToolTips = (options) => {
-  const getTooltipLabels = (dataset) => {
-    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 getTooltipLabels = ({
+    xAxisID = "",
+    yAxisID = ""
+  }) => {
+    var _a2, _b2, _c2;
+    const xIndex = (xAxisID == null ? void 0 : xAxisID.length) > 1 ? Number(xAxisID[1]) - 1 : 0;
+    const yIndex = (yAxisID == null ? void 0 : yAxisID.length) > 1 ? Number(yAxisID[1]) - 1 : 0;
     const xAxis = options.axes.x[xIndex];
     const yAxis = options.axes.y[yIndex];
-    if (((_e2 = (_d2 = (_c2 = options == null ? void 0 : options.axes) == null ? void 0 : _c2.x) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.position) === Position.Top) {
+    if (((_c2 = (_b2 = (_a2 = options == null ? void 0 : options.axes) == null ? void 0 : _a2.x) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.position) === Position.Top) {
       return {
         titleAxisLabel: (yAxis == null ? void 0 : yAxis.label) || "",
         valueAxisLabel: (xAxis == null ? void 0 : xAxis.label) || "",
@@ -25594,9 +25589,9 @@ const getLineChartToolTips = (options) => {
       };
     }
   };
-  const titleCallback = (tooltipItem, _data) => {
+  const titleCallback = (tooltipItem) => {
     const labels = getTooltipLabels(tooltipItem[0].dataset);
-    const { titleLabel, titleAxisLabel } = labels;
+    const { titleLabel, titleAxisLabel } = labels ?? {};
     const formattedValue = titleLabel === TooltipLabel.Y ? tooltipItem[0].parsed.y : tooltipItem[0].parsed.x;
     const roundedValue = customFormatNumber(formattedValue);
     return `${roundedValue} ${titleAxisLabel}`;
@@ -25605,7 +25600,7 @@ const getLineChartToolTips = (options) => {
     const { showLabelsInTooltips } = options.tooltip;
     let label = tooltipItem.dataset.label || "";
     const labels = getTooltipLabels(tooltipItem.dataset);
-    const { valueLabel, valueAxisLabel } = labels;
+    const { valueLabel = "", valueAxisLabel = "" } = labels ?? {};
     const getTooltipItemValue = () => {
       const labelNumber = valueLabel === TooltipLabel.X ? tooltipItem.parsed.x : tooltipItem.parsed.y;
       return customFormatNumber(labelNumber);
@@ -25658,46 +25653,6 @@ const getDraggableData = (options) => {
     }
   } : {};
 };
-const ellipseAnnotationsConfig = ({
-  data,
-  borderColor: pointBorderColor
-}) => {
-  return data == null ? void 0 : data.map(({ ellipseOptions }, index2) => {
-    if (!ellipseOptions)
-      return;
-    const {
-      xMinPoint,
-      xMaxPoint,
-      yMinPoint,
-      yMaxPoint,
-      rotation,
-      borderColor = pointBorderColor,
-      backgroundColor = "rgba(0, 0, 0, 0)"
-    } = ellipseOptions ?? {};
-    return {
-      id: `ellipse${index2}`,
-      type: "ellipse",
-      xMin: xMinPoint,
-      xMax: xMaxPoint,
-      yMin: yMinPoint,
-      yMax: yMaxPoint,
-      rotation,
-      borderColor,
-      backgroundColor
-    };
-  }).filter(Boolean);
-};
-const ellipsisAnnotation = (datasets) => {
-  return datasets.flatMap((dataset) => ellipseAnnotationsConfig(dataset)).reduce(
-    (acc, annotation2) => {
-      if (annotation2) {
-        acc[annotation2.id] = annotation2;
-      }
-      return acc;
-    },
-    {}
-  );
-};
 const useChartOptions = ({
   chartRef,
   state,
@@ -25728,7 +25683,9 @@ const useChartOptions = ({
     lineEnabled,
     showAnnotationLineIndex
   } = state;
-  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const [hoveredPoint, setHoveredPoint] = useState(
+    null
+  );
   const { updateAxesRangesFromChart, onHover } = useChartFunctions({
     chartRef,
     state,
@@ -25782,15 +25739,9 @@ const useChartOptions = ({
     }),
     [zoomEnabled]
   );
-  const mergedAnnotation = {
-    ...annotation2.annotations,
-    ...ellipsisAnnotation(generatedDatasets)
-  };
   const plugins = {
     datalabels,
-    annotation: {
-      annotations: mergedAnnotation
-    },
+    annotation: annotation2,
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
     legend: { ...legend2, display: false },
@@ -25830,7 +25781,8 @@ const useChartOptions = ({
       elements: {
         line: {
           pointStyle: PointStyle.Circle,
-          showLine: lineEnabled
+          showLine: lineEnabled,
+          tension: 0
         }
       },
       scales,
@@ -25846,7 +25798,7 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     debounce$3(() => {
       resetZoom2();
     }, 100),
-    // 300ms debounce delay
+    // 100ms debounce delay
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
@@ -25872,7 +25824,7 @@ const getAxesRangesFromChart = (chartRef, axes) => {
   const { scales = {} } = chartRef.current || {};
   return Object.entries(scales).map(([key, { min, max }], i2) => {
     var _a2;
-    const axesArray = axes.x.concat(axes.y);
+    const axesArray = [...axes.x, ...axes.y];
     const unit = (_a2 = axesArray == null ? void 0 : axesArray[i2]) == null ? void 0 : _a2.unit;
     return {
       id: key,
@@ -26393,29 +26345,15 @@ const getDefaultProps$1 = (props) => {
     }
   };
 };
-Chart$2.register(
-  LinearScale$1,
-  CategoryScale$1,
-  LogarithmicScale$1,
-  ArcElement$1,
-  plugin_legend,
-  plugin_tooltip,
-  plugin_title,
-  index,
-  plugin$1,
-  plugin
-);
-const PieChart = (props) => {
-  setDefaultTheme();
-  const chart2 = getDefaultProps$1(props);
-  const chartRef = useRef(null);
+const usePieChartConfig = (chart2) => {
   const [pointHover, setPointHover] = useState(false);
-  const { data, options, testId } = chart2;
+  const { data, options } = chart2;
   const generateDatasets = (datasets) => {
+    var _a2;
     const copyDataset = [...datasets];
     if (options.graph.stacked) {
       const generatedDataset = {
-        label: copyDataset[0].label,
+        label: ((_a2 = copyDataset == null ? void 0 : copyDataset[0]) == null ? void 0 : _a2.label) ?? "",
         backgroundColor: [],
         borderColor: [],
         borderWidth: Number(copyDataset[0].borderWidth) || 1,
@@ -26438,8 +26376,9 @@ const PieChart = (props) => {
     }
     const generatedDatasets2 = copyDataset.map(
       (pieDataset, index2) => {
-        const borderWidth = parseFloat(pieDataset.borderWidth) || "1";
-        const color2 = pieDataset.data.map((_pie, i2) => COLORS[i2]) || generateRandomColor(COLORS);
+        const { borderWidth: inputBorderWidth = "1", data: data2 = [] } = pieDataset ?? {};
+        const borderWidth = parseFloat(String(inputBorderWidth)) || 1;
+        const color2 = data2.map((_2, i2) => COLORS[i2]) || generateRandomColor(COLORS);
         const borderColor = pieDataset.borderColor || color2;
         const backgroundColor = pieDataset.backgroundColor || color2.map((col) => col + `${99 - 11 * index2}`);
         return {
@@ -26459,49 +26398,18 @@ const PieChart = (props) => {
       text: chart2.options.title
     } : {};
   };
-  const legendClick = (_e2, legendItem2, legend2) => {
-    const chartInstance = legend2.chart;
-    const { datasets } = chartInstance.data;
-    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++) {
-          if (i2 % data.datasets.length === index2) {
-            const meta = chartInstance.getDatasetMeta(0);
-            const arc = meta.data[i2];
-            arc.hidden = !arc.hidden;
-          }
-        }
-      } else {
-        for (let i2 = 0; i2 < chartInstance.config._config.data.datasets[0].data.length; i2++) {
-          if (parseInt(String(i2 / data.datasets.length)) === index2) {
-            const meta = chartInstance.getDatasetMeta(0);
-            const arc = meta.data[i2];
-            arc.hidden = !arc.hidden;
-          }
-        }
-      }
-    } else {
-      if (options.legend.useDataset) {
-        const meta = chartInstance.getDatasetMeta(index2);
-        meta.hidden = !meta.hidden;
-      } else {
-        if (datasets.length > 1) {
-          for (let i2 = 0; i2 < data.datasets.length; i2++) {
-            const meta = chartInstance.getDatasetMeta(i2);
-            const arc = meta.data[index2];
-            arc.hidden = !arc.hidden;
-          }
-        } else {
-          const meta = chartInstance.getDatasetMeta(0);
-          const arc = meta.data[index2];
-          arc.hidden = !arc.hidden;
-        }
+  const legendClick = (_2, legendItem2, legend2) => {
+    var _a2;
+    const { chart: chart22 } = legend2 ?? {};
+    if (legendItem2 && chart22) {
+      const { index: index2 = 0 } = legendItem2;
+      chart22.toggleDataVisibility(index2);
+      chart22.update();
+      if ((_a2 = options.interactions) == null ? void 0 : _a2.onLegendClick) {
+        const hidden = chart22.isDatasetVisible(index2);
+        options.interactions.onLegendClick(legendItem2.text, !hidden);
       }
     }
-    if (options.interactions.onLegendClick)
-      options.interactions.onLegendClick(text, hidden);
-    chartInstance.update();
   };
   const onClick = (_evt, _elements, chartInstance) => {
     chartInstance.resetZoom();
@@ -26532,7 +26440,7 @@ const PieChart = (props) => {
       display: "auto",
       align: "center",
       anchor: "center",
-      formatter: (_value, context) => {
+      formatter: (_2, context) => {
         if (context.chart.getDatasetMeta(
           options.graph.stacked ? 0 : context.datasetIndex
         ).data[context.dataIndex].hidden)
@@ -26551,66 +26459,11 @@ 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,
         boxHeight: 6,
         boxWidth: 6,
         usePointStyle: true,
@@ -26652,17 +26505,54 @@ const PieChart = (props) => {
       usePointStyle: true
     };
   };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        styles$1.chart,
-        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$1.fixedHeight : styles$1.stretchHeight : ""
-      ),
-      style: {
-        width: options.chartStyling.width || "auto",
-        height: options.chartStyling.height || "auto"
-      },
+  return {
+    generatedDatasets,
+    getTitle: getTitle2,
+    legendClick,
+    onClick,
+    onHover,
+    getDatalabels,
+    getLegend: getLegend2,
+    getToolTips
+  };
+};
+Chart$2.register(
+  LinearScale$1,
+  CategoryScale$1,
+  LogarithmicScale$1,
+  ArcElement$1,
+  plugin_legend,
+  plugin_tooltip,
+  plugin_title,
+  index,
+  plugin$1,
+  plugin
+);
+const PieChart = (props) => {
+  setDefaultTheme();
+  const chart2 = getDefaultProps$1(props);
+  const chartRef = useRef(null);
+  const { data, options, testId } = chart2;
+  const {
+    generatedDatasets,
+    getTitle: getTitle2,
+    onClick,
+    onHover,
+    getDatalabels,
+    getLegend: getLegend2,
+    getToolTips
+  } = usePieChartConfig(chart2);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        styles$1.chart,
+        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$1.fixedHeight : styles$1.stretchHeight : ""
+      ),
+      style: {
+        width: options.chartStyling.width || "auto",
+        height: options.chartStyling.height || "auto"
+      },
       "data-testid": testId,
       children: /* @__PURE__ */ jsx(
         Pie,
@@ -39060,107 +38950,123 @@ const Ht = { id: "dragdata", afterInit: function(t) {
     return t.tooltip && t.tooltip.update(), false;
 } };
 Chart.register(Ht);
-const chart = "_chart_1t41j_1";
-const fixedHeight = "_fixedHeight_1t41j_13";
-const stretchHeight = "_stretchHeight_1t41j_19";
-const zoomForm = "_zoomForm_1t41j_32";
-const zoomReset = "_zoomReset_1t41j_40";
-const help = "_help_1t41j_43";
-const autoWeight = "_autoWeight_1t41j_47";
-const styles = {
-  chart,
-  fixedHeight,
-  stretchHeight,
-  zoomForm,
-  zoomReset,
-  help,
-  autoWeight
-};
-const defaultAxes = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
-});
-const defaultAdditionalAxesOptions = (options) => ({
-  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
-  reverse: (options == null ? void 0 : options.reverse) || false,
-  stacked: (options == null ? void 0 : options.stacked) || false,
-  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? true,
-  stepSize: options == null ? void 0 : options.stepSize,
-  suggestedMin: options == null ? void 0 : options.suggestedMin,
-  suggestedMax: options == null ? void 0 : options.suggestedMax,
-  min: options == null ? void 0 : options.min,
-  max: options == null ? void 0 : options.max
-});
-const defaultChartStyling = (styling) => ({
-  width: styling == null ? void 0 : styling.width,
-  height: styling == null ? void 0 : styling.height,
-  maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
-  staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
-  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
-});
-const defaultTooltip = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
-});
-const defaultGraph = (graph) => ({
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
-});
-const defaultAnnotations = (annotations) => ({
-  showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
-  controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
-  annotationsData: (annotations == null ? void 0 : annotations.annotationsData) || []
-});
-const defaultLegend = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
-  align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center,
-  customLegend: (legend2 == null ? void 0 : legend2.customLegend) || {
-    customLegendPlugin: null,
-    customLegendContainerID: ""
-  }
-});
-const defaultChartOptions = (options) => ({
-  enableZoom: (options == null ? void 0 : options.enableZoom) || false,
-  enablePan: (options == null ? void 0 : options.enablePan) || false
-});
-const defaultInteractions = (interactions) => ({
-  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
-  onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover
-});
-const defaultDragData = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
-  showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
-  roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
-  dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
-  dragY: (dragData == null ? void 0 : dragData.dragY) ?? true,
-  onDragStart: dragData == null ? void 0 : dragData.onDragStart,
-  onDrag: dragData == null ? void 0 : dragData.onDrag,
-  onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
-});
-const getDefaultProps = (props) => {
-  const chart2 = (props == null ? void 0 : props.chart) || {};
-  const options = (chart2 == null ? void 0 : chart2.options) || {};
-  return {
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? "",
-    data: chart2 == null ? void 0 : chart2.data,
-    options: {
-      title: (options == null ? void 0 : options.title) || "",
-      direction: (options == null ? void 0 : options.direction) || "vertical",
-      axes: defaultAxes(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions(
-        options == null ? void 0 : options.additionalAxesOptions
-      ),
-      chartStyling: defaultChartStyling(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations(options == null ? void 0 : options.annotations),
-      legend: defaultLegend(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions(options == null ? void 0 : options.interactions),
-      dragData: defaultDragData(options == null ? void 0 : options.dragData)
+const useBarChartConfig = ({
+  chart: chart2,
+  chartRef
+}) => {
+  var _a2;
+  const { options } = chart2;
+  const { annotations, interactions } = options;
+  const [pointHover, setPointHover] = useState(false);
+  const [visibleAnnotationsIndexes, setVisibleAnnotationsIndexes] = useState(
+    setAnnotations(annotations.annotationsData)
+  );
+  const generateBarChartDatasets = ({
+    datasets,
+    options: options2
+  }) => {
+    const {
+      annotations: { controlAnnotation, showAnnotations, annotationsData } = {}
+    } = options2;
+    const barDatasetsCopy = [...datasets];
+    if (controlAnnotation && showAnnotations && (annotationsData == null ? void 0 : annotationsData.length)) {
+      annotationsData.forEach(
+        (annotation2, index2) => {
+          barDatasetsCopy.push({
+            isAnnotation: true,
+            label: annotation2.label,
+            annotationIndex: index2,
+            backgroundColor: annotation2.color || COLORS[index2],
+            borderColor: annotation2.color || COLORS[index2],
+            data: [],
+            type: ChartType.Bar
+          });
+        }
+      );
     }
+    const generatedDatasets2 = barDatasetsCopy.map((barDataset, index2) => {
+      const colorSchema = COLORS;
+      const colors2 = barDataset.data.map((_2, i2) => {
+        const colorSelectionIndex = datasets.length > 1 ? index2 : i2;
+        return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
+      });
+      const backgroundColors = barDataset.backgroundColor || colors2.map((color2) => color2 + ALPHA_CHANEL);
+      return {
+        ...barDataset,
+        borderWidth: parseFloat(String(barDataset.borderWidth)) ?? 1,
+        borderColor: barDataset.borderColor || colors2[index2],
+        backgroundColor: backgroundColors
+      };
+    });
+    return generatedDatasets2 || [];
+  };
+  const generatedDatasets = generateBarChartDatasets({
+    datasets: (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets,
+    options
+  });
+  const legendClick = (_e2, legendItem2) => {
+    const index2 = (legendItem2 == null ? void 0 : legendItem2.datasetIndex) ?? null;
+    const chartInstance = chartRef.current;
+    if (chartInstance && index2 !== null) {
+      const { datasets } = chartInstance.data;
+      const dataset = datasets[index2];
+      const meta = chartInstance.getDatasetMeta(index2);
+      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
+      if (annotations.controlAnnotation && dataset.isAnnotation) {
+        const { annotationIndex } = dataset;
+        if (visibleAnnotationsIndexes.includes(annotationIndex)) {
+          setVisibleAnnotationsIndexes(
+            visibleAnnotationsIndexes.filter((ann) => ann !== annotationIndex)
+          );
+        } else {
+          setVisibleAnnotationsIndexes([
+            ...visibleAnnotationsIndexes,
+            annotationIndex
+          ]);
+        }
+      }
+      if (dataset.displayGroup) {
+        datasets.forEach((ds, ix) => {
+          if (ds.displayGroup !== dataset.displayGroup) {
+            return;
+          }
+          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+        });
+      }
+      if (interactions.onLegendClick) {
+        interactions.onLegendClick(
+          legendItem2 == null ? void 0 : legendItem2.text,
+          (legendItem2 == null ? void 0 : legendItem2.hidden) ?? false
+        );
+      }
+      chartInstance.update();
+    }
+  };
+  const onClick = (_evt, _elements, chartInstance) => {
+    chartInstance.resetZoom();
+  };
+  const onHover = (evt, hoveredItems) => {
+    if (pointHover && !(hoveredItems == null ? void 0 : hoveredItems.length)) {
+      setPointHover(false);
+      if (interactions.onUnhover) {
+        interactions.onUnhover(evt);
+      }
+    }
+    if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
+      setPointHover(true);
+      if (interactions.onHover) {
+        const { index: index2, datasetIndex } = hoveredItems[0];
+        const generatedDataset = generatedDatasets;
+        interactions.onHover(evt, datasetIndex, index2, generatedDataset);
+      }
+    }
+  };
+  return {
+    generatedDatasets,
+    legendClick,
+    onClick,
+    onHover,
+    visibleAnnotationsIndexes
   };
 };
 const getBarChartAxis = ({
@@ -39169,27 +39075,29 @@ const getBarChartAxis = ({
   currentScale,
   i: i2
 }) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
   const isDirectionVertical = isVertical(chart2.options.direction);
-  const axisData = currentScale || chart2.options.axes[axisType][0];
+  const axisData = currentScale || ((_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.axes) == null ? void 0 : _b2[axisType]) == null ? void 0 : _c2[0]);
   const isDirectionCompatibleWithAxisType = isDirectionVertical && axisType === AxisType.Y || !isDirectionVertical && axisType === AxisType.X;
   const grid = (axisData == null ? void 0 : axisData.gridLines) || {};
   const getScaleType = () => {
+    var _a3, _b3;
     const scaleType = chart2.data.labels ? ScaleType.Category : ScaleType.Linear;
     const axisWithScale = isDirectionVertical ? AxisType.X : AxisType.Y;
-    return axisType === axisWithScale ? scaleType : chart2.options.additionalAxesOptions.chartScaleType;
+    return axisType === axisWithScale ? scaleType : (_b3 = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.additionalAxesOptions) == null ? void 0 : _b3.chartScaleType;
   };
   const getReverse = () => {
+    var _a3, _b3;
     const axisWithReverse = isDirectionVertical ? AxisType.Y : AxisType.X;
-    return axisType === axisWithReverse ? chart2.options.additionalAxesOptions.reverse : false;
+    return axisType === axisWithReverse ? (_b3 = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.additionalAxesOptions) == null ? void 0 : _b3.reverse : false;
   };
   const getTicks = () => {
     var _a3, _b3, _c3, _d3;
     const additionalAxesOptions = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.additionalAxesOptions;
     const ticksConfigFromProps = (_d3 = (_c3 = (_b3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _b3.scales) == null ? void 0 : _c3[`${i2 === 0 ? axisType : axisType + i2}`]) == null ? void 0 : _d3.ticks;
     const isLogarithmic = isDirectionCompatibleWithAxisType && (additionalAxesOptions == null ? void 0 : additionalAxesOptions.chartScaleType) === ScaleType.Logarithmic;
-    const ticksFormattingCallback = (tick, _index, ticks2) => {
-      return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
+    const ticksFormattingCallback = (tick, _2, ticks2) => {
+      return isLogarithmic ? LOGARITHMIC_STEPS.includes(Number(tick)) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
     };
     const stepSize = !isLogarithmic ? {
       stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions == null ? void 0 : additionalAxesOptions.stepSize : null)
@@ -39200,7 +39108,7 @@ const getBarChartAxis = ({
       //OW-10088 disable irregular axis ticks
       ...ticksConfigFromProps,
       font: {
-        size: 14
+        size: DEFAULT_FONT_SIZE
       }
     };
     if ((additionalAxesOptions == null ? void 0 : additionalAxesOptions.chartScaleType) === ScaleType.Logarithmic) {
@@ -39211,14 +39119,14 @@ const getBarChartAxis = ({
   return {
     type: getScaleType(),
     position: axisData == null ? void 0 : axisData.position,
-    beginAtZero: (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.additionalAxesOptions) == null ? void 0 : _b2.beginAtZero,
+    beginAtZero: (_e2 = (_d2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _d2.additionalAxesOptions) == null ? void 0 : _e2.beginAtZero,
     reverse: getReverse(),
-    suggestedMax: (_d2 = (_c2 = chart2.options) == null ? void 0 : _c2.additionalAxesOptions) == null ? void 0 : _d2.suggestedMax,
-    suggestedMin: (_f2 = (_e2 = chart2.options) == null ? void 0 : _e2.additionalAxesOptions) == null ? void 0 : _f2.suggestedMin,
-    min: isDirectionCompatibleWithAxisType ? (_h2 = (_g2 = chart2.options) == null ? void 0 : _g2.additionalAxesOptions) == null ? void 0 : _h2.min : void 0,
-    max: isDirectionCompatibleWithAxisType ? (_j2 = (_i2 = chart2.options) == null ? void 0 : _i2.additionalAxesOptions) == null ? void 0 : _j2.max : void 0,
+    suggestedMax: (_g2 = (_f2 = chart2.options) == null ? void 0 : _f2.additionalAxesOptions) == null ? void 0 : _g2.suggestedMax,
+    suggestedMin: (_i2 = (_h2 = chart2.options) == null ? void 0 : _h2.additionalAxesOptions) == null ? void 0 : _i2.suggestedMin,
+    min: isDirectionCompatibleWithAxisType ? (_k2 = (_j2 = chart2.options) == null ? void 0 : _j2.additionalAxesOptions) == null ? void 0 : _k2.min : void 0,
+    max: isDirectionCompatibleWithAxisType ? (_m2 = (_l2 = chart2.options) == null ? void 0 : _l2.additionalAxesOptions) == null ? void 0 : _m2.max : void 0,
     title: {
-      display: ((_k2 = axisData == null ? void 0 : axisData.label) == null ? void 0 : _k2.length) || ((_l2 = axisData == null ? void 0 : axisData.unit) == null ? void 0 : _l2.length),
+      display: ((_n2 = axisData == null ? void 0 : axisData.label) == null ? void 0 : _n2.length) || ((_o2 = axisData == null ? void 0 : axisData.unit) == null ? void 0 : _o2.length),
       text: (axisData == null ? void 0 : axisData.label) || (axisData == null ? void 0 : axisData.unit),
       padding: 0
     },
@@ -39226,7 +39134,7 @@ const getBarChartAxis = ({
     grid: {
       ...grid
     },
-    stacked: (_n2 = (_m2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _m2.additionalAxesOptions) == null ? void 0 : _n2.stacked
+    stacked: (_q2 = (_p2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _p2.additionalAxesOptions) == null ? void 0 : _q2.stacked
   };
 };
 const getBarChartAxes = (chart2, axisType) => {
@@ -39257,13 +39165,40 @@ const getBarChartScales = (chart2) => {
     ...yAxesScales
   };
 };
+const getBarChartDataLabels = (options) => {
+  var _a2;
+  const { beginAtZero, reverse } = (options == null ? void 0 : options.additionalAxesOptions) || {};
+  const formatterCallback = (_2, context) => {
+    const { datasetIndex, dataIndex } = context;
+    const dataset = context.chart.data.datasets[datasetIndex];
+    const dataElement = dataset.data[dataIndex];
+    let dataLabel = "";
+    if (typeof dataElement === "number") {
+      dataLabel = Number.isInteger(dataElement) ? dataElement : dataElement.toFixed(2);
+    }
+    if (Array.isArray(dataElement)) {
+      dataLabel = dataElement.reduce((acc, curr, i2) => {
+        return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+      }, "");
+    }
+    return dataLabel;
+  };
+  const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
+  const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
+  return ((_a2 = options == null ? void 0 : options.graph) == null ? void 0 : _a2.showDataLabels) ? {
+    display: AUTO,
+    align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
+    anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
+    formatter: formatterCallback
+  } : { display: false };
+};
 const getBarChartToolTips = (options) => {
   var _a2;
   const getTooltipLabels = (dataset) => {
     var _a3, _b2;
     const isDirectionVertical = isVertical(options.direction);
-    const x2 = ((_a3 = options.axes) == null ? void 0 : _a3.x) || [];
-    const y2 = ((_b2 = options.axes) == null ? void 0 : _b2.y) || [];
+    const x2 = Array.isArray((_a3 = options.axes) == null ? void 0 : _a3.x) ? options.axes.x : [];
+    const y2 = Array.isArray((_b2 = options.axes) == null ? void 0 : _b2.y) ? options.axes.y : [];
     const getAxisIndex = (axisID) => {
       if (!axisID)
         return 0;
@@ -39346,32 +39281,147 @@ const getBarChartToolTips = (options) => {
     }
   };
 };
-const getBarChartDataLabels = (options) => {
-  var _a2;
-  const { beginAtZero, reverse } = (options == null ? void 0 : options.additionalAxesOptions) || {};
-  const formatterCallback = (_value, context) => {
-    const { datasetIndex, dataIndex } = context;
-    const dataset = context.chart.data.datasets[datasetIndex];
-    const dataElement = dataset.data[dataIndex];
-    let dataLabel = "";
-    if (typeof dataElement === "number") {
-      dataLabel = Number.isInteger(dataElement) ? dataElement : dataElement.toFixed(2);
+const useBarChartOptions = ({
+  chart: chart2,
+  chartRef
+}) => {
+  var _a2, _b2, _c2, _d2;
+  const { options } = chart2;
+  const { chartStyling, dragData } = options;
+  const { legendClick, onClick, onHover, visibleAnnotationsIndexes } = useBarChartConfig({ chart: chart2, chartRef });
+  return {
+    onClick,
+    onHover,
+    indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
+    maintainAspectRatio: chartStyling.maintainAspectRatio,
+    animation: chartStyling.performanceMode && {
+      duration: ANIMATION_DURATION.FAST
+    },
+    hover: {
+      mode: ChartHoverMode.Nearest,
+      intersect: true
+    },
+    scales: getBarChartScales(chart2),
+    plugins: {
+      title: getTitle(options),
+      datalabels: getBarChartDataLabels(options),
+      annotation: getAnnotation(options, {
+        showAnnotationLineIndex: visibleAnnotationsIndexes
+      }),
+      tooltip: getBarChartToolTips(options),
+      legend: getLegend(options, legendClick),
+      [CUSTOM_LEGEND_PLUGIN_NAME]: ((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin) && {
+        containerID: ((_d2 = (_c2 = options == null ? void 0 : options.legend) == null ? void 0 : _c2.customLegend) == null ? void 0 : _d2.customLegendContainerID) ?? ""
+      },
+      chartAreaBorder: {
+        borderColor: BORDER_COLOR
+      },
+      dragData: (dragData == null ? void 0 : dragData.enableDragData) && getDraggableData(options)
     }
-    if (Array.isArray(dataElement)) {
-      dataLabel = dataElement.reduce((acc, curr, i2) => {
-        return i2 === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
-      }, "");
+  };
+};
+const chart = "_chart_1t41j_1";
+const fixedHeight = "_fixedHeight_1t41j_13";
+const stretchHeight = "_stretchHeight_1t41j_19";
+const zoomForm = "_zoomForm_1t41j_32";
+const zoomReset = "_zoomReset_1t41j_40";
+const help = "_help_1t41j_43";
+const autoWeight = "_autoWeight_1t41j_47";
+const styles = {
+  chart,
+  fixedHeight,
+  stretchHeight,
+  zoomForm,
+  zoomReset,
+  help,
+  autoWeight
+};
+const defaultAxes = (axes) => ({
+  x: (axes == null ? void 0 : axes.x) || [{}],
+  y: (axes == null ? void 0 : axes.y) || [{}]
+});
+const defaultAdditionalAxesOptions = (options) => ({
+  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
+  reverse: (options == null ? void 0 : options.reverse) || false,
+  stacked: (options == null ? void 0 : options.stacked) || false,
+  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? true,
+  stepSize: options == null ? void 0 : options.stepSize,
+  suggestedMin: options == null ? void 0 : options.suggestedMin,
+  suggestedMax: options == null ? void 0 : options.suggestedMax,
+  min: options == null ? void 0 : options.min,
+  max: options == null ? void 0 : options.max
+});
+const defaultChartStyling = (styling) => ({
+  width: styling == null ? void 0 : styling.width,
+  height: styling == null ? void 0 : styling.height,
+  maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
+  staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
+  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
+});
+const defaultTooltip = (tooltip) => ({
+  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
+  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
+});
+const defaultGraph = (graph) => ({
+  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
+  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
+});
+const defaultAnnotations = (annotations) => ({
+  showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
+  controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
+  annotationsData: (annotations == null ? void 0 : annotations.annotationsData) || []
+});
+const defaultLegend = (legend2) => ({
+  display: (legend2 == null ? void 0 : legend2.display) ?? true,
+  position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
+  align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center,
+  customLegend: (legend2 == null ? void 0 : legend2.customLegend) || {
+    customLegendPlugin: null,
+    customLegendContainerID: ""
+  }
+});
+const defaultChartOptions = (options) => ({
+  enableZoom: (options == null ? void 0 : options.enableZoom) || false,
+  enablePan: (options == null ? void 0 : options.enablePan) || false
+});
+const defaultInteractions = (interactions) => ({
+  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
+  onHover: interactions == null ? void 0 : interactions.onHover,
+  onUnhover: interactions == null ? void 0 : interactions.onUnhover
+});
+const defaultDragData = (dragData) => ({
+  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
+  showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
+  roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
+  dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
+  dragY: (dragData == null ? void 0 : dragData.dragY) ?? true,
+  onDragStart: dragData == null ? void 0 : dragData.onDragStart,
+  onDrag: dragData == null ? void 0 : dragData.onDrag,
+  onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
+});
+const getDefaultProps = (props) => {
+  const chart2 = (props == null ? void 0 : props.chart) || {};
+  const options = (chart2 == null ? void 0 : chart2.options) || {};
+  return {
+    testId: (chart2 == null ? void 0 : chart2.testId) ?? "",
+    data: chart2 == null ? void 0 : chart2.data,
+    options: {
+      title: (options == null ? void 0 : options.title) || "",
+      direction: (options == null ? void 0 : options.direction) || "vertical",
+      axes: defaultAxes(options == null ? void 0 : options.axes),
+      additionalAxesOptions: defaultAdditionalAxesOptions(
+        options == null ? void 0 : options.additionalAxesOptions
+      ),
+      chartStyling: defaultChartStyling(options == null ? void 0 : options.chartStyling),
+      tooltip: defaultTooltip(options == null ? void 0 : options.tooltip),
+      graph: defaultGraph(options == null ? void 0 : options.graph),
+      annotations: defaultAnnotations(options == null ? void 0 : options.annotations),
+      legend: defaultLegend(options == null ? void 0 : options.legend),
+      chartOptions: defaultChartOptions(options == null ? void 0 : options.chartOptions),
+      interactions: defaultInteractions(options == null ? void 0 : options.interactions),
+      dragData: defaultDragData(options == null ? void 0 : options.dragData)
     }
-    return dataLabel;
   };
-  const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
-  const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
-  return ((_a2 = options == null ? void 0 : options.graph) == null ? void 0 : _a2.showDataLabels) ? {
-    display: AUTO,
-    align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
-    anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
-    formatter: formatterCallback
-  } : { display: false };
 };
 Chart$2.register(
   LinearScale$1,
@@ -39388,108 +39438,14 @@ Chart$2.register(
   Ht
 );
 const BarChart = (props) => {
-  var _a2, _b2, _c2;
+  var _a2, _b2;
   setDefaultTheme();
   const chartRef = useRef(null);
-  const [pointHover, setPointHover] = useState(false);
   const chart2 = getDefaultProps(props);
   const { options, testId } = chart2;
-  const { annotations, chartStyling, interactions, graph, dragData } = chart2.options;
-  const [visibleAnnotationsIndices, setVisibleAnnotationsIndices] = useState(
-    setAnnotations(annotations.annotationsData)
-  );
-  const generateBarChartDatasets = (datasets) => {
-    var _a3;
-    const barDatasetsCopy = [...datasets];
-    if (annotations.controlAnnotation && annotations.showAnnotations && ((_a3 = annotations.annotationsData) == null ? void 0 : _a3.length)) {
-      annotations.annotationsData.forEach(
-        (annotation2, index2) => {
-          barDatasetsCopy.push({
-            isAnnotation: true,
-            label: annotation2.label,
-            annotationIndex: index2,
-            backgroundColor: annotation2.color || COLORS[index2],
-            borderColor: annotation2.color || COLORS[index2],
-            data: [],
-            type: ChartType.Bar
-          });
-        }
-      );
-    }
-    const generatedDatasets2 = barDatasetsCopy.map((barDataset, index2) => {
-      const colorSchema = COLORS;
-      const colors2 = barDataset.data.map((_2, i2) => {
-        const colorSelectionIndex = datasets.length > 1 ? index2 : i2;
-        return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);
-      });
-      const backgroundColors = barDataset.backgroundColor || colors2.map((color2) => color2 + ALPHA_CHANEL);
-      return {
-        ...barDataset,
-        borderWidth: parseFloat(String(barDataset.borderWidth)) ?? 1,
-        borderColor: barDataset.borderColor || colors2[index2],
-        backgroundColor: backgroundColors
-      };
-    });
-    return generatedDatasets2 || [];
-  };
-  const generatedDatasets = generateBarChartDatasets((_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets);
-  const legendClick = (_e2, legendItem2) => {
-    const index2 = (legendItem2 == null ? void 0 : legendItem2.datasetIndex) ?? null;
-    const chartInstance = chartRef.current;
-    if (chartInstance && index2 !== null) {
-      const { datasets } = chartInstance.data;
-      const dataset = datasets[index2];
-      const meta = chartInstance.getDatasetMeta(index2);
-      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
-      if (annotations.controlAnnotation && dataset.isAnnotation) {
-        const { annotationIndex } = dataset;
-        if (visibleAnnotationsIndices.includes(annotationIndex)) {
-          setVisibleAnnotationsIndices(
-            visibleAnnotationsIndices.filter((ann) => ann !== annotationIndex)
-          );
-        } else {
-          setVisibleAnnotationsIndices([
-            ...visibleAnnotationsIndices,
-            annotationIndex
-          ]);
-        }
-      }
-      if (dataset.displayGroup) {
-        datasets.forEach((ds, ix) => {
-          if (ds.displayGroup !== dataset.displayGroup) {
-            return;
-          }
-          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
-        });
-      }
-      if (interactions.onLegendClick) {
-        interactions.onLegendClick(
-          legendItem2 == null ? void 0 : legendItem2.text,
-          (legendItem2 == null ? void 0 : legendItem2.hidden) ?? false
-        );
-      }
-      chartInstance.update();
-    }
-  };
-  const onClick = (_evt, _elements, chartInstance) => {
-    chartInstance.resetZoom();
-  };
-  const onHover = (evt, hoveredItems) => {
-    if (pointHover && !(hoveredItems == null ? void 0 : hoveredItems.length)) {
-      setPointHover(false);
-      if (interactions.onUnhover) {
-        interactions.onUnhover(evt);
-      }
-    }
-    if (!pointHover && (hoveredItems == null ? void 0 : hoveredItems.length)) {
-      setPointHover(true);
-      if (interactions.onHover) {
-        const { index: index2, datasetIndex } = hoveredItems[0];
-        const generatedDataset = generatedDatasets;
-        interactions.onHover(evt, datasetIndex, index2, generatedDataset);
-      }
-    }
-  };
+  const { chartStyling, graph } = options;
+  const { generatedDatasets } = useBarChartConfig({ chart: chart2, chartRef });
+  const barChartOptions = useBarChartOptions({ chart: chart2, chartRef });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -39504,39 +39460,10 @@ const BarChart = (props) => {
         {
           ref: chartRef,
           data: {
-            labels: ((_c2 = (_b2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _b2.labels) == null ? void 0 : _c2.length) ? chart2.data.labels : [""],
+            labels: ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.labels) == null ? void 0 : _b2.length) ? chart2.data.labels : [""],
             datasets: generatedDatasets
           },
-          options: {
-            onClick,
-            onHover,
-            indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
-            maintainAspectRatio: chartStyling.maintainAspectRatio,
-            animation: chartStyling.performanceMode ? false : {
-              duration: ANIMATION_DURATION.FAST
-            },
-            hover: {
-              mode: ChartHoverMode.Nearest,
-              intersect: true
-            },
-            scales: getBarChartScales(chart2),
-            plugins: {
-              title: getTitle(options),
-              datalabels: getBarChartDataLabels(options),
-              annotation: getAnnotation(options, {
-                showAnnotationLineIndex: visibleAnnotationsIndices
-              }),
-              tooltip: getBarChartToolTips(options),
-              legend: getLegend(options, legendClick),
-              [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend.customLegendPlugin && {
-                containerID: options.legend.customLegend.customLegendContainerID
-              },
-              chartAreaBorder: {
-                borderColor: BORDER_COLOR
-              },
-              dragData: (dragData == null ? void 0 : dragData.enableDragData) && getDraggableData(options)
-            }
-          },
+          options: barChartOptions,
           plugins: getPlugins(graph, options.legend)
         }
       )
@@ -39555,7 +39482,7 @@ export {
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_fa3yo_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n._buttons_fa3yo_7 {\n  display: flex;\n  margin-left: auto;\n  gap: 4px;\n}\n._legend_wpro0_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n  opacity: 0;\n}\n._legendItems_wpro0_11 {\n  background-color: var(--color-background-raised);\n  border: 1px solid var(--color-border);\n  padding: 4px 8px;\n  border-radius: 2px;\n  overflow-y: auto;\n  max-height: 100%;\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  display: none;\n}\n._legendToggle_wpro0_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  position: static;\n  transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: none;\n}\n._legendItem_wpro0_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_wpro0_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n  text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n  position: absolute;\n}\n._dropzone_wpro0_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n  display: block;\n}\n._resizeContainer_wpro0_176 {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_1t41j_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1t41j_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1t41j_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1t41j_1._fixedHeight_1t41j_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1t41j_1._stretchHeight_1t41j_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1t41j_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1t41j_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1t41j_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1t41j_32 ._zoomReset_1t41j_40 {\n  margin-left: 10px;\n}\n._zoomForm_1t41j_32 ._help_1t41j_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1t41j_47 {\n  width: auto;\n  height: auto;\n}"));
+      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_gbo9q_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--padding-xs);\n}\n._buttons_gbo9q_7 {\n  display: flex;\n  align-items: flex-start;\n  margin-left: auto;\n  gap: var(--padding-xxs);\n}\n._legend_wpro0_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n  opacity: 0;\n}\n._legendItems_wpro0_11 {\n  background-color: var(--color-background-raised);\n  border: 1px solid var(--color-border);\n  padding: 4px 8px;\n  border-radius: 2px;\n  overflow-y: auto;\n  max-height: 100%;\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  display: none;\n}\n._legendToggle_wpro0_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  position: static;\n  transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: none;\n}\n._legendItem_wpro0_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_wpro0_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n  text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n  position: absolute;\n}\n._dropzone_wpro0_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n  display: block;\n}\n._resizeContainer_wpro0_176 {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_1t41j_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1t41j_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1t41j_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1t41j_1._fixedHeight_1t41j_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1t41j_1._stretchHeight_1t41j_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1t41j_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1t41j_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1t41j_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1t41j_32 ._zoomReset_1t41j_40 {\n  margin-left: 10px;\n}\n._zoomForm_1t41j_32 ._help_1t41j_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1t41j_47 {\n  width: auto;\n  height: auto;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {