@oliasoft-open-source/charts-library 4.2.1 → 4.3.0-beta-2

package/dist/index.js

@@ -4,14 +4,14 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
-import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, map as map$3, find, get as get$1, values } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, values } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -4914,130 +4914,6 @@ let PieController$1 = (_e = class extends DoughnutController$1 {
   circumference: 360,
   radius: "100%"
 }), _e);
-let ScatterController$1 = (_f = class extends DatasetController$1 {
-  getLabelAndValue(index2) {
-    const meta = this._cachedMeta;
-    const labels = this.chart.data.labels || [];
-    const { xScale, yScale } = meta;
-    const parsed = this.getParsed(index2);
-    const x2 = xScale.getLabelForValue(parsed.x);
-    const y2 = yScale.getLabelForValue(parsed.y);
-    return {
-      label: labels[index2] || "",
-      value: "(" + x2 + ", " + y2 + ")"
-    };
-  }
-  update(mode) {
-    const meta = this._cachedMeta;
-    const { data: points = [] } = meta;
-    const animationsDisabled = this.chart._animationsDisabled;
-    let { start, count } = _getStartAndCountOfVisiblePoints$1(meta, points, animationsDisabled);
-    this._drawStart = start;
-    this._drawCount = count;
-    if (_scaleRangesChanged$1(meta)) {
-      start = 0;
-      count = points.length;
-    }
-    if (this.options.showLine) {
-      if (!this.datasetElementType) {
-        this.addElements();
-      }
-      const { dataset: line, _dataset } = meta;
-      line._chart = this.chart;
-      line._datasetIndex = this.index;
-      line._decimated = !!_dataset._decimated;
-      line.points = points;
-      const options = this.resolveDatasetElementOptions(mode);
-      options.segment = this.options.segment;
-      this.updateElement(line, void 0, {
-        animated: !animationsDisabled,
-        options
-      }, mode);
-    } else if (this.datasetElementType) {
-      delete meta.dataset;
-      this.datasetElementType = false;
-    }
-    this.updateElements(points, start, count, mode);
-  }
-  addElements() {
-    const { showLine } = this.options;
-    if (!this.datasetElementType && showLine) {
-      this.datasetElementType = this.chart.registry.getElement("line");
-    }
-    super.addElements();
-  }
-  updateElements(points, start, count, mode) {
-    const reset = mode === "reset";
-    const { iScale, vScale, _stacked, _dataset } = this._cachedMeta;
-    const firstOpts = this.resolveDataElementOptions(start, mode);
-    const sharedOptions = this.getSharedOptions(firstOpts);
-    const includeOptions = this.includeOptions(mode, sharedOptions);
-    const iAxis = iScale.axis;
-    const vAxis = vScale.axis;
-    const { spanGaps, segment } = this.options;
-    const maxGapLength = isNumber$1(spanGaps) ? spanGaps : Number.POSITIVE_INFINITY;
-    const directUpdate = this.chart._animationsDisabled || reset || mode === "none";
-    let prevParsed = start > 0 && this.getParsed(start - 1);
-    for (let i2 = start; i2 < start + count; ++i2) {
-      const point = points[i2];
-      const parsed = this.getParsed(i2);
-      const properties = directUpdate ? point : {};
-      const nullData = isNullOrUndef$1(parsed[vAxis]);
-      const iPixel = properties[iAxis] = iScale.getPixelForValue(parsed[iAxis], i2);
-      const vPixel = properties[vAxis] = reset || nullData ? vScale.getBasePixel() : vScale.getPixelForValue(_stacked ? this.applyStack(vScale, parsed, _stacked) : parsed[vAxis], i2);
-      properties.skip = isNaN(iPixel) || isNaN(vPixel) || nullData;
-      properties.stop = i2 > 0 && Math.abs(parsed[iAxis] - prevParsed[iAxis]) > maxGapLength;
-      if (segment) {
-        properties.parsed = parsed;
-        properties.raw = _dataset.data[i2];
-      }
-      if (includeOptions) {
-        properties.options = sharedOptions || this.resolveDataElementOptions(i2, point.active ? "active" : mode);
-      }
-      if (!directUpdate) {
-        this.updateElement(point, i2, properties, mode);
-      }
-      prevParsed = parsed;
-    }
-    this.updateSharedOptions(sharedOptions, mode, firstOpts);
-  }
-  getMaxOverflow() {
-    const meta = this._cachedMeta;
-    const data = meta.data || [];
-    if (!this.options.showLine) {
-      let max = 0;
-      for (let i2 = data.length - 1; i2 >= 0; --i2) {
-        max = Math.max(max, data[i2].size(this.resolveDataElementOptions(i2)) / 2);
-      }
-      return max > 0 && max;
-    }
-    const dataset = meta.dataset;
-    const border = dataset.options && dataset.options.borderWidth || 0;
-    if (!data.length) {
-      return border;
-    }
-    const firstPoint = data[0].size(this.resolveDataElementOptions(0));
-    const lastPoint = data[data.length - 1].size(this.resolveDataElementOptions(data.length - 1));
-    return Math.max(border, firstPoint, lastPoint) / 2;
-  }
-}, __publicField(_f, "id", "scatter"), __publicField(_f, "defaults", {
-  datasetElementType: false,
-  dataElementType: "point",
-  showLine: false,
-  fill: false
-}), __publicField(_f, "overrides", {
-  interaction: {
-    mode: "point"
-  },
-  scales: {
-    x: {
-      type: "linear"
-    },
-    y: {
-      type: "linear"
-    }
-  }
-}), _f);
 function abstract$1() {
   throw new Error("This method is not implemented: Check that a complete date adapter is provided.");
 }
@@ -5927,7 +5803,7 @@ function _detectPlatform$1(canvas2) {
   }
   return DomPlatform$1;
 }
-let Element$2 = (_g = class {
+let Element$2 = (_f = class {
   constructor() {
     __publicField(this, "x");
     __publicField(this, "y");
@@ -5959,7 +5835,7 @@ let Element$2 = (_g = class {
     });
     return ret;
   }
-}, __publicField(_g, "defaults", {}), __publicField(_g, "defaultRoutes"), _g);
+}, __publicField(_f, "defaults", {}), __publicField(_f, "defaultRoutes"), _f);
 function autoSkip$1(scale, ticks) {
   const tickOpts = scale.options.ticks;
   const determinedMaxTicks = determineMaxTicks$1(scale);
@@ -8046,7 +7922,7 @@ function getDatasetArea(meta, chartArea) {
   }
   return chartArea;
 }
