@oliasoft-open-source/charts-library 4.3.0-beta-1 → 4.3.0-beta-3

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;
+var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
 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,6 +4914,130 @@ 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.");
 }
@@ -5803,7 +5927,7 @@ function _detectPlatform$1(canvas2) {
   }
   return DomPlatform$1;
 }
-let Element$2 = (_f = class {
+let Element$2 = (_g = class {
   constructor() {
     __publicField(this, "x");
     __publicField(this, "y");
@@ -5835,7 +5959,7 @@ let Element$2 = (_f = class {
     });
     return ret;
   }
-}, __publicField(_f, "defaults", {}), __publicField(_f, "defaultRoutes"), _f);
+}, __publicField(_g, "defaults", {}), __publicField(_g, "defaultRoutes"), _g);
 function autoSkip$1(scale, ticks) {
   const tickOpts = scale.options.ticks;
   const determinedMaxTicks = determineMaxTicks$1(scale);
@@ -7922,7 +8046,7 @@ function getDatasetArea(meta, chartArea) {
   }
   return chartArea;
 }
-let Chart$2 = (_g = class {
+let Chart$2 = (_h = class {
   static register(...items) {
     registry$1.add(...items);
     invalidatePlugins$1();
@@ -8742,7 +8866,7 @@ let Chart$2 = (_g = class {
     const hoverOptions = this.options.hover;
     return this.getElementsAtEventForMode(e2, hoverOptions.mode, hoverOptions, useFinalPosition);
   }
-}, __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);
+}, __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);
 function invalidatePlugins$1() {
   return each$1(Chart$2.instances, (chart2) => chart2._plugins.invalidate());
 }
@@ -8904,7 +9028,7 @@ function drawBorder$1(ctx, element, offset, spacing, circular) {
     ctx.stroke();
   }
 }
-let ArcElement$1 = (_h = class extends Element$2 {
+let ArcElement$1 = (_i = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "circumference");
@@ -8989,7 +9113,7 @@ let ArcElement$1 = (_h = class extends Element$2 {
     drawBorder$1(ctx, this, radiusOffset, spacing, circular);
     ctx.restore();
   }
-}, __publicField(_h, "id", "arc"), __publicField(_h, "defaults", {
+}, __publicField(_i, "id", "arc"), __publicField(_i, "defaults", {
   borderAlign: "center",
   borderColor: "#fff",
   borderDash: [],
@@ -9001,12 +9125,12 @@ let ArcElement$1 = (_h = class extends Element$2 {
   spacing: 0,
   angle: void 0,
   circular: true
-}), __publicField(_h, "defaultRoutes", {
+}), __publicField(_i, "defaultRoutes", {
   backgroundColor: "backgroundColor"
-}), __publicField(_h, "descriptors", {
+}), __publicField(_i, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash"
-}), _h);
+}), _i);
 function setStyle$1(ctx, options, style = options) {
   ctx.lineCap = valueOrDefault$1(style.borderCapStyle, options.borderCapStyle);
   ctx.setLineDash(valueOrDefault$1(style.borderDash, options.borderDash));
@@ -9159,7 +9283,7 @@ function draw$3(ctx, line, start, count) {
     strokePathDirect$1(ctx, line, start, count);
   }
 }
-let LineElement$1 = (_i = class extends Element$2 {
+let LineElement$1 = (_j = class extends Element$2 {
   constructor(cfg) {
     super();
     this.animated = true;
@@ -9269,7 +9393,7 @@ let LineElement$1 = (_i = class extends Element$2 {
       this._path = void 0;
     }
   }
-}, __publicField(_i, "id", "line"), __publicField(_i, "defaults", {
+}, __publicField(_j, "id", "line"), __publicField(_j, "defaults", {
   borderCapStyle: "butt",
   borderDash: [],
   borderDashOffset: 0,
@@ -9281,13 +9405,13 @@ let LineElement$1 = (_i = class extends Element$2 {
   spanGaps: false,
   stepped: false,
   tension: 0
-}), __publicField(_i, "defaultRoutes", {
+}), __publicField(_j, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), __publicField(_i, "descriptors", {
+}), __publicField(_j, "descriptors", {
   _scriptable: true,
   _indexable: (name) => name !== "borderDash" && name !== "fill"
-}), _i);
+}), _j);
 function inRange$1$1(el, pos, axis, useFinalPosition) {
   const options = el.options;
   const { [axis]: value } = el.getProps([
@@ -9295,7 +9419,7 @@ function inRange$1$1(el, pos, axis, useFinalPosition) {
   ], useFinalPosition);
   return Math.abs(pos - value) < options.radius + options.hitRadius;
 }
-let PointElement$1 = (_j = class extends Element$2 {
+let PointElement$1 = (_k = class extends Element$2 {
   constructor(cfg) {
     super();
     __publicField(this, "parsed");
@@ -9354,10 +9478,10 @@ let PointElement$1 = (_j = class extends Element$2 {
     const options = this.options || {};
     return options.radius + options.hitRadius;
   }
-}, __publicField(_j, "id", "point"), /**
+}, __publicField(_k, "id", "point"), /**
 * @type {any}
 */
-__publicField(_j, "defaults", {
+__publicField(_k, "defaults", {
   borderWidth: 1,
   hitRadius: 1,
   hoverBorderWidth: 1,
@@ -9368,10 +9492,10 @@ __publicField(_j, "defaults", {
 }), /**
 * @type {any}
 */
-__publicField(_j, "defaultRoutes", {
+__publicField(_k, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _j);
+}), _k);
 function getBarBounds$1(bar, useFinalPosition) {
   const { x: x2, y: y2, base, width, height } = bar.getProps([
     "x",
@@ -9485,7 +9609,7 @@ function inflateRect$1(rect, amount, refRect = {}) {
     radius: rect.radius
   };
 }
-let BarElement$1 = (_k = class extends Element$2 {
+let BarElement$1 = (_l = class extends Element$2 {
   constructor(cfg) {
     super();
     this.options = void 0;
@@ -9541,16 +9665,16 @@ let BarElement$1 = (_k = class extends Element$2 {
   getRange(axis) {
     return axis === "x" ? this.width / 2 : this.height / 2;
   }
-}, __publicField(_k, "id", "bar"), __publicField(_k, "defaults", {
+}, __publicField(_l, "id", "bar"), __publicField(_l, "defaults", {
   borderSkipped: "start",
   borderWidth: 0,
   borderRadius: 0,
   inflateAmount: "auto",
   pointStyle: void 0
-}), __publicField(_k, "defaultRoutes", {
+}), __publicField(_l, "defaultRoutes", {
   backgroundColor: "backgroundColor",
   borderColor: "borderColor"
-}), _k);
+}), _l);
 function _segments(line, target, property) {
   const segments = line.segments;
   const points = line.points;
@@ -11119,7 +11243,7 @@ function invokeCallbackWithFallback(callbacks, name, ctx, arg) {
   }
   return result;
 }
-let Tooltip$1 = (_l = class extends Element$2 {
+let Tooltip$1 = (_m = class extends Element$2 {
   constructor(config2) {
     super();
     this.opacity = 0;
@@ -11658,7 +11782,7 @@ let Tooltip$1 = (_l = class extends Element$2 {
     const position = positioners$2[options.position].call(this, active, e2);
     return position !== false && (caretX !== position.x || caretY !== position.y);
   }
-}, __publicField(_l, "positioners", positioners$2), _l);
+}, __publicField(_m, "positioners", positioners$2), _m);
 var plugin_tooltip = {
   id: "tooltip",
   _element: Tooltip$1,
@@ -11813,7 +11937,7 @@ function _getLabelForValue(value) {
   }
   return value;
 }
-let CategoryScale$1 = (_m = class extends Scale$1 {
+let CategoryScale$1 = (_n = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this._startValue = void 0;
@@ -11899,11 +12023,11 @@ let CategoryScale$1 = (_m = class extends Scale$1 {
   getBasePixel() {
     return this.bottom;
   }
-}, __publicField(_m, "id", "category"), __publicField(_m, "defaults", {
+}, __publicField(_n, "id", "category"), __publicField(_n, "defaults", {
   ticks: {
     callback: _getLabelForValue
   }
-}), _m);
+}), _n);
 function generateTicks$1$1(generationOptions, dataRange) {
   const ticks = [];
   const MIN_SPACING = 1e-14;
@@ -12126,7 +12250,7 @@ let LinearScaleBase$1 = class LinearScaleBase extends Scale$1 {
     return formatNumber$1(value, this.chart.options.locale, this.options.ticks.format);
   }
 };
-let LinearScale$1 = (_n = class extends LinearScaleBase$1 {
+let LinearScale$1 = (_o = class extends LinearScaleBase$1 {
   determineDataLimits() {
     const { min, max } = this.getMinMax(true);
     this.min = isNumberFinite$1(min) ? min : 0;
@@ -12147,11 +12271,11 @@ let LinearScale$1 = (_n = class extends LinearScaleBase$1 {
   getValueForPixel(pixel) {
     return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
   }
-}, __publicField(_n, "id", "linear"), __publicField(_n, "defaults", {
+}, __publicField(_o, "id", "linear"), __publicField(_o, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.numeric
   }
-}), _n);
+}), _o);
 const log10Floor = (v2) => Math.floor(log10$1(v2));
 const changeExponent = (v2, m2) => Math.pow(10, log10Floor(v2) + m2);
 function isMajor$1(tickVal) {
@@ -12213,7 +12337,7 @@ function generateTicks$2(generationOptions, { min, max }) {
   });
   return ticks;
 }
-let LogarithmicScale$1 = (_o = class extends Scale$1 {
+let LogarithmicScale$1 = (_p = class extends Scale$1 {
   constructor(cfg) {
     super(cfg);
     this.start = void 0;
@@ -12310,14 +12434,14 @@ let LogarithmicScale$1 = (_o = class extends Scale$1 {
     const decimal = this.getDecimalForPixel(pixel);
     return Math.pow(10, this._startValue + decimal * this._valueRange);
   }
-}, __publicField(_o, "id", "logarithmic"), __publicField(_o, "defaults", {
+}, __publicField(_p, "id", "logarithmic"), __publicField(_p, "defaults", {
   ticks: {
     callback: Ticks$1.formatters.logarithmic,
     major: {
       enabled: true
     }
   }
-}), _o);
+}), _p);
 const INTERVALS$1 = {
   millisecond: {
     common: true,
@@ -12453,7 +12577,7 @@ function ticksFromTimestamps$1(scale, values2, majorUnit) {
   }
   return ilen === 0 || !majorUnit ? ticks : setMajorTicks$1(scale, ticks, map2, majorUnit);
 }
-let TimeScale$1 = (_p = class extends Scale$1 {
+let TimeScale$1 = (_q = class extends Scale$1 {
   constructor(props) {
     super(props);
     this._cache = {
@@ -12719,7 +12843,7 @@ let TimeScale$1 = (_p = class extends Scale$1 {
   normalize(values2) {
     return _arrayUnique$1(values2.sort(sorter$1));
   }
-}, __publicField(_p, "id", "time"), __publicField(_p, "defaults", {
+}, __publicField(_q, "id", "time"), __publicField(_q, "defaults", {
   bounds: "data",
   adapters: {},
   time: {
@@ -12737,7 +12861,7 @@ let TimeScale$1 = (_p = class extends Scale$1 {
       enabled: false
     }
   }
-}), _p);
+}), _q);
 function interpolate$2(table2, val, reverse) {
   let lo = 0;
   let hi = table2.length - 1;
@@ -12758,7 +12882,7 @@ function interpolate$2(table2, val, reverse) {
   const span = nextSource - prevSource;
   return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
 }
-let TimeSeriesScale$1 = (_q = class extends TimeScale$1 {
+let TimeSeriesScale$1 = (_r = class extends TimeScale$1 {
   constructor(props) {
     super(props);
     this._table = [];
@@ -12843,7 +12967,7 @@ let TimeSeriesScale$1 = (_q = 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(_q, "id", "timeseries"), __publicField(_q, "defaults", TimeScale$1.defaults), _q);
+}, __publicField(_r, "id", "timeseries"), __publicField(_r, "defaults", TimeScale$1.defaults), _r);
 const defaultDatasetIdKey = "label";
 function reforwardRef(ref, value) {
   if (typeof ref === "function") {
@@ -12980,6 +13104,7 @@ 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;
 }
@@ -22048,26 +22173,26 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
-const chart$2 = "_chart_e3qdd_1";
+const chart$3 = "_chart_e3qdd_1";
 const canvas$1 = "_canvas_e3qdd_11";
-const fixedHeight$2 = "_fixedHeight_e3qdd_20";
-const stretchHeight$2 = "_stretchHeight_e3qdd_26";
+const fixedHeight$3 = "_fixedHeight_e3qdd_20";
+const stretchHeight$3 = "_stretchHeight_e3qdd_26";
 const squareAspectRatio = "_squareAspectRatio_e3qdd_32";
-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 zoomForm$3 = "_zoomForm_e3qdd_43";
+const zoomReset$3 = "_zoomReset_e3qdd_51";
+const help$3 = "_help_e3qdd_54";
+const autoWeight$3 = "_autoWeight_e3qdd_58";
 const table = "_table_e3qdd_62";
-const styles$4 = {
-  chart: chart$2,
+const styles$5 = {
+  chart: chart$3,
   canvas: canvas$1,
-  fixedHeight: fixedHeight$2,
-  stretchHeight: stretchHeight$2,
+  fixedHeight: fixedHeight$3,
+  stretchHeight: stretchHeight$3,
   squareAspectRatio,
-  zoomForm: zoomForm$2,
-  zoomReset: zoomReset$2,
-  help: help$2,
-  autoWeight: autoWeight$2,
+  zoomForm: zoomForm$3,
+  zoomReset: zoomReset$3,
+  help: help$3,
+  autoWeight: autoWeight$3,
   table
 };
 const TOGGLE_ZOOM = "TOGGLE_ZOOM";
@@ -22194,6 +22319,10 @@ var ChartType$1 = /* @__PURE__ */ ((ChartType2) => {
 var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
   CursorStyle2["Pointer"] = "pointer";
   CursorStyle2["Initial"] = "initial";
+  CursorStyle2["Grab"] = "grab";
+  CursorStyle2["Grabbing"] = "grabbing";
+  CursorStyle2["Crosshair"] = "crosshair";
+  CursorStyle2["Move"] = "move";
   return CursorStyle2;
 })(CursorStyle || {});
 var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
@@ -22202,10 +22331,10 @@ var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
   ScaleType2["Logarithmic"] = "logarithmic";
   return ScaleType2;
 })(ScaleType || {});
-var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
+var ChartDirection$1 = /* @__PURE__ */ ((ChartDirection2) => {
   ChartDirection2["Vertical"] = "vertical";
   return ChartDirection2;
-})(ChartDirection || {});
+})(ChartDirection$1 || {});
 var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
   TooltipLabel2["Y"] = "yLabel";
   TooltipLabel2["X"] = "xLabel";
@@ -22329,7 +22458,8 @@ const chartMinorGridlinesPlugin = {
 };
 const BORDER_WIDTH = {
   INITIAL: 2,
-  HOVERED: 6
+  HOVERED: 6,
+  POINT_HOVERED: 8
 };
 const BORDER_COLOR = "rgba(0,0,0,0.1)";
 const ANNOTATION_DASH = [10, 2];
@@ -22424,7 +22554,7 @@ const getTitle = (options) => {
   } : {};
 };
 const isVertical = (direction) => {
-  return direction === ChartDirection.Vertical;
+  return direction === ChartDirection$1.Vertical;
 };
 const getAxisPosition = (axisType, i2) => {
   const [positionA, positionB] = axisType === AxisType.Y ? [Position.Left, Position.Right] : [Position.Top, Position.Bottom];
@@ -22895,7 +23025,7 @@ const DragOptions = ({
 };
 const controls = "_controls_gbo9q_1";
 const buttons = "_buttons_gbo9q_7";
-const styles$3 = {
+const styles$4 = {
   controls,
   buttons
 };
@@ -24357,10 +24487,10 @@ const Controls = ({
     generatedDatasets
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$4.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
       headerComponent,
-      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
+      /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$4.buttons, children: [
         !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             AxesOptions,
@@ -24465,11 +24595,11 @@ const defaultAxis = (position) => ({
     }
   }
 });
-const defaultAxes$1 = (axes) => ({
+const defaultAxes$2 = (axes) => ({
   x: (axes == null ? void 0 : axes.x) || [defaultAxis("bottom")],
   y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
 });
-const defaultAdditionalAxesOptions$1 = (options) => ({
+const defaultAdditionalAxesOptions$2 = (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,
@@ -24479,7 +24609,7 @@ const defaultAdditionalAxesOptions$1 = (options) => ({
   range: options == null ? void 0 : options.range,
   autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
 });
-const defaultChartStyling$2 = (options) => ({
+const defaultChartStyling$3 = (options) => ({
   width: options == null ? void 0 : options.width,
   height: options == null ? void 0 : options.height,
   maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
@@ -24493,22 +24623,22 @@ const defaultChartStyling$2 = (options) => ({
     right: 0
   }
 });
-const defaultTooltip$2 = (tooltip) => ({
+const defaultTooltip$3 = (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$2 = (graph) => ({
+const defaultGraph$3 = (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$1 = (annotationsData) => {
+const defaultAnnotationsData$2 = (annotationsData) => {
   return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
 };
-const defaultAnnotations$1 = (annotations) => {
+const defaultAnnotations$2 = (annotations) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
   return {
     labelAnnotation: {
@@ -24524,10 +24654,10 @@ const defaultAnnotations$1 = (annotations) => {
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
     enableDragAnnotation: (annotations == null ? void 0 : annotations.enableDragAnnotation) ?? false,
-    annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
+    annotationsData: defaultAnnotationsData$2(annotations == null ? void 0 : annotations.annotationsData)
   };
 };
-const defaultLegend$2 = (legend2) => ({
+const defaultLegend$3 = (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,
@@ -24537,14 +24667,14 @@ const defaultLegend$2 = (legend2) => ({
   },
   usePointStyle: (legend2 == null ? void 0 : legend2.usePointStyle) ?? true
 });
-const defaultChartOptions$2 = (options) => ({
+const defaultChartOptions$3 = (options) => ({
   showPoints: (options == null ? void 0 : options.showPoints) ?? true,
   enableZoom: (options == null ? void 0 : options.enableZoom) ?? true,
   enablePan: (options == null ? void 0 : options.enablePan) ?? false,
   showLine: (options == null ? void 0 : options.showLine) ?? true,
   closeOnOutsideClick: (options == null ? void 0 : options.closeOnOutsideClick) ?? false
 });
-const defaultInteractions$2 = (interactions) => ({
+const defaultInteractions$3 = (interactions) => ({
   onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
   onHover: interactions == null ? void 0 : interactions.onHover,
   onUnhover: interactions == null ? void 0 : interactions.onUnhover,
@@ -24560,7 +24690,7 @@ const defaultDragData$1 = (dragData) => ({
   onDrag: dragData == null ? void 0 : dragData.onDrag,
   onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
 });
-const getDefaultProps$2 = (props) => {
+const getDefaultProps$3 = (props) => {
   const chart2 = (props == null ? void 0 : props.chart) || {};
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
@@ -24571,17 +24701,17 @@ const getDefaultProps$2 = (props) => {
     options: {
       title: (options == null ? void 0 : options.title) ?? "",
       scales: (options == null ? void 0 : options.scales) ?? {},
-      axes: defaultAxes$1(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions$1(
+      axes: defaultAxes$2(options == null ? void 0 : options.axes),
+      additionalAxesOptions: defaultAdditionalAxesOptions$2(
         options == null ? void 0 : options.additionalAxesOptions
       ),
-      chartStyling: defaultChartStyling$2(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$2(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$2(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations$1(options == null ? void 0 : options.annotations),
-      legend: defaultLegend$2(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$2(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$2(options == null ? void 0 : options.interactions),
+      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),
       dragData: defaultDragData$1(options == null ? void 0 : options.dragData),
       depthType: (options == null ? void 0 : options.depthType) ?? {}
     }
@@ -25024,7 +25154,7 @@ const getUnitsFromLabel = (label) => {
   const units = matches && (matches == null ? void 0 : matches.length) > 0 ? matches == null ? void 0 : matches[0] : "";
   return units;
 };
-const customFormatNumber = (labelNumber, scientificNotation) => {
+const customFormatNumber$1 = (labelNumber, scientificNotation) => {
   let roundOptions = {};
   if (!scientificNotation) {
     roundOptions = { scientific: false };
@@ -25060,21 +25190,21 @@ const getLineChartToolTips = (options) => {
       };
     }
   };
-  const titleCallback = (tooltipItem) => {
+  const titleCallback2 = (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(formattedValue, scientificNotation);
+    const roundedValue = customFormatNumber$1(formattedValue, scientificNotation);
     return `${roundedValue} ${titleAxisLabel}`;
   };
-  const labelCallback = (tooltipItem) => {
+  const labelCallback2 = (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(labelNumber, scientificNotation);
+      return customFormatNumber$1(labelNumber, scientificNotation);
     };
     const tooltipItemValue = getTooltipItemValue();
     const units = getUnitsFromLabel(valueAxisLabel);
@@ -25091,8 +25221,8 @@ const getLineChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback,
-      label: labelCallback,
+      title: titleCallback2,
+      label: labelCallback2,
       afterLabel: afterLabelCallback
     }
   };
@@ -25187,8 +25317,9 @@ var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
   AnnotationType2["ELLIPSE"] = "ellipse";
   return AnnotationType2;
 })(AnnotationType || {});
-const annotationEnter = (element, chart2) => {
+const handleLineEnter = (element, chart2, annotation2) => {
   var _a2;
+  chart2.canvas.style.cursor = CursorStyle.Pointer;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
     if (element.options.label) {
       element.options.label.xAdjust = chart2.chartArea.left;
@@ -25199,64 +25330,138 @@ const annotationEnter = (element, chart2) => {
     element.label.options.display = true;
     element.options.label.enabled = true;
   }
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = element.options.id || null;
+    chart2.update();
+  }
   chart2.draw();
-  chart2.canvas.style.cursor = CursorStyle.Pointer;
-  return true;
 };
-const annotationLeave = (element, chart2) => {
+const handleLineLeave = (element, chart2, annotation2) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
+  chart2.canvas.style.cursor = CursorStyle.Initial;
+  chart2.hoveredAnnotationId = null;
   if (element.options.label) {
     element.label.options.display = false;
     element.options.label.enabled = false;
   }
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = null;
+    chart2.update();
+  }
+  chart2.draw();
+};
+const handleBoxEnter = (element, chart2, annotation2) => {
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = element.options.id || null;
+    chart2.update();
+    element.options.borderWidth = BORDER_WIDTH.HOVERED;
+    chart2.canvas.style.cursor = CursorStyle.Pointer;
+  }
+  chart2.draw();
+};
+const handleBoxLeave = (element, chart2, annotation2) => {
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = null;
+    element.options.borderWidth = BORDER_WIDTH.INITIAL;
+    chart2.canvas.style.cursor = CursorStyle.Initial;
+    chart2.update();
+  }
+  chart2.draw();
+};
+const handlePointEnter = (element, chart2, annotation2) => {
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = element.options.id || null;
+    chart2.update();
+    element.options.borderWidth = BORDER_WIDTH.POINT_HOVERED;
+    chart2.canvas.style.cursor = CursorStyle.Pointer;
+  }
+  chart2.draw();
+};
+const handlePointLeave = (element, chart2, annotation2) => {
+  if (annotation2 == null ? void 0 : annotation2.enableDrag) {
+    chart2.hoveredAnnotationId = null;
+    element.options.borderWidth = BORDER_WIDTH.INITIAL;
+    chart2.canvas.style.cursor = CursorStyle.Initial;
+    chart2.update();
+  }
   chart2.draw();
-  chart2.canvas.style.cursor = CursorStyle.Initial;
-  return true;
 };
 const generateAnnotations = (annotationsData) => {
   return annotationsData == null ? void 0 : annotationsData.map((ann, idx) => {
+    var _a2, _b2, _c2, _d2, _e2;
     const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
-    const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
-    const type = (ann == null ? void 0 : ann.type) || "line";
+    const color2 = (ann == null ? void 0 : ann.color) ?? COLORS[idx];
+    const type = (ann == null ? void 0 : ann.type) || AnnotationType.LINE;
     const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
     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,
-      display: false,
-      position: Position.Top
-    } : {
-      content: ann == null ? void 0 : ann.label,
-      display: true,
-      font: { weight: "normal" }
-    };
+    const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = type === AnnotationType.LINE ? ANNOTATION_DASH : void 0;
+    const label = {
+      [AnnotationType.LINE]: {
+        backgroundColor: color2,
+        content: ann == null ? void 0 : ann.label,
+        display: false,
+        position: Position.Top
+      },
+      [AnnotationType.POINT]: {
+        backgroundColor: ((_a2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _a2.backgroundColor) ?? "transparent",
+        content: ann == null ? void 0 : ann.label,
+        display: !!(ann == null ? void 0 : ann.label),
+        position: ((_b2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _b2.position) ?? Position.Bottom,
+        color: ((_c2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _c2.color) ?? "black",
+        font: ((_d2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _d2.font) ?? `bold 12px ${DEFAULT_FONT_FAMILY}`,
+        borderWidth: BORDER_WIDTH.INITIAL,
+        padding: 5,
+        borderRadius: 3,
+        borderColor: ((_e2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _e2.borderColor) ?? "transparent"
+      },
+      [AnnotationType.BOX]: {
+        content: ann == null ? void 0 : ann.label,
+        display: true,
+        font: { weight: "normal" }
+      }
+    }[type] || "transparent";
     const enter = ({
       element
     }, {
       chart: chart2
     }) => {
-      if (type !== "line" && !ann.enableDrag)
-        return;
-      annotationEnter(element, chart2);
+      switch (type) {
+        case AnnotationType.LINE:
+          handleLineEnter(element, chart2, ann);
+          break;
+        case AnnotationType.BOX:
+          handleBoxEnter(element, chart2, ann);
+          break;
+        case AnnotationType.POINT:
+          handlePointEnter(element, chart2, ann);
+          break;
+      }
     };
     const leave = ({
       element
     }, {
       chart: chart2
     }) => {
-      if (type !== "line" && !ann.enableDrag)
-        return;
-      annotationLeave(element, chart2);
+      switch (type) {
+        case AnnotationType.LINE:
+          handleLineLeave(element, chart2, ann);
+          break;
+        case AnnotationType.BOX:
+          handleBoxLeave(element, chart2, ann);
+          break;
+        case AnnotationType.POINT:
+          handlePointLeave(element, chart2, ann);
+          break;
+      }
     };
-    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;
+    const onDragStart = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord, annotation2) : void 0;
+    const onDrag = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord, annotation2) : void 0;
+    const onDragEnd = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord, annotation2) : void 0;
     return {
       ...ann,
       display: ann == null ? void 0 : ann.display,
@@ -25838,31 +26043,18 @@ const getMousePositionInCoordinates = (event, canvas2, scales) => {
   const yValue = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getValueForPixel(y2)) ?? -1;
   return { x: xValue, y: yValue };
 };
-const getActiveAnnotation = (x2, y2, annotations) => {
-  var _a2;
-  return ((_a2 = Object.values(annotations)) == null ? void 0 : _a2.find((annotation2) => {
-    const { xMin, xMax, yMin, yMax, xValue, yValue } = annotation2 ?? {};
-    let condtion;
-    if (xMin && xMax && yMin && yMax && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.BOX) {
-      condtion = x2 >= xMin && x2 <= xMax && y2 >= yMin && y2 <= yMax;
-    } else if (xValue && yValue && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.POINT) {
-      condtion = x2 >= xValue - 2 && x2 <= xValue + 2 && y2 >= yValue - 2 && y2 <= yValue + 2;
-    }
-    return condtion;
-  })) ?? {};
-};
 const calculateAnnotationMetricsInValues = (annotation2) => {
   const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
   let centerX;
   let centerY;
   let width;
   let height;
-  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+  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 (xValue && yValue && type === AnnotationType.POINT) {
+  } else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType.POINT) {
     centerX = xValue;
     centerY = yValue;
     width = 0;
@@ -25876,14 +26068,13 @@ const calculateAnnotationMetricsInValues = (annotation2) => {
   };
 };
 const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
-  var _a2, _b2, _c2, _d2;
   const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
   const { x: x2, y: y2 } = scales ?? {};
   let centerX;
   let centerY;
   let width;
   let height;
-  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+  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;
@@ -25892,13 +26083,13 @@ const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
     const yMaxValue = (y2 == null ? void 0 : y2.getPixelForValue(yMax)) ?? 0;
     width = xMinValue - xMaxValue;
     height = yMinValue - yMaxValue;
-    centerX = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getPixelForValue(xCenterValue)) ?? -1;
-    centerY = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getPixelForValue(yCenterValue)) ?? -1;
-  } else if (xValue && yValue && type === AnnotationType.POINT) {
+    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 = ((_c2 = scales == null ? void 0 : scales.x) == null ? void 0 : _c2.getPixelForValue(xValue)) ?? -1;
-    centerY = ((_d2 = scales == null ? void 0 : scales.y) == null ? void 0 : _d2.getPixelForValue(yValue)) ?? -1;
+    centerX = (x2 == null ? void 0 : x2.getPixelForValue(xValue)) ?? -1;
+    centerY = (y2 == null ? void 0 : y2.getPixelForValue(yValue)) ?? -1;
   }
   return {
     centerX,
@@ -25907,23 +26098,25 @@ const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
     height
   };
 };
-const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState) => {
+const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
   const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
-  const annotation2 = getActiveAnnotation(x2, y2, annotations);
+  const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
+  if (!annotation2)
+    return;
   const metrics = calculateAnnotationMetricsInValues(annotation2);
-  console.log(cloneDeep(annotations));
-  console.log(metrics);
   if (annotation2 && annotation2.enableDrag && metrics.centerY && metrics.centerX) {
+    canvas2.style.cursor = CursorStyle.Move;
     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 });
+      annotation2.onDragStart({ x: x2, y: y2 }, cloneDeep(annotation2));
     }
   }
 };
 const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
   if (isDragging2 && activeAnnotation) {
+    canvas2.style.cursor = CursorStyle.Move;
     const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
     const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
     let newCenterX = x2 - dragStartX;
@@ -25943,7 +26136,7 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
     }
     chart2.update();
     if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
-      activeAnnotation.onDrag({ x: x2, y: y2 });
+      activeAnnotation.onDrag({ x: x2, y: y2 }, cloneDeep(activeAnnotation));
     }
     const { ctx, width, height } = chart2;
     const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
@@ -25974,18 +26167,64 @@ const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDragg
     if (activeAnnotation) {
       const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
       if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
-        activeAnnotation.onDragEnd({ x: centerX, y: centerY });
+        activeAnnotation.onDragEnd(
+          { x: centerX, y: centerY },
+          cloneDeep(activeAnnotation)
+        );
       }
+      chart2.canvas.style.cursor = CursorStyle.Pointer;
       setDraggingState(false, null);
     }
     chart2.update();
   }
 };
+const annotationLabel = (ctx, annotations, scales) => {
+  Object.values(annotations).forEach((annotation2) => {
+    var _a2;
+    if (annotation2.type === AnnotationType.POINT && !isNil(annotation2 == null ? void 0 : annotation2.label) && ((_a2 = annotation2 == null ? void 0 : annotation2.label) == null ? void 0 : _a2.display)) {
+      const { content, font, color: color2, position, padding } = (annotation2 == null ? void 0 : annotation2.label) ?? {};
+      console.log(cloneDeep(annotation2));
+      ctx.save();
+      ctx.font = font;
+      ctx.fillStyle = color2;
+      const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValuesInPixels(annotation2, scales);
+      const textWidth = ctx.measureText(content).width;
+      let textX = centerX - textWidth / 2;
+      let textY = centerY + 20;
+      switch (position) {
+        case Position.Top:
+          textY = centerY - 20;
+          break;
+        case Position.Left:
+          textX = centerX - textWidth - padding;
+          textY = centerY;
+          break;
+        case Position.Right:
+          textX = centerX + padding;
+          textY = centerY;
+          break;
+      }
+      ctx.fillText(content, textX, textY);
+      ctx.restore();
+    }
+  });
+};
 const annotationDraggerPlugin = {
   id: "annotationDraggerPlugin",
+  beforeDraw(chart2) {
+    var _a2, _b2;
+    let annotations = ((_b2 = (_a2 = chart2.options.plugins) == null ? void 0 : _a2.annotation) == null ? void 0 : _b2.annotations) ?? {};
+    if (!annotations)
+      return;
+    annotationLabel(
+      chart2.ctx,
+      annotations,
+      chart2.scales
+    );
+  },
   afterUpdate(chart2) {
     var _a2, _b2, _c2, _d2;
-    const { canvas: canvas2, scales } = chart2;
+    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
     };
@@ -26004,14 +26243,15 @@ const annotationDraggerPlugin = {
         dragStartY = startY;
       }
     };
-    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled) {
+    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled && hoveredAnnotationId) {
       canvas2.addEventListener(MouseEvents.MOUSEDOWN, (event) => {
         handleAnnotationMouseDown(
           event,
           canvas2,
           typedScales,
           annotations,
-          setDraggingState
+          setDraggingState,
+          chart2.hoveredAnnotationId
         );
       });
       canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
@@ -26150,7 +26390,7 @@ const bottom = "_bottom_wpro0_161";
 const dropzonePlaceholder = "_dropzonePlaceholder_wpro0_165";
 const isActive = "_isActive_wpro0_173";
 const resizeContainer = "_resizeContainer_wpro0_176";
-const styles$2 = {
+const styles$3 = {
   legend,
   isDragging,
   legendItems,
@@ -26180,6 +26420,11 @@ 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=";
@@ -26190,7 +26435,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$2.legendItemLine, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemLine, children: /* @__PURE__ */ jsx(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -26222,7 +26467,7 @@ const PointItem = ({ dataset }) => {
     rectRot: rectRotSvg,
     rect: rectSvg
   };
-  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
       icon: icons[pointStyle] || circleSvg,
@@ -26234,7 +26479,7 @@ const PointItem = ({ dataset }) => {
 const BoxItem = ({ dataset }) => {
   const { backgroundColor } = dataset;
   const style = { backgroundColor };
-  return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, style });
+  return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, style });
 };
 const LegendItemLine = ({ dataset }) => {
   const { annotationType, showLine } = dataset;
@@ -26257,11 +26502,11 @@ const renderLegendItemSymbol = (dataset, chartType) => {
     case ChartType.LINE:
       return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
     case ChartType.BAR:
-      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
     case ChartType.PIE:
-      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
     case ChartType.SCATTER:
-      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
     default:
       return null;
   }
@@ -26275,18 +26520,18 @@ const LegendItem = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(styles$2.legendItem, hidden && styles$2.isHidden),
+      className: cx(styles$3.legendItem, hidden && styles$3.isHidden),
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: styles$2.legendItemSymbol,
+            className: styles$3.legendItemSymbol,
             style: { width: LEGEND_SYMBOL_SIZE },
             children: renderLegendItemSymbol(dataset, chartType)
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: styles$2.legendItemText, children: dataset.label })
+        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset.label })
       ]
     }
   );
@@ -26353,7 +26598,7 @@ const LegendItems = ({
   datasets,
   legendClick,
   chartType
-}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
+}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items.map((item) => {
   if (datasets[item.datasetIndex].hideLegend) {
     return null;
   }
@@ -26386,13 +26631,13 @@ const LegendPanel = forwardRef(
       {
         ref,
         className: cx(
-          styles$2.legend,
-          !legendEnabled && styles$2.isHidden,
-          isDragging2 && styles$2.isDragging
+          styles$3.legend,
+          !legendEnabled && styles$3.isHidden,
+          isDragging2 && styles$3.isDragging
         ),
         style,
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles$2.legendToggle, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: styles$3.legendToggle, children: /* @__PURE__ */ jsx(
             Button,
             {
               onClick: () => setLegendEnabled(!legendEnabled),
@@ -26431,17 +26676,17 @@ const LegendDropZone = (legendDropZoneProps) => {
     {
       ref: dropRef,
       className: cx(
-        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
+        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
       ),
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles$2.dropzonePlaceholder,
+          className: styles$3.dropzonePlaceholder,
           style: { ...placeholderSize, margin: LEGEND_MARGIN }
         }
       )
@@ -26460,7 +26705,7 @@ const LegendDropZones = (legendDropZonesProps) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$2.dropzoneContainer,
+      className: styles$3.dropzoneContainer,
       style: {
         top: top2,
         left: left2,
@@ -26502,7 +26747,7 @@ const Legend2 = ({ chartRef, legendConfig }) => {
     })
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$2.resizeContainer }),
+    /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$3.resizeContainer }),
     /* @__PURE__ */ jsx(
       LegendPanel,
       {
@@ -26549,7 +26794,7 @@ const LineChart = (props) => {
   const chartRef = useRef(null);
   const { table: table2 } = props;
   const { translations, languageKey } = getConfig();
-  const chart2 = getDefaultProps$2(props);
+  const chart2 = getDefaultProps$3(props);
   const {
     data: { datasets } = { datasets: [] },
     options,
@@ -26596,7 +26841,7 @@ const LineChart = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: getClassName(chartStyling, styles$4),
+      className: getClassName(chartStyling, styles$5),
       style: {
         width: chartStyling.width || AUTO,
         height: chartStyling.height || AUTO
@@ -26619,7 +26864,7 @@ const LineChart = (props) => {
             controlsPortalId
           }
         ),
-        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: [
+        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: [
           /* @__PURE__ */ jsx(
             Line,
             {
@@ -26655,7 +26900,7 @@ const LineChart = (props) => {
   );
 };
 const LineChartWithLegend = (props) => {
-  const { options } = getDefaultProps$2(props);
+  const { options } = getDefaultProps$3(props);
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(LineChart, { ...props }) });
 };
 const initializeLineChart = ({ languageKey = "en", ...options }) => {
@@ -26669,73 +26914,73 @@ const initializeLineChart = ({ languageKey = "en", ...options }) => {
     }
   });
 };
-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 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 defaultChartStyling$1 = (styling) => ({
+const defaultChartStyling$2 = (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$2 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
 });
-const defaultGraph$1 = (graph) => ({
+const defaultGraph$2 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
   stacked: (graph == null ? void 0 : graph.stacked) || false,
   cutout: (graph == null ? void 0 : graph.cutout) || 0
 });
-const defaultLegend$1 = (legend2) => ({
+const defaultLegend$2 = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,
   useDataset: (legend2 == null ? void 0 : legend2.useDataset) || false,
   position: (legend2 == null ? void 0 : legend2.position) || Position.Bottom,
   align: (legend2 == null ? void 0 : legend2.align) || AlignOptions.Center
 });
-const defaultChartOptions$1 = (options) => ({
+const defaultChartOptions$2 = (options) => ({
   enableZoom: (options == null ? void 0 : options.enableZoom) || false,
   enablePan: (options == null ? void 0 : options.enablePan) || false
 });
-const defaultInteractions$1 = (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
 });
-const defaultChartData = (data) => {
+const defaultChartData$1 = (data) => {
   return {
     labels: (data == null ? void 0 : data.labels) || [],
     datasets: (data == null ? void 0 : data.datasets) || []
   };
 };
-const getDefaultProps$1 = (props) => {
+const getDefaultProps$2 = (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),
+    data: defaultChartData$1(chart2 == null ? void 0 : chart2.data),
     options: {
       title: (options == null ? void 0 : options.title) || "",
-      chartStyling: defaultChartStyling$1(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$1(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$1(options == null ? void 0 : options.graph),
-      legend: defaultLegend$1(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$1(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$1(options == null ? void 0 : options.interactions)
+      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)
     }
   };
 };
@@ -26923,7 +27168,7 @@ Chart$2.register(
 );
 const PieChart = (props) => {
   setDefaultTheme();
-  const chart2 = getDefaultProps$1(props);
+  const chart2 = getDefaultProps$2(props);
   const chartRef = useRef(null);
   const { data, options, testId } = chart2;
   const {
@@ -26939,8 +27184,8 @@ const PieChart = (props) => {
     "div",
     {
       className: cx(
-        styles$1.chart,
-        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$1.fixedHeight : styles$1.stretchHeight : ""
+        styles$2.chart,
+        !options.chartStyling.width || !options.chartStyling.height ? options.chartStyling.staticChartHeight ? styles$2.fixedHeight : styles$2.stretchHeight : ""
       ),
       style: {
         width: options.chartStyling.width || "auto",
@@ -26984,7 +27229,7 @@ const PieChart = (props) => {
   );
 };
 const PieChartWithLegend = (props) => {
-  const { options } = getDefaultProps$1(props);
+  const { options } = getDefaultProps$2(props);
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(PieChart, { ...props }) });
 };
 /*!
@@ -39573,7 +39818,7 @@ const getBarChartToolTips = (options) => {
       valueUnit: (yAxis == null ? void 0 : yAxis.unit) || ""
     };
   };
-  const titleCallback = (tooltipItems, _data) => {
+  const titleCallback2 = (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);
@@ -39588,7 +39833,7 @@ const getBarChartToolTips = (options) => {
     }
     return displayNumber(roundByMagnitude(labelNumber), roundOptions);
   };
-  const labelCallback = (tooltipItem) => {
+  const labelCallback2 = (tooltipItem) => {
     var _a3;
     const { showLabelsInTooltips = false } = (options == null ? void 0 : options.tooltip) || {};
     let label = ((_a3 = tooltipItem.dataset) == null ? void 0 : _a3.label) || "";
@@ -39630,8 +39875,8 @@ const getBarChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback,
-      label: labelCallback,
+      title: titleCallback2,
+      label: labelCallback2,
       afterLabel: afterLabelCallback
     }
   };
@@ -39674,31 +39919,31 @@ const useBarChartOptions = ({
     }
   };
 };
-const chart = "_chart_x1sru_1";
+const chart$1 = "_chart_x1sru_1";
 const canvas = "_canvas_x1sru_10";
-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 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 actions = "_actions_x1sru_57";
-const styles = {
-  chart,
+const styles$1 = {
+  chart: chart$1,
   canvas,
-  fixedHeight,
-  stretchHeight,
-  zoomForm,
-  zoomReset,
-  help,
-  autoWeight,
+  fixedHeight: fixedHeight$1,
+  stretchHeight: stretchHeight$1,
+  zoomForm: zoomForm$1,
+  zoomReset: zoomReset$1,
+  help: help$1,
+  autoWeight: autoWeight$1,
   actions
 };
-const defaultAxes = (axes) => ({
+const defaultAxes$1 = (axes) => ({
   x: (axes == null ? void 0 : axes.x) || [{}],
   y: (axes == null ? void 0 : axes.y) || [{}]
 });
-const defaultAdditionalAxesOptions = (options) => ({
+const defaultAdditionalAxesOptions$1 = (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,
@@ -39709,30 +39954,30 @@ const defaultAdditionalAxesOptions = (options) => ({
   min: options == null ? void 0 : options.min,
   max: options == null ? void 0 : options.max
 });
-const defaultChartStyling = (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 = (tooltip) => ({
+const defaultTooltip$1 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
 });
-const defaultGraph = (graph) => ({
+const defaultGraph$1 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
 });
-const defaultAnnotationsData = (annotationsData) => {
+const defaultAnnotationsData$1 = (annotationsData) => {
   return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
 };
-const defaultAnnotations = (annotations) => ({
+const defaultAnnotations$1 = (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)
+  annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
 });
-const defaultLegend = (legend2) => ({
+const defaultLegend$1 = (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,
@@ -39741,11 +39986,11 @@ const defaultLegend = (legend2) => ({
     customLegendContainerID: ""
   }
 });
-const defaultChartOptions = (options) => ({
+const defaultChartOptions$1 = (options) => ({
   enableZoom: (options == null ? void 0 : options.enableZoom) || false,
   enablePan: (options == null ? void 0 : options.enablePan) || false
 });
-const defaultInteractions = (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
@@ -39760,7 +40005,7 @@ const defaultDragData = (dragData) => ({
   onDrag: dragData == null ? void 0 : dragData.onDrag,
   onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
 });
-const getDefaultProps = (props) => {
+const getDefaultProps$1 = (props) => {
   const chart2 = (props == null ? void 0 : props.chart) || {};
   const options = (chart2 == null ? void 0 : chart2.options) || {};
   return {
@@ -39769,17 +40014,17 @@ const getDefaultProps = (props) => {
     options: {
       title: (options == null ? void 0 : options.title) || "",
       direction: (options == null ? void 0 : options.direction) || "vertical",
-      axes: defaultAxes(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions(
+      axes: defaultAxes$1(options == null ? void 0 : options.axes),
+      additionalAxesOptions: defaultAdditionalAxesOptions$1(
         options == null ? void 0 : options.additionalAxesOptions
       ),
-      chartStyling: defaultChartStyling(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations(options == null ? void 0 : options.annotations),
-      legend: defaultLegend(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions(options == null ? void 0 : options.interactions),
+      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),
       dragData: defaultDragData(options == null ? void 0 : options.dragData)
     }
   };
@@ -39802,7 +40047,7 @@ const BarChart = (props) => {
   var _a2, _b2, _c2, _d2;
   setDefaultTheme();
   const chartRef = useRef(null);
-  const chart2 = getDefaultProps(props);
+  const chart2 = getDefaultProps$1(props);
   const { translations, languageKey } = getConfig();
   const { options, testId } = chart2;
   const { chartStyling, graph } = options;
@@ -39812,14 +40057,14 @@ const BarChart = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: getClassName(chartStyling, styles),
+      className: getClassName(chartStyling, styles$1),
       style: {
         width: chartStyling.width || AUTO,
         height: chartStyling.height || AUTO
       },
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles$1.actions, children: /* @__PURE__ */ jsx(Tooltip$2, { text: translations.downloadAsPNG, placement: "bottom-end", children: /* @__PURE__ */ jsx(
           Button,
           {
             small: true,
@@ -39830,7 +40075,7 @@ const BarChart = (props) => {
             onClick: () => downloadPgn(chartRef)
           }
         ) }) }),
-        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles.canvas, id: "canvas", children: [
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsxs("div", { className: styles$1.canvas, id: "canvas", children: [
           /* @__PURE__ */ jsx(
             Bar,
             {
@@ -39861,13 +40106,342 @@ const BarChart = (props) => {
   );
 };
 const BarChartWithLegend = (props) => {
-  const { options } = getDefaultProps(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 }) });
+};
 export {
   BarChartWithLegend as BarChart,
   LineChartWithLegend as LineChart,
   PieChartWithLegend as PieChart,
+  ScatterChartWithLegend as ScatterChart,
   initializeLineChart
 };
 //# sourceMappingURL=index.js.map
@@ -39876,7 +40450,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}"));
+      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}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {