@oliasoft-open-source/charts-library 4.2.0 → 4.2.1

package/dist/index.js

@@ -4,7 +4,7 @@ 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";
@@ -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";
@@ -22191,10 +22316,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";
@@ -22413,7 +22538,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];
@@ -22868,7 +22993,7 @@ const DragOptions = ({
 };
 const controls = "_controls_gbo9q_1";
 const buttons = "_buttons_gbo9q_7";
-const styles$3 = {
+const styles$4 = {
   controls,
   buttons
 };
@@ -24327,10 +24452,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,
@@ -24432,11 +24557,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,
@@ -24446,7 +24571,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,
@@ -24460,22 +24585,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: {
@@ -24490,10 +24615,10 @@ const defaultAnnotations$1 = (annotations) => {
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? 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,
@@ -24503,14 +24628,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,
@@ -24526,7 +24651,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 {
@@ -24537,17 +24662,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) ?? {}
     }
@@ -24990,7 +25115,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 };
@@ -25026,21 +25151,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);
@@ -25057,8 +25182,8 @@ const getLineChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback,
-      label: labelCallback,
+      title: titleCallback2,
+      label: labelCallback2,
       afterLabel: afterLabelCallback
     }
   };
@@ -25871,7 +25996,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,
@@ -25901,6 +26026,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=";
@@ -25911,7 +26041,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",
@@ -25943,7 +26073,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,
@@ -25955,7 +26085,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;
@@ -25978,11 +26108,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;
   }
@@ -25996,18 +26126,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 })
       ]
     }
   );
@@ -26074,7 +26204,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;
   }
@@ -26107,13 +26237,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),
@@ -26152,17 +26282,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 }
         }
       )
@@ -26181,7 +26311,7 @@ const LegendDropZones = (legendDropZonesProps) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$2.dropzoneContainer,
+      className: styles$3.dropzoneContainer,
       style: {
         top: top2,
         left: left2,
@@ -26223,7 +26353,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,
       {
@@ -26269,7 +26399,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,
@@ -26316,7 +26446,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
@@ -26339,7 +26469,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,
             {
@@ -26374,7 +26504,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 }) => {
@@ -26388,73 +26518,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)
     }
   };
 };
@@ -26642,7 +26772,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 {
@@ -26658,8 +26788,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",
@@ -26703,7 +26833,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 }) });
 };
 /*!
@@ -39292,7 +39422,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);
@@ -39307,7 +39437,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) || "";
@@ -39349,8 +39479,8 @@ const getBarChartToolTips = (options) => {
     boxHeight: LEGEND_LABEL_BOX_SIZE,
     boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
-      title: titleCallback,
-      label: labelCallback,
+      title: titleCallback2,
+      label: labelCallback2,
       afterLabel: afterLabelCallback
     }
   };
@@ -39393,31 +39523,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,
@@ -39428,30 +39558,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,
@@ -39460,11 +39590,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
@@ -39479,7 +39609,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 {
@@ -39488,17 +39618,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)
     }
   };
@@ -39521,7 +39651,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;
@@ -39531,14 +39661,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,
@@ -39549,7 +39679,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,
             {
@@ -39580,13 +39710,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
@@ -39595,7 +40054,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) {