-let Chart$2 = (_h = class {
+let Chart$2 = (_g = class {
   static register(...items) {
     registry$1.add(...items);
     invalidatePlugins$1();
@@ -8866,7 +8742,7 @@ let Chart$2 = (_h = class {
     const hoverOptions = this.options.hover;
     return this.getElementsAtEventForMode(e2, hoverOptions.mode, hoverOptions, useFinalPosition);
   }
-}, __publicField(_h, "defaults", defaults$2), __publicField(_h, "instances", instances$1), __publicField(_h, "overrides", overrides$1), __publicField(_h, "registry", registry$1), __publicField(_h, "version", version$3), __publicField(_h, "getChart", getChart$1), _h);
+}, __publicField(_g, "defaults", defaults$2), __publicField(_g, "instances", instances$1), __publicField(_g, "overrides", overrides$1), __publicField(_g, "registry", registry$1), __publicField(_g, "version", version$3), __publicField(_g, "getChart", getChart$1), _g);
 function invalidatePlugins$1() {
   return each$1(Chart$2.instances, (chart2) => chart2._plugins.invalidate());
 }
@@ -9028,7 +8904,7 @@ function drawBorder$1(ctx, element, offset, spacing, circular) {
     ctx.stroke();
   }
 }
-let ArcElement$1 = (_i = class extends Element$2 {
+let ArcElement$1 = (_h = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "circumference");
@@ -9113,7 +8989,7 @@ let ArcElement$1 = (_i = class extends Element$2 {
     drawBorder$1(ctx, this, radiusOffset, spacing, circular);
     ctx.restore();
   }
-}, __publicField(_i, "id", "arc"), __publicField(_i, "defaults", {
+}, __publicField(_h, "id", "arc"), __publicField(_h, "defaults", {
   borderAlign: "center",
   borderColor: "#fff",
   borderDash: [],
@@ -9125,12 +9001,12 @@ let ArcElement$1 = (_i = class extends Element$2 {
   spacing: 0,
   angle: void 0,
   circular: true
-}), __publicField(_i, "defaultRoutes", {
+}), __publicField(_h, "defaultRoutes", {
   backgroundColor: "backgroundColor"
-}), __publicField(_i, "descriptors", {
+}), __publicField(_h, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash"
-}), _i);
+}), _h);
 function setStyle$1(ctx, options, style = options) {
   ctx.lineCap = valueOrDefault$1(style.borderCapStyle, options.borderCapStyle);
   ctx.setLineDash(valueOrDefault$1(style.borderDash, options.borderDash));
@@ -9283,7 +9159,7 @@ function draw$3(ctx, line, start, count) {
     strokePathDirect$1(ctx, line, start, count);
   }
 }
-let LineElement$1 = (_j = class extends Element$2 {
+let LineElement$1 = (_i = class extends Element$2 {
   constructor(cfg) {
     super();
     this.animated = true;
@@ -9393,7 +9269,7 @@ let LineElement$1 = (_j = class extends Element$2 {
       this._path = void 0;
     }
   }
-}, __publicField(_j, "id", "line"), __publicField(_j, "defaults", {
+}, __publicField(_i, "id", "line"), __publicField(_i, "defaults", {
   borderCapStyle: "butt",
   borderDash: [],
   borderDashOffset: 0,
@@ -9405,13 +9281,13 @@ let LineElement$1 = (_j = class extends Element$2 {
   spanGaps: false,
   stepped: false,
   tension: 0
-}), __publicField(_j, "defaultRoutes", {
+}), __publicField(_i, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), __publicField(_j, "descriptors", {
+}), __publicField(_i, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash" && name !== "fill"
-}), _j);
+}), _i);
 function inRange$1$1(el, pos, axis, useFinalPosition) {
   const options = el.options;
   const { [axis]: value } = el.getProps([
@@ -9419,7 +9295,7 @@ function inRange$1$1(el, pos, axis, useFinalPosition) {
   ], useFinalPosition);
   return Math.abs(pos - value) < options.radius + options.hitRadius;
 }
-let PointElement$1 = (_k = class extends Element$2 {
+let PointElement$1 = (_j = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "parsed");
@@ -9478,10 +9354,10 @@ let PointElement$1 = (_k = class extends Element$2 {
     const options = this.options || {};
     return options.radius + options.hitRadius;
   }
-}, __publicField(_k, "id", "point"), /**
+}, __publicField(_j, "id", "point"), /**
 * @type {any}
 */
-__publicField(_k, "defaults", {
+__publicField(_j, "defaults", {
   borderWidth: 1,
   hitRadius: 1,
   hoverBorderWidth: 1,
@@ -9492,10 +9368,10 @@ __publicField(_k, "defaults", {
 }), /**
 * @type {any}
 */
-__publicField(_k, "defaultRoutes", {
+__publicField(_j, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _k);
+}), _j);
 function getBarBounds$1(bar, useFinalPosition) {
   const { x: x2, y: y2, base, width, height } = bar.getProps([
     "x",
@@ -9609,7 +9485,7 @@ function inflateRect$1(rect, amount, refRect = {}) {
     radius: rect.radius
   };
 }
-let BarElement$1 = (_l = class extends Element$2 {
+let BarElement$1 = (_k = class extends Element$2 {
   constructor(cfg) {
     super();
     this.options = void 0;
@@ -9665,16 +9541,16 @@ let BarElement$1 = (_l = class extends Element$2 {
   getRange(axis) {
     return axis === "x" ? this.width / 2 : this.height / 2;
   }
-}, __publicField(_l, "id", "bar"), __publicField(_l, "defaults", {
+}, __publicField(_k, "id", "bar"), __publicField(_k, "defaults", {
   borderSkipped: "start",
   borderWidth: 0,
   borderRadius: 0,
   inflateAmount: "auto",
   pointStyle: void 0
-}), __publicField(_l, "defaultRoutes", {
+}), __publicField(_k, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _l);
+}), _k);
 function _segments(line, target, property) {
   const segments = line.segments;
   const points = line.points;
@@ -11243,7 +11119,7 @@ function invokeCallbackWithFallback(callbacks, name, ctx, arg) {
   }
   return result;
 }
-let Tooltip$1 = (_m = class extends Element$2 {
+let Tooltip$1 = (_l = class extends Element$2 {
   constructor(config2) {
     super();
     this.opacity = 0;
@@ -11782,7 +11658,7 @@ let Tooltip$1 = (_m = class extends Element$2 {
     const position = positioners$2[options.position].call(this, active, e2);
     return position !== false && (caretX !== position.x || caretY !== position.y);
   }
-}, __publicField(_m, "positioners", positioners$2), _m);
+}, __publicField(_l, "positioners", positioners$2), _l);
 var plugin_tooltip = {
   id: "tooltip",
   _element: Tooltip$1,
@@ -11937,7 +11813,7 @@ function _getLabelForValue(value) {
   }
   return value;
 }
-let CategoryScale$1 = (_n = class extends Scale$1 {
+let CategoryScale$1 = (_m = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this._startValue = void 0;
@@ -12023,11 +11899,11 @@ let CategoryScale$1 = (_n = class extends Scale$1 {
   getBasePixel() {
     return this.bottom;
   }
-}, __publicField(_n, "id", "category"), __publicField(_n, "defaults", {
+}, __publicField(_m, "id", "category"), __publicField(_m, "defaults", {
   ticks: {
     callback: _getLabelForValue
   }
-}), _n);
+}), _m);
 function generateTicks$1$1(generationOptions, dataRange) {
   const ticks = [];
   const MIN_SPACING = 1e-14;
@@ -12250,7 +12126,7 @@ let LinearScaleBase$1 = class LinearScaleBase extends Scale$1 {
     return formatNumber$1(value, this.chart.options.locale, this.options.ticks.format);
   }
 };
-let LinearScale$1 = (_o = class extends LinearScaleBase$1 {
+let LinearScale$1 = (_n = class extends LinearScaleBase$1 {
   determineDataLimits() {
     const { min, max } = this.getMinMax(true);
     this.min = isNumberFinite$1(min) ? min : 0;
@@ -12271,11 +12147,11 @@ let LinearScale$1 = (_o = class extends LinearScaleBase$1 {
   getValueForPixel(pixel) {
     return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
   }
-}, __publicField(_o, "id", "linear"), __publicField(_o, "defaults", {
+}, __publicField(_n, "id", "linear"), __publicField(_n, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.numeric
   }
-}), _o);
+}), _n);
 const log10Floor = (v2) => Math.floor(log10$1(v2));
 const changeExponent = (v2, m2) => Math.pow(10, log10Floor(v2) + m2);
 function isMajor$1(tickVal) {
@@ -12337,7 +12213,7 @@ function generateTicks$2(generationOptions, { min, max }) {
   });
   return ticks;
 }
-let LogarithmicScale$1 = (_p = class extends Scale$1 {
+let LogarithmicScale$1 = (_o = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this.start = void 0;
@@ -12434,14 +12310,14 @@ let LogarithmicScale$1 = (_p = class extends Scale$1 {
     const decimal = this.getDecimalForPixel(pixel);
     return Math.pow(10, this._startValue + decimal * this._valueRange);
   }
-}, __publicField(_p, "id", "logarithmic"), __publicField(_p, "defaults", {
+}, __publicField(_o, "id", "logarithmic"), __publicField(_o, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.logarithmic,
     major: {
       enabled: true
     }
   }
-}), _p);
+}), _o);
 const INTERVALS$1 = {
   millisecond: {
     common: true,
@@ -12577,7 +12453,7 @@ function ticksFromTimestamps$1(scale, values2, majorUnit) {
   }
   return ilen === 0 || !majorUnit ? ticks : setMajorTicks$1(scale, ticks, map2, majorUnit);
 }
-let TimeScale$1 = (_q = class extends Scale$1 {
+let TimeScale$1 = (_p = class extends Scale$1 {
   constructor(props) {
     super(props);
     this._cache = {
@@ -12843,7 +12719,7 @@ let TimeScale$1 = (_q = class extends Scale$1 {
   normalize(values2) {
     return _arrayUnique$1(values2.sort(sorter$1));
   }
-}, __publicField(_q, "id", "time"), __publicField(_q, "defaults", {
+}, __publicField(_p, "id", "time"), __publicField(_p, "defaults", {
   bounds: "data",
   adapters: {},
   time: {
@@ -12861,7 +12737,7 @@ let TimeScale$1 = (_q = class extends Scale$1 {
       enabled: false
     }
   }
-}), _q);
+}), _p);
 function interpolate$2(table2, val, reverse) {
   let lo = 0;
   let hi = table2.length - 1;
@@ -12882,7 +12758,7 @@ function interpolate$2(table2, val, reverse) {
   const span = nextSource - prevSource;
   return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
 }
-let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
+let TimeSeriesScale$1 = (_q = class extends TimeScale$1 {
   constructor(props) {
     super(props);
     this._table = [];
@@ -12967,7 +12843,7 @@ let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
     const decimal = this.getDecimalForPixel(pixel) / offsets.factor - offsets.end;
     return interpolate$2(this._table, decimal * this._tableRange + this._minPos, true);
   }
-}, __publicField(_r, "id", "timeseries"), __publicField(_r, "defaults", TimeScale$1.defaults), _r);
+}, __publicField(_q, "id", "timeseries"), __publicField(_q, "defaults", TimeScale$1.defaults), _q);
 const defaultDatasetIdKey = "label";
 function reforwardRef(ref, value) {
   if (typeof ref === "function") {
@@ -13104,7 +12980,6 @@ function createTypedChart(type, registerables) {
 const Line = /* @__PURE__ */ createTypedChart("line", LineController$1);
 const Bar = /* @__PURE__ */ createTypedChart("bar", BarController$1);
 const Pie = /* @__PURE__ */ createTypedChart("pie", PieController$1);
-const Scatter = /* @__PURE__ */ createTypedChart("scatter", ScatterController$1);
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -22173,26 +22048,26 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
-const chart$3 = "_chart_e3qdd_1";
+const chart$2 = "_chart_e3qdd_1";
 const canvas$1 = "_canvas_e3qdd_11";
-const fixedHeight$3 = "_fixedHeight_e3qdd_20";
-const stretchHeight$3 = "_stretchHeight_e3qdd_26";
+const fixedHeight$2 = "_fixedHeight_e3qdd_20";
+const stretchHeight$2 = "_stretchHeight_e3qdd_26";
 const squareAspectRatio = "_squareAspectRatio_e3qdd_32";
-const zoomForm$3 = "_zoomForm_e3qdd_43";
-const zoomReset$3 = "_zoomReset_e3qdd_51";
-const help$3 = "_help_e3qdd_54";
-const autoWeight$3 = "_autoWeight_e3qdd_58";
+const zoomForm$2 = "_zoomForm_e3qdd_43";
+const zoomReset$2 = "_zoomReset_e3qdd_51";
+const help$2 = "_help_e3qdd_54";
+const autoWeight$2 = "_autoWeight_e3qdd_58";
 const table = "_table_e3qdd_62";
-const styles$5 = {
-  chart: chart$3,
+const styles$4 = {
+  chart: chart$2,
   canvas: canvas$1,
-  fixedHeight: fixedHeight$3,
-  stretchHeight: stretchHeight$3,
+  fixedHeight: fixedHeight$2,
+  stretchHeight: stretchHeight$2,
   squareAspectRatio,
-  zoomForm: zoomForm$3,
-  zoomReset: zoomReset$3,
-  help: help$3,
-  autoWeight: autoWeight$3,
+  zoomForm: zoomForm$2,
+  zoomReset: zoomReset$2,
+  help: help$2,
+  autoWeight: autoWeight$2,
   table
 };
 const TOGGLE_ZOOM = "TOGGLE_ZOOM";
@@ -22205,6 +22080,7 @@ const SAVE_INITIAL_AXES_RANGES = "SAVE_INITIAL_AXES_RANGES";
 const RESET_AXES_RANGES = "RESET_AXES_RANGES";
 const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
 const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
+const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
 const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
 const reducer$1 = (state, action) => {
   return produce(state, (draft) => {
@@ -22273,6 +22149,16 @@ const reducer$1 = (state, action) => {
         }
         break;
       }
+      case TOGGLE_DRAG_ANNOTATION: {
+        draft.enableDragAnnotation = !draft.enableDragAnnotation;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
       case DISABLE_DRAG_OPTIONS: {
         if (draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
           draft.enableDragPoints = false;
@@ -22316,10 +22202,10 @@ var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
   ScaleType2["Logarithmic"] = "logarithmic";
   return ScaleType2;
 })(ScaleType || {});
-var ChartDirection$1 = /* @__PURE__ */ ((ChartDirection2) => {
+var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
   ChartDirection2["Vertical"] = "vertical";
   return ChartDirection2;
-})(ChartDirection$1 || {});
+})(ChartDirection || {});
 var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
   TooltipLabel2["Y"] = "yLabel";
   TooltipLabel2["X"] = "xLabel";
@@ -22333,13 +22219,13 @@ var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
   AlignOptions2["Left"] = "left";
   return AlignOptions2;
 })(AlignOptions || {});
-var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
   AnnotationType2["Box"] = "box";
   AnnotationType2["Ellipse"] = "ellipse";
   AnnotationType2["Line"] = "line";
   AnnotationType2["Text"] = "text";
   return AnnotationType2;
-})(AnnotationType || {});
+})(AnnotationType$1 || {});
 var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
   PointStyle2["Circle"] = "circle";
   return PointStyle2;
@@ -22538,7 +22424,7 @@ const getTitle = (options) => {
   } : {};
 };
 const isVertical = (direction) => {
-  return direction === ChartDirection$1.Vertical;
+  return direction === ChartDirection.Vertical;
 };
 const getAxisPosition = (axisType, i2) => {
   const [positionA, positionB] = axisType === AxisType.Y ? [Position.Left, Position.Right] : [Position.Top, Position.Bottom];
@@ -22692,7 +22578,8 @@ const initialState = ({ options, persistenceId }) => {
     axes,
     chartOptions: { enableZoom, enablePan, showPoints, showLine },
     legend: { display },
-    dragData
+    dragData,
+    annotations: { enableDragAnnotation }
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
     var _a2, _b2, _c2, _d2, _e2;
@@ -22739,7 +22626,8 @@ const initialState = ({ options, persistenceId }) => {
     pointsEnabled,
     lineEnabled,
     legendEnabled,
-    enableDragPoints
+    enableDragPoints,
+    enableDragAnnotation: enableDragAnnotationStorage
   } = getChartStateFromStorage(persistenceId) || {};
   return {
     zoomEnabled: zoomEnabled ?? enableZoom,
@@ -22750,6 +22638,7 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    enableDragAnnotation: enableDragAnnotation && enableDragAnnotationStorage,
     initialAxesRanges: []
   };
 };
@@ -22909,7 +22798,10 @@ const DragOptions = ({
   panEnabled,
   zoomEnabled,
   enableDragPoints,
+  enableDragAnnotation,
   isDragDataAllowed,
+  isDragAnnotationAllowed,
+  onToggleDragAnnotation,
   onToggleDragPoints,
   onDisableDragOptions,
   translations: {
@@ -22918,7 +22810,8 @@ const DragOptions = ({
     dragToPan,
     orDoubleClickToCanvas,
     dragToMovePoints,
-    dragDisabled
+    dragDisabled,
+    dragToMoveAnnotation
   }
 }) => {
   const options = useMemo(
@@ -22952,10 +22845,19 @@ const DragOptions = ({
           onClick: onToggleDragPoints
         }
       ] : [],
+      ...isDragAnnotationAllowed ? [
+        {
+          label: dragToMoveAnnotation,
+          icon: /* @__PURE__ */ jsx(TbHandStop, {}),
+          selected: enableDragAnnotation,
+          type: "Option",
+          onClick: onToggleDragAnnotation
+        }
+      ] : [],
       {
         label: dragDisabled,
         icon: /* @__PURE__ */ jsx(TbBan, {}),
-        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
+        selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
         onClick: onDisableDragOptions
       }
     ],
@@ -22993,7 +22895,7 @@ const DragOptions = ({
 };
 const controls = "_controls_gbo9q_1";
 const buttons = "_buttons_gbo9q_7";
-const styles$4 = {
+const styles$3 = {
   controls,
   buttons
 };
@@ -23012,6 +22914,7 @@ const useToggleHandlers = (dispatch) => {
     onToggleTable: createToggleHandler(TOGGLE_TABLE),
     onToggleZoom: createToggleHandler(TOGGLE_ZOOM),
     onToggleDragPoints: createToggleHandler(TOGGLE_DRAG_POINTS),
+    onToggleDragAnnotation: createToggleHandler(TOGGLE_DRAG_ANNOTATION),
     onDisableDragOptions: createToggleHandler(DISABLE_DRAG_OPTIONS)
   };
   return toggleHandlers;
@@ -24432,9 +24335,10 @@ const Controls = ({
     panEnabled,
     pointsEnabled,
     showTable,
-    zoomEnabled
+    zoomEnabled,
+    enableDragAnnotation
   } = state;
-  const { dragData, depthType } = options;
+  const { dragData, depthType, annotations } = options;
   const {
     onToggleLine,
     onTogglePan,
@@ -24442,6 +24346,7 @@ const Controls = ({
     onToggleTable,
     onToggleZoom,
     onToggleDragPoints,
+    onToggleDragAnnotation,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
   const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
@@ -24452,10 +24357,10 @@ const Controls = ({
     generatedDatasets
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$4.controls, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
       headerComponent,
-      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$4.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -24505,7 +24410,10 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
+              enableDragAnnotation,
               isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
+              isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
+              onToggleDragAnnotation,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24557,11 +24465,11 @@ const defaultAxis = (position) => ({
     }
   }
 });
-const defaultAxes$2 = (axes) => ({
+const defaultAxes$1 = (axes) => ({
   x: (axes == null ? void 0 : axes.x) || [defaultAxis("bottom")],
   y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
 });
-const defaultAdditionalAxesOptions$2 = (options) => ({
+const defaultAdditionalAxesOptions$1 = (options) => ({
   chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
   reverse: (options == null ? void 0 : options.reverse) || false,
   beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? false,
@@ -24571,7 +24479,7 @@ const defaultAdditionalAxesOptions$2 = (options) => ({
   range: options == null ? void 0 : options.range,
   autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
 });
-const defaultChartStyling$3 = (options) => ({
+const defaultChartStyling$2 = (options) => ({
   width: options == null ? void 0 : options.width,
   height: options == null ? void 0 : options.height,
   maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
@@ -24585,22 +24493,22 @@ const defaultChartStyling$3 = (options) => ({
     right: 0
   }
 });
-const defaultTooltip$3 = (tooltip) => ({
+const defaultTooltip$2 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) ?? false,
   hideSimulationName: (tooltip == null ? void 0 : tooltip.hideSimulationName) ?? false,
   scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
 });
-const defaultGraph$3 = (graph) => ({
+const defaultGraph$2 = (graph) => ({
   lineTension: (graph == null ? void 0 : graph.lineTension) ?? 0.01,
   spanGaps: (graph == null ? void 0 : graph.spanGaps) ?? false,
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
 });
-const defaultAnnotationsData$2 = (annotationsData) => {
+const defaultAnnotationsData$1 = (annotationsData) => {
   return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
 };
-const defaultAnnotations$2 = (annotations) => {
+const defaultAnnotations$1 = (annotations) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
   return {
     labelAnnotation: {
@@ -24615,10 +24523,11 @@ const defaultAnnotations$2 = (annotations) => {
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
-    annotationsData: defaultAnnotationsData$2(annotations == null ? void 0 : annotations.annotationsData)
+    enableDragAnnotation: (annotations == null ? void 0 : annotations.enableDragAnnotation) ?? false,
+    annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
   };
 };
-const defaultLegend$3 = (legend2) => ({
+const defaultLegend$2 = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
   position: (legend2 == null ? void 0 : legend2.position) ?? Position.BottomLeft,
   align: (legend2 == null ? void 0 : legend2.align) ?? AlignOptions.Center,
@@ -24628,14 +24537,14 @@ const defaultLegend$3 = (legend2) => ({
   },
   usePointStyle: (legend2 == null ? void 0 : legend2.usePointStyle) ?? true
 });
-const defaultChartOptions$3 = (options) => ({
+const defaultChartOptions$2 = (options) => ({
   showPoints: (options == null ? void 0 : options.showPoints) ?? true,
   enableZoom: (options == null ? void 0 : options.enableZoom) ?? true,
   enablePan: (options == null ? void 0 : options.enablePan) ?? false,
   showLine: (options == null ? void 0 : options.showLine) ?? true,
   closeOnOutsideClick: (options == null ? void 0 : options.closeOnOutsideClick) ?? false
 });
-const defaultInteractions$3 = (interactions) => ({
+const defaultInteractions$2 = (interactions) => ({
   onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
   onHover: interactions == null ? void 0 : interactions.onHover,
   onUnhover: interactions == null ? void 0 : interactions.onUnhover,
@@ -24651,7 +24560,7 @@ const defaultDragData$1 = (dragData) => ({
   onDrag: dragData == null ? void 0 : dragData.onDrag,
   onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
 });
-const getDefaultProps$3 = (props) => {
+const getDefaultProps$2 = (props) => {
   const chart2 = (props == null ? void 0 : props.chart) || {};
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
@@ -24662,17 +24571,17 @@ const getDefaultProps$3 = (props) => {
     options: {
       title: (options == null ? void 0 : options.title) ?? "",
       scales: (options == null ? void 0 : options.scales) ?? {},
-      axes: defaultAxes$2(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions$2(
+      axes: defaultAxes$1(options == null ? void 0 : options.axes),
+      additionalAxesOptions: defaultAdditionalAxesOptions$1(
         options == null ? void 0 : options.additionalAxesOptions
       ),
-      chartStyling: defaultChartStyling$3(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$3(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$3(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations$2(options == null ? void 0 : options.annotations),
-      legend: defaultLegend$3(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$3(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$3(options == null ? void 0 : options.interactions),
+      chartStyling: defaultChartStyling$2(options == null ? void 0 : options.chartStyling),
+      tooltip: defaultTooltip$2(options == null ? void 0 : options.tooltip),
+      graph: defaultGraph$2(options == null ? void 0 : options.graph),
+      annotations: defaultAnnotations$1(options == null ? void 0 : options.annotations),
+      legend: defaultLegend$2(options == null ? void 0 : options.legend),
+      chartOptions: defaultChartOptions$2(options == null ? void 0 : options.chartOptions),
+      interactions: defaultInteractions$2(options == null ? void 0 : options.interactions),
       dragData: defaultDragData$1(options == null ? void 0 : options.dragData),
       depthType: (options == null ? void 0 : options.depthType) ?? {}
     }
@@ -25115,7 +25024,7 @@ const getUnitsFromLabel = (label) => {
   const units = matches && (matches == null ? void 0 : matches.length) > 0 ? matches == null ? void 0 : matches[0] : "";
   return units;
 };
-const customFormatNumber$1 = (labelNumber, scientificNotation) => {
+const customFormatNumber = (labelNumber, scientificNotation) => {
   let roundOptions = {};
   if (!scientificNotation) {
     roundOptions = { scientific: false };
@@ -25151,21 +25060,21 @@ const getLineChartToolTips = (options) => {
       };
     }
   };
-  const titleCallback2 = (tooltipItem) => {
+  const titleCallback = (tooltipItem) => {
     const labels = getTooltipLabels(tooltipItem[0].dataset);
     const { titleLabel, titleAxisLabel } = labels ?? {};
     const formattedValue = titleLabel === TooltipLabel.Y ? tooltipItem[0].parsed.y : tooltipItem[0].parsed.x;
-    const roundedValue = customFormatNumber$1(formattedValue, scientificNotation);
+    const roundedValue = customFormatNumber(formattedValue, scientificNotation);
     return `${roundedValue} ${titleAxisLabel}`;
   };
-  const labelCallback2 = (tooltipItem) => {
+  const labelCallback = (tooltipItem) => {
     const { showLabelsInTooltips } = options.tooltip;
     let label = tooltipItem.dataset.label || "";
     const labels = getTooltipLabels(tooltipItem.dataset);
     const { valueLabel = "", valueAxisLabel = "" } = labels ?? {};
     const getTooltipItemValue = () => {
       const labelNumber = valueLabel === TooltipLabel.X ? tooltipItem.parsed.x : tooltipItem.parsed.y;
-      return customFormatNumber$1(labelNumber, scientificNotation);
+      return customFormatNumber(labelNumber, scientificNotation);
     };
     const tooltipItemValue = getTooltipItemValue();
     const units = getUnitsFromLabel(valueAxisLabel);
@@ -25182,8 +25091,8 @@ const getLineChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback2,
-      label: labelCallback2,
+      title: titleCallback,
+      label: labelCallback,
       afterLabel: afterLabelCallback
     }
   };
@@ -25265,6 +25174,19 @@ const legendReducer = (state, action) => {
       return state;
   }
 };
+var MouseEvents = /* @__PURE__ */ ((MouseEvents2) => {
+  MouseEvents2["MOUSEDOWN"] = "mousedown";
+  MouseEvents2["MOUSEMOVE"] = "mousemove";
+  MouseEvents2["MOUSEUP"] = "mouseup";
+  return MouseEvents2;
+})(MouseEvents || {});
+var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+  AnnotationType2["POINT"] = "point";
+  AnnotationType2["BOX"] = "box";
+  AnnotationType2["LINE"] = "line";
+  AnnotationType2["ELLIPSE"] = "ellipse";
+  return AnnotationType2;
+})(AnnotationType || {});
 const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
@@ -25273,21 +25195,25 @@ const annotationEnter = (element, chart2) => {
     }
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
+  chart2.hoveredAnnotationId = element.options.id || null;
   if (element.options.label) {
     element.label.options.display = true;
     element.options.label.enabled = true;
   }
   chart2.draw();
+  chart2.update();
   chart2.canvas.style.cursor = CursorStyle.Pointer;
   return true;
 };
 const annotationLeave = (element, chart2) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
+  chart2.hoveredAnnotationId = null;
   if (element.options.label) {
     element.label.options.display = false;
     element.options.label.enabled = false;
   }
   chart2.draw();
+  chart2.update();
   chart2.canvas.style.cursor = CursorStyle.Initial;
   return true;
 };
@@ -25297,9 +25223,13 @@ const generateAnnotations = (annotationsData) => {
     const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
     const type = (ann == null ? void 0 : ann.type) || "line";
     const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
-    const borderColor = type === "line" ? color2 : "transparent";
-    const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
-    const borderDash = ANNOTATION_DASH;
+    const borderColor = {
+      [AnnotationType.LINE]: color2,
+      [AnnotationType.POINT]: color2,
+      [AnnotationType.BOX]: color2
+    }[type] || "transparent";
+    const borderWidth = type == "line" ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = type == "line" ? ANNOTATION_DASH : void 0;
     const label = type === "line" ? {
       backgroundColor: color2,
       content: ann == null ? void 0 : ann.label,
@@ -25315,7 +25245,7 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationEnter(element, chart2);
     };
@@ -25324,10 +25254,13 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationLeave(element, chart2);
     };
+    const onDragStart = () => (cord) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord) : void 0;
+    const onDrag = () => (cord) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord) : void 0;
+    const onDragEnd = () => (cord) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord) : void 0;
     return {
       ...ann,
       display: ann == null ? void 0 : ann.display,
@@ -25342,7 +25275,10 @@ const generateAnnotations = (annotationsData) => {
       type,
       adjustScaleRange: adjustScaleRange2,
       enter,
-      leave
+      leave,
+      onDragStart,
+      onDrag,
+      onDragEnd
     };
   });
 };
@@ -25538,6 +25474,9 @@ const useChartOptions = ({
   );
   const plugins = {
     datalabels,
+    annotationDraggerPlugin: {
+      enabled: state.enableDragAnnotation
+    },
     annotation: toAnnotationObject(annotation2),
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
@@ -25894,6 +25833,211 @@ const chartAreaTextPlugin = {
     });
   }
 };
+const getMousePositionInCoordinates = (event, canvas2, scales) => {
+  var _a2, _b2;
+  const rect = canvas2.getBoundingClientRect();
+  const x2 = event.clientX - rect.left;
+  const y2 = event.clientY - rect.top;
+  const xValue = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getValueForPixel(x2)) ?? -1;
+  const yValue = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getValueForPixel(y2)) ?? -1;
+  return { x: xValue, y: yValue };
+};
+const calculateAnnotationMetricsInValues = (annotation2) => {
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (!isNil(xMin) && !isNil(xMax) && !isNil(yMin) && !isNil(yMax) && type === AnnotationType.BOX) {
+    centerX = (xMin + xMax) / 2;
+    centerY = (yMin + yMax) / 2;
+    width = xMax - xMin;
+    height = yMax - yMin;
+  } else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType.POINT) {
+    centerX = xValue;
+    centerY = yValue;
+    width = 0;
+    height = 0;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  const { x: x2, y: y2 } = scales ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (!isNil(xMin) && !isNil(xMax) && !isNil(yMin) && !isNil(yMax) && type === AnnotationType.BOX) {
+    const xCenterValue = (xMin + xMax) / 2;
+    const yCenterValue = (yMin + yMax) / 2;
+    const xMinValue = (x2 == null ? void 0 : x2.getPixelForValue(xMin)) ?? 0;
+    const xMaxValue = (x2 == null ? void 0 : x2.getPixelForValue(xMax)) ?? 0;
+    const yMinValue = (y2 == null ? void 0 : y2.getPixelForValue(yMin)) ?? 0;
+    const yMaxValue = (y2 == null ? void 0 : y2.getPixelForValue(yMax)) ?? 0;
+    width = xMinValue - xMaxValue;
+    height = yMinValue - yMaxValue;
+    centerX = (x2 == null ? void 0 : x2.getPixelForValue(xCenterValue)) ?? -1;
+    centerY = (y2 == null ? void 0 : y2.getPixelForValue(yCenterValue)) ?? -1;
+  } else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType.POINT) {
+    width = 0;
+    height = 0;
+    centerX = (x2 == null ? void 0 : x2.getPixelForValue(xValue)) ?? -1;
+    centerY = (y2 == null ? void 0 : y2.getPixelForValue(yValue)) ?? -1;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
+  const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+  const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
+  if (!annotation2)
+    return;
+  const metrics = calculateAnnotationMetricsInValues(annotation2);
+  if (annotation2 && annotation2.enableDrag && metrics.centerY && metrics.centerX) {
+    const dragStartX = x2 - metrics.centerX;
+    const dragStartY = y2 - metrics.centerY;
+    setDraggingState(true, annotation2, dragStartX, dragStartY);
+    if (annotation2 == null ? void 0 : annotation2.onDragStart) {
+      annotation2.onDragStart({ x: x2, y: y2 });
+    }
+  }
+};
+const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
+  if (isDragging2 && activeAnnotation) {
+    const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+    const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
+    let newCenterX = x2 - dragStartX;
+    let newCenterY = y2 - dragStartY;
+    if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
+      newCenterX = x2 - dragStartX;
+      newCenterY = y2 - dragStartY;
+      activeAnnotation.xValue = newCenterX;
+      activeAnnotation.yValue = newCenterY;
+    } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
+      if ((metrics == null ? void 0 : metrics.width) && metrics.height) {
+        activeAnnotation.xMin = newCenterX - metrics.width / 2;
+        activeAnnotation.xMax = newCenterX + metrics.width / 2;
+        activeAnnotation.yMin = newCenterY - metrics.height / 2;
+        activeAnnotation.yMax = newCenterY + metrics.height / 2;
+      }
+    }
+    chart2.update();
+    if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
+      activeAnnotation.onDrag({ x: x2, y: y2 });
+    }
+    const { ctx, width, height } = chart2;
+    const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+    const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(activeAnnotation, scales);
+    if (centerX && centerY && xValue && yValue) {
+      ctx.save();
+      ctx.clearRect(0, 0, width, height);
+      chart2.draw();
+      ctx.font = DEFAULT_FONT_FAMILY;
+      ctx.fillStyle = "black";
+      let labelX = xValue - 45;
+      let labelY = yValue - 20;
+      const labelText = `X: ${round$2(centerX, 2)}, Y: ${round$2(centerY, 2)}`;
+      const labelHeight = 14;
+      if (labelY - labelHeight < 0) {
+        labelY = yValue + labelHeight + 15;
+      }
+      if (labelY > height) {
+        labelY = height - 7;
+      }
+      ctx.fillText(labelText, labelX, labelY);
+      ctx.restore();
+    }
+  }
+};
+const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDraggingState) => {
+  if (isDragging2) {
+    if (activeAnnotation) {
+      const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+      if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
+        activeAnnotation.onDragEnd({ x: centerX, y: centerY });
+      }
+      setDraggingState(false, null);
+    }
+    chart2.update();
+  }
+};
+const annotationDraggerPlugin = {
+  id: "annotationDraggerPlugin",
+  afterUpdate(chart2) {
+    var _a2, _b2, _c2, _d2;
+    const { canvas: canvas2, scales, hoveredAnnotationId } = chart2;
+    const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
+      enabled: false
+    };
+    const typedScales = { x: scales.x, y: scales.y };
+    let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
+    if (!annotations)
+      return;
+    let isDragging2 = false;
+    let dragStartX, dragStartY;
+    let activeAnnotation = null;
+    const setDraggingState = (dragging, annotation2, startX, startY) => {
+      isDragging2 = dragging;
+      activeAnnotation = annotation2;
+      if (startX !== void 0 && startY !== void 0) {
+        dragStartX = startX;
+        dragStartY = startY;
+      }
+    };
+    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled && hoveredAnnotationId) {
+      canvas2.addEventListener(MouseEvents.MOUSEDOWN, (event) => {
+        handleAnnotationMouseDown(
+          event,
+          canvas2,
+          typedScales,
+          annotations,
+          setDraggingState,
+          chart2.hoveredAnnotationId
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
+        handleAnnotationMouseMove(
+          event,
+          canvas2,
+          typedScales,
+          isDragging2,
+          activeAnnotation,
+          dragStartX,
+          dragStartY,
+          chart2
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEUP, () => {
+        handleAnnotationMouseUp(
+          isDragging2,
+          activeAnnotation,
+          chart2,
+          setDraggingState
+        );
+      });
+      canvas2.dataset.annotationDraggerInitialized = "true";
+    }
+    if (!pluginOptions.enabled) {
+      canvas2.removeEventListener(MouseEvents.MOUSEDOWN, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEMOVE, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEUP, () => {
+      });
+      canvas2.dataset.annotationDraggerInitialized = "";
+    }
+  }
+};
 var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["label"] = "Label";
   defaultTranslations2["pointsLines"] = "Points & lines";
@@ -25908,6 +26052,7 @@ var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["dragToZoom"] = "Drag to zoom";
   defaultTranslations2["dragToPan"] = "Drag to pan";
   defaultTranslations2["dragToMovePoints"] = "Drag to move points";
+  defaultTranslations2["dragToMoveAnnotation"] = "Drag to move annotation";
   defaultTranslations2["dragDisabled"] = "Drag disabled";
   defaultTranslations2["hideLegend"] = "Hide Legend";
   defaultTranslations2["showLegend"] = "Show Legend";
@@ -25996,7 +26141,7 @@ const bottom = "_bottom_wpro0_161";
 const dropzonePlaceholder = "_dropzonePlaceholder_wpro0_165";
 const isActive = "_isActive_wpro0_173";
 const resizeContainer = "_resizeContainer_wpro0_176";
-const styles$3 = {
+const styles$2 = {
   legend,
   isDragging,
   legendItems,
@@ -26026,11 +26171,6 @@ var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["SCATTER"] = "scatter";
   return ChartType2;
 })(ChartType || {});
-var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
-  ChartDirection2["VERTICAL"] = "vertical";
-  ChartDirection2["HORIZONTAL"] = "horizontal";
-  return ChartDirection2;
-})(ChartDirection || {});
 const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
 const rectSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+";
 const rectRotSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJjdXJyZW50Q29sb3IiIHRyYW5zZm9ybT0ncm90YXRlKDQ1IDEyIDEyKScgLz48L3N2Zz4=";
@@ -26041,7 +26181,7 @@ const LineItem = ({ dataset }) => {
   const { borderColor, borderDash, borderWidth } = dataset;
   const offset = borderDash.length ? (LEGEND_SYMBOL_SIZE$1 - borderDash[0]) / 2 % (borderDash[0] + borderDash[1]) * -1 : 0;
   const borderDashString = ((_a2 = dataset.borderDash) == null ? void 0 : _a2.join(" ")) || "";
-  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemLine, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemLine, children: /* @__PURE__ */ jsx(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -26073,7 +26213,7 @@ const PointItem = ({ dataset }) => {
     rectRot: rectRotSvg,
     rect: rectSvg
   };
-  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
       icon: icons[pointStyle] || circleSvg,
@@ -26085,15 +26225,15 @@ const PointItem = ({ dataset }) => {
 const BoxItem = ({ dataset }) => {
   const { backgroundColor } = dataset;
   const style = { backgroundColor };
-  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, style });
+  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, style });
 };
 const LegendItemLine = ({ dataset }) => {
   const { annotationType, showLine } = dataset;
   switch (annotationType) {
-    case AnnotationType.Box:
-    case AnnotationType.Ellipse:
+    case AnnotationType$1.Box:
+    case AnnotationType$1.Ellipse:
       return /* @__PURE__ */ jsx(BoxItem, { dataset });
-    case AnnotationType.Line:
+    case AnnotationType$1.Line:
       return /* @__PURE__ */ jsx(LineItem, { dataset });
     default:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -26108,11 +26248,11 @@ const renderLegendItemSymbol = (dataset, chartType) => {
     case ChartType.LINE:
       return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
     case ChartType.BAR:
-      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
     case ChartType.PIE:
-      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
     case ChartType.SCATTER:
-      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
     default:
       return null;
   }
@@ -26126,18 +26266,18 @@ const LegendItem = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(styles$3.legendItem, hidden && styles$3.isHidden),
+      className: cx(styles$2.legendItem, hidden && styles$2.isHidden),
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: styles$3.legendItemSymbol,
+            className: styles$2.legendItemSymbol,
             style: { width: LEGEND_SYMBOL_SIZE },
             children: renderLegendItemSymbol(dataset, chartType)
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset.label })
+        /* @__PURE__ */ jsx("span", { className: styles$2.legendItemText, children: dataset.label })
       ]
     }
   );
@@ -26204,7 +26344,7 @@ const LegendItems = ({
   datasets,
   legendClick,
   chartType
-}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items.map((item) => {
+}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
   if (datasets[item.datasetIndex].hideLegend) {
     return null;
   }
@@ -26237,13 +26377,13 @@ const LegendPanel = forwardRef(
       {
         ref,
         className: cx(
-          styles$3.legend,
-          !legendEnabled && styles$3.isHidden,
-          isDragging2 && styles$3.isDragging
+          styles$2.legend,
+          !legendEnabled && styles$2.isHidden,
+          isDragging2 && styles$2.isDragging
         ),
         style,
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles$3.legendToggle, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: styles$2.legendToggle, children: /* @__PURE__ */ jsx(
             Button,
             {
               onClick: () => setLegendEnabled(!legendEnabled),
@@ -26282,17 +26422,17 @@ const LegendDropZone = (legendDropZoneProps) => {
     {
       ref: dropRef,
       className: cx(
-        styles$3.dropzone,
-        isActive2 && styles$3.isActive,
-        position.includes("left") && styles$3.left,
-        position.includes("right") && styles$3.right,
-        position.includes("top") && styles$3.top,
-        position.includes("bottom") && styles$3.bottom
+        styles$2.dropzone,
+        isActive2 && styles$2.isActive,
+        position.includes("left") && styles$2.left,
+        position.includes("right") && styles$2.right,
+        position.includes("top") && styles$2.top,
+        position.includes("bottom") && styles$2.bottom
       ),
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles$3.dropzonePlaceholder,
+          className: styles$2.dropzonePlaceholder,
           style: { ...placeholderSize, margin: LEGEND_MARGIN }
         }
       )
@@ -26311,7 +26451,7 @@ const LegendDropZones = (legendDropZonesProps) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$3.dropzoneContainer,
+      className: styles$2.dropzoneContainer,
       style: {
         top: top2,
         left: left2,
@@ -26353,7 +26493,7 @@ const Legend2 = ({ chartRef, legendConfig }) => {
     })
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$3.resizeContainer }),
+    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$2.resizeContainer }),
     /* @__PURE__ */ jsx(
       LegendPanel,
       {
@@ -26391,7 +26531,8 @@ Chart$2.register(
   plugin$1,
   plugin,
   annotation,
-  chartAreaTextPlugin
+  chartAreaTextPlugin,
+  annotationDraggerPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;
@@ -26399,7 +26540,7 @@ const LineChart = (props) => {
   const chartRef = useRef(null);
   const { table: table2 } = props;
   const { translations, languageKey } = getConfig();
-  const chart2 = getDefaultProps$3(props);
+  const chart2 = getDefaultProps$2(props);
   const {
     data: { datasets } = { datasets: [] },
     options,
@@ -26446,7 +26587,7 @@ const LineChart = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: getClassName(chartStyling, styles$5),
+      className: getClassName(chartStyling, styles$4),
       style: {
         width: chartStyling.width || AUTO,
         height: chartStyling.height || AUTO
@@ -26469,7 +26610,7 @@ const LineChart = (props) => {
             controlsPortalId
           }
         ),
-        table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$5.table, children: table2 }) : /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$5.canvas, id: "canvas", children: [
+        table2 && state.showTable ? /* @__PURE__ */ jsx("div", { className: styles$4.table, children: table2 }) : /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$4.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Line,
             {
@@ -26497,6 +26638,7 @@ const LineChart = (props) => {
     },
     generateKey([
       state.enableDragPoints,
+      state.enableDragAnnotation,
       state.zoomEnabled,
       state.panEnabled,
       languageKey
@@ -26504,7 +26646,7 @@ const LineChart = (props) => {
   );
 };
 const LineChartWithLegend = (props) => {
-  const { options } = getDefaultProps$3(props);
+  const { options } = getDefaultProps$2(props);
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(LineChart, { ...props }) });
 };
 const initializeLineChart = ({ languageKey = "en", ...options }) => {
@@ -26518,73 +26660,73 @@ const initializeLineChart = ({ languageKey = "en", ...options }) => {
     }
   });
 };
-const chart$2 = "_chart_1jdnu_1";
-const fixedHeight$2 = "_fixedHeight_1jdnu_13";
-const stretchHeight$2 = "_stretchHeight_1jdnu_19";
-const zoomForm$2 = "_zoomForm_1jdnu_32";
-const zoomReset$2 = "_zoomReset_1jdnu_40";
-const help$2 = "_help_1jdnu_43";
-const autoWeight$2 = "_autoWeight_1jdnu_47";
-const styles$2 = {
-  chart: chart$2,
-  fixedHeight: fixedHeight$2,
-  stretchHeight: stretchHeight$2,
-  zoomForm: zoomForm$2,
-  zoomReset: zoomReset$2,
-  help: help$2,
-  autoWeight: autoWeight$2
+const chart$1 = "_chart_1jdnu_1";
+const fixedHeight$1 = "_fixedHeight_1jdnu_13";
+const stretchHeight$1 = "_stretchHeight_1jdnu_19";
+const zoomForm$1 = "_zoomForm_1jdnu_32";
+const zoomReset$1 = "_zoomReset_1jdnu_40";
+const help$1 = "_help_1jdnu_43";
+const autoWeight$1 = "_autoWeight_1jdnu_47";
+const styles$1 = {
+  chart: chart$1,
+  fixedHeight: fixedHeight$1,
+  stretchHeight: stretchHeight$1,
+  zoomForm: zoomForm$1,
+  zoomReset: zoomReset$1,
+  help: help$1,
+  autoWeight: autoWeight$1
 };
-const defaultChartStyling$2 = (styling) => ({
+const defaultChartStyling$1 = (styling) => ({
   width: styling == null ? void 0 : styling.width,
   height: styling == null ? void 0 : styling.height,
   maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
   staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
   performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
 });
-const defaultTooltip$2 = (tooltip) => ({
+const defaultTooltip$1 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
 });
-const defaultGraph$2 = (graph) => ({
+const defaultGraph$1 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
   stacked: (graph == null ? void 0 : graph.stacked) || false,
   cutout: (graph == null ? void 0 : graph.cutout) || 0
 });
-const defaultLegend$2 = (legend2) => ({
+const defaultLegend$1 = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
   useDataset: (legend2 == null ? void 0 : legend2.useDataset) || false,
   position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
   align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center
 });
-const defaultChartOptions$2 = (options) => ({
+const defaultChartOptions$1 = (options) => ({
   enableZoom: (options == null ? void 0 : options.enableZoom) || false,
   enablePan: (options == null ? void 0 : options.enablePan) || false
 });
-const defaultInteractions$2 = (interactions) => ({
+const defaultInteractions$1 = (interactions) => ({
   onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
   onHover: interactions == null ? void 0 : interactions.onHover,
   onUnhover: interactions == null ? void 0 : interactions.onUnhover
 });
-const defaultChartData$1 = (data) => {
+const defaultChartData = (data) => {
   return {
     labels: (data == null ? void 0 : data.labels) || [],
     datasets: (data == null ? void 0 : data.datasets) || []
   };
 };
-const getDefaultProps$2 = (props) => {
+const getDefaultProps$1 = (props) => {
   const chart2 = (props == null ? void 0 : props.chart) || {};
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
     testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
-    data: defaultChartData$1(chart2 == null ? void 0 : chart2.data),
+    data: defaultChartData(chart2 == null ? void 0 : chart2.data),
     options: {
       title: (options == null ? void 0 : options.title) || "",
-      chartStyling: defaultChartStyling$2(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$2(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$2(options == null ? void 0 : options.graph),
-      legend: defaultLegend$2(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$2(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$2(options == null ? void 0 : options.interactions)
+      chartStyling: defaultChartStyling$1(options == null ? void 0 : options.chartStyling),
+      tooltip: defaultTooltip$1(options == null ? void 0 : options.tooltip),
+      graph: defaultGraph$1(options == null ? void 0 : options.graph),
+      legend: defaultLegend$1(options == null ? void 0 : options.legend),
+      chartOptions: defaultChartOptions$1(options == null ? void 0 : options.chartOptions),
+      interactions: defaultInteractions$1(options == null ? void 0 : options.interactions)
     }
   };
 };
@@ -26772,7 +26914,7 @@ Chart$2.register(
 );
 const PieChart = (props) => {
   setDefaultTheme();
-  const chart2 = getDefaultProps$2(props);
+  const chart2 = getDefaultProps$1(props);
   const chartRef = useRef(null);
   const { data, options, testId } = chart2;
   const {
@@ -26788,8 +26930,8 @@ const PieChart = (props) => {
     "div",
     {
       className: cx(
-        styles$2.chart,
-        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$2.fixedHeight : styles$2.stretchHeight : ""
+        styles$1.chart,
+        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$1.fixedHeight : styles$1.stretchHeight : ""
       ),
       style: {
         width: options.chartStyling.width || "auto",
@@ -26833,7 +26975,7 @@ const PieChart = (props) => {
   );
 };
 const PieChartWithLegend = (props) => {
-  const { options } = getDefaultProps$2(props);
+  const { options } = getDefaultProps$1(props);
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(PieChart, { ...props }) });
 };
 /*!
@@ -39422,7 +39564,7 @@ const getBarChartToolTips = (options) => {
       valueUnit: (yAxis == null ? void 0 : yAxis.unit) || ""
     };
   };
-  const titleCallback2 = (tooltipItems, _data) => {
+  const titleCallback = (tooltipItems, _data) => {
     var _a3, _b2;
     const barLabel = ((_a3 = tooltipItems == null ? void 0 : tooltipItems[0]) == null ? void 0 : _a3.label) || "";
     const labels = getTooltipLabels((_b2 = tooltipItems == null ? void 0 : tooltipItems[0]) == null ? void 0 : _b2.dataset);
@@ -39437,7 +39579,7 @@ const getBarChartToolTips = (options) => {
     }
     return displayNumber(roundByMagnitude(labelNumber), roundOptions);
   };
-  const labelCallback2 = (tooltipItem) => {
+  const labelCallback = (tooltipItem) => {
     var _a3;
     const { showLabelsInTooltips = false } = (options == null ? void 0 : options.tooltip) || {};
     let label = ((_a3 = tooltipItem.dataset) == null ? void 0 : _a3.label) || "";
@@ -39479,8 +39621,8 @@ const getBarChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback2,
-      label: labelCallback2,
+      title: titleCallback,
+      label: labelCallback,
       afterLabel: afterLabelCallback
     }
   };
@@ -39523,31 +39665,31 @@ const useBarChartOptions = ({
     }
   };
 };
-const chart$1 = "_chart_x1sru_1";
+const chart = "_chart_x1sru_1";
 const canvas = "_canvas_x1sru_10";
-const fixedHeight$1 = "_fixedHeight_x1sru_19";
-const stretchHeight$1 = "_stretchHeight_x1sru_25";
-const zoomForm$1 = "_zoomForm_x1sru_38";
-const zoomReset$1 = "_zoomReset_x1sru_46";
-const help$1 = "_help_x1sru_49";
-const autoWeight$1 = "_autoWeight_x1sru_53";
+const fixedHeight = "_fixedHeight_x1sru_19";
+const stretchHeight = "_stretchHeight_x1sru_25";
+const zoomForm = "_zoomForm_x1sru_38";
+const zoomReset = "_zoomReset_x1sru_46";
+const help = "_help_x1sru_49";
+const autoWeight = "_autoWeight_x1sru_53";
 const actions = "_actions_x1sru_57";
-const styles$1 = {
-  chart: chart$1,
+const styles = {
+  chart,
   canvas,
-  fixedHeight: fixedHeight$1,
-  stretchHeight: stretchHeight$1,
-  zoomForm: zoomForm$1,
-  zoomReset: zoomReset$1,
-  help: help$1,
-  autoWeight: autoWeight$1,
+  fixedHeight,
+  stretchHeight,
+  zoomForm,
+  zoomReset,
+  help,
+  autoWeight,
   actions
 };
-const defaultAxes$1 = (axes) => ({
+const defaultAxes = (axes) => ({
   x: (axes == null ? void 0 : axes.x) || [{}],
   y: (axes == null ? void 0 : axes.y) || [{}]
 });
-const defaultAdditionalAxesOptions$1 = (options) => ({
+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,
@@ -39558,30 +39700,30 @@ const defaultAdditionalAxesOptions$1 = (options) => ({
   min: options == null ? void 0 : options.min,
   max: options == null ? void 0 : options.max
 });
-const defaultChartStyling$1 = (styling) => ({
+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$1 = (tooltip) => ({
+const defaultTooltip = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
 });
-const defaultGraph$1 = (graph) => ({
+const defaultGraph = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
 });
-const defaultAnnotationsData$1 = (annotationsData) => {
+const defaultAnnotationsData = (annotationsData) => {
   return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
 };
-const defaultAnnotations$1 = (annotations) => ({
+const defaultAnnotations = (annotations) => ({
   showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
   controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
-  annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
+  annotationsData: defaultAnnotationsData(annotations == null ? void 0 : annotations.annotationsData)
 });
-const defaultLegend$1 = (legend2) => ({
+const defaultLegend = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
   position: (legend2 == null ? void 0 : legend2.position) || Position.TopLeft,
   align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center,
@@ -39590,11 +39732,11 @@ const defaultLegend$1 = (legend2) => ({
     customLegendContainerID: ""
   }
 });
-const defaultChartOptions$1 = (options) => ({
+const defaultChartOptions = (options) => ({
   enableZoom: (options == null ? void 0 : options.enableZoom) || false,
   enablePan: (options == null ? void 0 : options.enablePan) || false
 });
-const defaultInteractions$1 = (interactions) => ({
+const defaultInteractions = (interactions) => ({
   onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
   onHover: interactions == null ? void 0 : interactions.onHover,
   onUnhover: interactions == null ? void 0 : interactions.onUnhover
@@ -39609,7 +39751,7 @@ const defaultDragData = (dragData) => ({
   onDrag: dragData == null ? void 0 : dragData.onDrag,
   onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
 });
-const getDefaultProps$1 = (props) => {
+const getDefaultProps = (props) => {
   const chart2 = (props == null ? void 0 : props.chart) || {};
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
@@ -39618,17 +39760,17 @@ const getDefaultProps$1 = (props) => {
     options: {
       title: (options == null ? void 0 : options.title) || "",
       direction: (options == null ? void 0 : options.direction) || "vertical",
-      axes: defaultAxes$1(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions$1(
+      axes: defaultAxes(options == null ? void 0 : options.axes),
+      additionalAxesOptions: defaultAdditionalAxesOptions(
         options == null ? void 0 : options.additionalAxesOptions
       ),
-      chartStyling: defaultChartStyling$1(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$1(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$1(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations$1(options == null ? void 0 : options.annotations),
-      legend: defaultLegend$1(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$1(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$1(options == null ? void 0 : options.interactions),
+      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)
     }
   };
@@ -39651,7 +39793,7 @@ const BarChart = (props) => {
   var _a2, _b2, _c2, _d2;
   setDefaultTheme();
   const chartRef = useRef(null);
-  const chart2 = getDefaultProps$1(props);
+  const chart2 = getDefaultProps(props);
   const { translations, languageKey } = getConfig();
   const { options, testId } = chart2;
   const { chartStyling, graph } = options;
@@ -39661,14 +39803,14 @@ const BarChart = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: getClassName(chartStyling, styles$1),
+      className: getClassName(chartStyling, styles),
       style: {
         width: chartStyling.width || AUTO,
         height: chartStyling.height || AUTO
       },
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
           Button,
           {
             small: true,
@@ -39679,7 +39821,7 @@ const BarChart = (props) => {
             onClick: () => downloadPgn(chartRef)
           }
         ) }) }),
-        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$1.canvas, id: "canvas", children: [
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Bar,
             {
@@ -39710,342 +39852,13 @@ const BarChart = (props) => {
   );
 };
 const BarChartWithLegend = (props) => {
-  const { options } = getDefaultProps$1(props);
-  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(BarChart, { ...props }) });
-};
-const customFormatNumber = (labelNumber) => {
-  let roundOptions = {};
-  if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
-    roundOptions = { roundScientificCoefficient: 3 };
-  }
-  return displayNumber(roundByMagnitude(labelNumber), roundOptions);
-};
-const titleCallback = (tooltipItems, options) => {
-  var _a2;
-  if ((_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.showLabelsInTooltips) {
-    const item = tooltipItems[0];
-    const { label } = (item == null ? void 0 : item.dataset) ?? {};
-    return label;
-  }
-};
-const labelCallback = (tooltipItem) => {
-  const { raw, dataset } = tooltipItem ?? {};
-  return `${dataset == null ? void 0 : dataset.label} ( x: ${customFormatNumber(
-    raw == null ? void 0 : raw.x
-  )} , y: ${customFormatNumber(raw == null ? void 0 : raw.y)} )`;
-};
-const getTooltipsConfig = (options) => {
-  var _a2, _b2, _c2;
-  return {
-    enabled: (_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.enabled,
-    callbacks: {
-      title: (tooltipItems) => titleCallback(tooltipItems, options),
-      label: labelCallback
-    },
-    backgroundColor: (_b2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _b2.backgroundColor,
-    displayColors: (_c2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _c2.displayColors,
-    padding: 7
-  };
-};
-const getScatterChartAxis = ({
-  options,
-  axisType = AxisType.X,
-  currentScale
-}) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
-  const isDirectionVertical = isVertical(options.direction);
-  const axisData = currentScale || ((_b2 = (_a2 = options == null ? void 0 : options.axes) == null ? void 0 : _a2[axisType]) == null ? void 0 : _b2[0]);
-  const isDirectionCompatibleWithAxisType = isDirectionVertical && axisType === AxisType.Y || !isDirectionVertical && axisType === AxisType.X;
-  const grid = (axisData == null ? void 0 : axisData.gridLines) || {};
-  const getReverse = () => {
-    var _a3;
-    const axisWithReverse = isDirectionVertical ? AxisType.Y : AxisType.X;
-    return axisType === axisWithReverse ? (_a3 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _a3.reverse : false;
-  };
-  const getTicks = () => {
-    const additionalAxesOptions = options == null ? void 0 : options.additionalAxesOptions;
-    const stepSize = {
-      stepSize: (axisData == null ? void 0 : axisData.stepSize) ?? (axisType === AxisType.Y ? additionalAxesOptions == null ? void 0 : additionalAxesOptions.stepSize : void 0)
-    };
-    return {
-      ...stepSize,
-      includeBounds: false,
-      //OW-10088 disable irregular axis ticks
-      font: {
-        size: DEFAULT_FONT_SIZE
-      }
-    };
-  };
-  return {
-    type: ScaleType.Linear,
-    position: axisData == null ? void 0 : axisData.position,
-    beginAtZero: (_c2 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _c2.beginAtZero,
-    reverse: getReverse(),
-    suggestedMax: (_d2 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _d2.suggestedMax,
-    suggestedMin: (_e2 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _e2.suggestedMin,
-    min: isDirectionCompatibleWithAxisType ? (_f2 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _f2.min : void 0,
-    max: isDirectionCompatibleWithAxisType ? (_g2 = options == null ? void 0 : options.additionalAxesOptions) == null ? void 0 : _g2.max : void 0,
-    title: {
-      display: !!((_h2 = axisData == null ? void 0 : axisData.label) == null ? void 0 : _h2.length) || !!((_i2 = axisData == null ? void 0 : axisData.unit) == null ? void 0 : _i2.length),
-      text: (axisData == null ? void 0 : axisData.label) || (axisData == null ? void 0 : axisData.unit),
-      padding: 0
-    },
-    ticks: getTicks(),
-    grid: {
-      ...grid
-    }
-  };
-};
-const getScatterChartScales = (options) => {
-  const xAxis = getScatterChartAxis({ options, axisType: AxisType.X });
-  const yAxis = getScatterChartAxis({ options, axisType: AxisType.Y });
-  return {
-    x: xAxis,
-    y: yAxis
-  };
-};
-const useScatterChartConfig = (chart2, chartRef) => {
-  const { data, options: defaultOptions } = chart2;
-  const { interactions, chartStyling } = defaultOptions;
-  const [pointHover, setPointHover] = useState(false);
-  const { legend: legend2, customLegendPlugin, legendClick } = useLegendState({
-    chartRef,
-    options: defaultOptions
-  });
-  const { state: legendState } = useLegend();
-  const { annotation: annotation2 } = legendState;
-  const generateDatasets = (datasets) => {
-    return datasets.map(
-      (scatterDataset, index2) => {
-        const { borderWidth: inputBorderWidth = DEFAULT_BORDER_WIDTH } = scatterDataset ?? {};
-        const borderWidth = parseFloat(String(inputBorderWidth)) || 1;
-        const color2 = COLORS[index2];
-        const borderColor = scatterDataset.borderColor ?? color2;
-        const backgroundColor = scatterDataset.backgroundColor ?? color2;
-        return {
-          ...scatterDataset,
-          borderWidth,
-          borderColor,
-          backgroundColor
-        };
-      }
-    );
-  };
-  const generatedDatasets = generateDatasets(
-    data.datasets
-  );
-  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];
-        interactions.onHover(evt, datasetIndex, index2, generatedDatasets);
-      }
-    }
-  };
-  const scatterOptions = {
-    onClick,
-    onHover,
-    chartStyling,
-    interactions: {
-      onLegendClick: legendClick,
-      onHover
-    },
-    scales: getScatterChartScales(chart2 == null ? void 0 : chart2.options),
-    plugins: {
-      legend: { ...legend2, display: false },
-      // hide default legend
-      customLegendPlugin,
-      title: getTitle(defaultOptions),
-      annotation: toAnnotationObject(annotation2),
-      chartAreaBorder: {
-        borderColor: BORDER_COLOR
-      },
-      datalabels: {
-        display: defaultOptions.graph.showDataLabels
-      },
-      tooltip: getTooltipsConfig(defaultOptions)
-    }
-  };
-  return {
-    generatedDatasets,
-    scatterOptions
-  };
-};
-const defaultChartStyling = (styling) => ({
-  width: (styling == null ? void 0 : styling.width) ?? AUTO,
-  height: (styling == null ? void 0 : styling.height) ?? AUTO,
-  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) => ({
-  enabled: (tooltip == null ? void 0 : tooltip.enabled) ?? true,
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false,
-  backgroundColor: (tooltip == null ? void 0 : tooltip.backgroundColor) || "#333",
-  displayColors: (tooltip == null ? void 0 : tooltip.displayColors) || false
-});
-const defaultGraph = (graph) => ({
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false,
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false
-});
-const defaultLegend = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  useDataset: (legend2 == null ? void 0 : legend2.useDataset) || false,
-  position: (legend2 == null ? void 0 : legend2.position) || Position.BottomLeft,
-  align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center
-});
-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 defaultChartData = (data) => {
-  return {
-    labels: (data == null ? void 0 : data.labels) || [],
-    datasets: (data == null ? void 0 : data.datasets) || []
-  };
-};
-const defaultAnnotationsData = (annotationsData) => {
-  return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
-};
-const defaultAnnotations = (annotations) => ({
-  showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
-  controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
-  annotationsData: defaultAnnotationsData(annotations == null ? void 0 : annotations.annotationsData)
-});
-const defaultAxes = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
-});
-const defaultAdditionalAxesOptions = (options) => ({
-  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 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) ?? null,
-    data: defaultChartData(chart2 == null ? void 0 : chart2.data),
-    options: {
-      title: (options == null ? void 0 : options.title) || "",
-      axes: defaultAxes(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions(
-        options == null ? void 0 : options.additionalAxesOptions
-      ),
-      direction: (options == null ? void 0 : options.direction) || ChartDirection.VERTICAL,
-      chartStyling: defaultChartStyling(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph(options == null ? void 0 : options.graph),
-      legend: defaultLegend(options == null ? void 0 : options.legend),
-      annotations: defaultAnnotations(options == null ? void 0 : options.annotations),
-      chartOptions: defaultChartOptions(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions(options == null ? void 0 : options.interactions)
-    }
-  };
-};
-const chart = "_chart_1jdnu_1";
-const fixedHeight = "_fixedHeight_1jdnu_13";
-const stretchHeight = "_stretchHeight_1jdnu_19";
-const zoomForm = "_zoomForm_1jdnu_32";
-const zoomReset = "_zoomReset_1jdnu_40";
-const help = "_help_1jdnu_43";
-const autoWeight = "_autoWeight_1jdnu_47";
-const styles = {
-  chart,
-  fixedHeight,
-  stretchHeight,
-  zoomForm,
-  zoomReset,
-  help,
-  autoWeight
-};
-Chart$2.register(
-  LinearScale$1,
-  PointElement$1,
-  CategoryScale$1,
-  plugin_legend,
-  plugin_tooltip,
-  plugin_title,
-  plugin$1,
-  plugin,
-  annotation
-);
-const ScatterChart = (props) => {
-  setDefaultTheme();
-  const chartRef = useRef(null);
-  const chart2 = getDefaultProps(props);
-  const { options, testId } = chart2;
-  const { scatterOptions, generatedDatasets } = useScatterChartConfig(
-    chart2,
-    chartRef
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: getClassName(options.chartStyling, styles),
-      style: {
-        width: options.chartStyling.width,
-        height: options.chartStyling.height
-      },
-      "data-testid": testId,
-      children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles.canvas, id: "canvas", children: [
-        /* @__PURE__ */ jsx(
-          Scatter,
-          {
-            ref: chartRef,
-            data: {
-              datasets: generatedDatasets
-            },
-            options: scatterOptions,
-            plugins: getPlugins(options.graph, options.legend)
-          }
-        ),
-        !!generatedDatasets.length && /* @__PURE__ */ jsx(
-          Legend2,
-          {
-            chartRef,
-            legendConfig: {
-              options,
-              generatedDatasets,
-              chartType: ChartType.SCATTER
-            }
-          }
-        )
-      ] }) })
-    }
-  );
-};
-const ScatterChartWithLegend = (props) => {
   const { options } = getDefaultProps(props);
-  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(ScatterChart, { ...props }) });
+  return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(BarChart, { ...props }) });
 };
 export {
   BarChartWithLegend as BarChart,
   LineChartWithLegend as LineChart,
   PieChartWithLegend as PieChart,
-  ScatterChartWithLegend as ScatterChart,
   initializeLineChart
 };
 //# sourceMappingURL=index.js.map
@@ -40054,7 +39867,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_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_x1sru_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_x1sru_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_x1sru_38 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n  margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_x1sru_53 {\n  width: auto;\n  height: auto;\n}\n._actions_x1sru_57 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\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}"));
+      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_x1sru_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_x1sru_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_x1sru_38 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n  margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_x1sru_53 {\n  width: auto;\n  height: auto;\n}\n._actions_x1sru_57 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {