@oliasoft-open-source/charts-library 4.7.0-beta-5 → 4.7.0-beta-7

package/dist/index.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 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 * as React from "react";
@@ -11,8 +8,8 @@ import React__default, { forwardRef, useRef, useEffect, createContext as createC
 import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
-import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Text, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex } 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, isNil, map as map$3, find, get as get$1 } from "lodash";
+import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex, Text } 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, isNil, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
 /*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
@@ -575,14 +572,14 @@ let Color$1 = class Color {
   }
 };
 /*!
- * Chart.js v4.4.0
+ * Chart.js v4.4.6
  * https://www.chartjs.org
- * (c) 2023 Chart.js Contributors
+ * (c) 2024 Chart.js Contributors
  * Released under the MIT License
  */
 function noop$1() {
 }
-const uid$1 = (() => {
+const uid$1 = /* @__PURE__ */ (() => {
   let id = 0;
   return () => id++;
 })();
@@ -622,11 +619,7 @@ function each$1(loopable, fn, thisArg, reverse) {
   let i2, len, keys;
   if (isArray$1(loopable)) {
     len = loopable.length;
-    if (reverse) {
-      for (i2 = len - 1; i2 >= 0; i2--) {
-        fn.call(thisArg, loopable[i2], i2);
-      }
-    } else {
+    {
       for (i2 = 0; i2 < len; i2++) {
         fn.call(thisArg, loopable[i2], i2);
       }
@@ -1535,6 +1528,9 @@ function _alignPixel$1(chart2, pixel, width) {
   return Math.round((pixel - halfWidth) * devicePixelRatio2) / devicePixelRatio2 + halfWidth;
 }
 function clearCanvas$1(canvas2, ctx) {
+  if (!ctx && !canvas2) {
+    return;
+  }
   ctx = ctx || canvas2.getContext("2d");
   ctx.save();
   ctx.resetTransform();
@@ -1852,7 +1848,6 @@ function toFont$1(options, fallback) {
   return font;
 }
 function resolve$2(inputs, context, index2, info) {
-  let cacheable = true;
   let i2, ilen, value;
   for (i2 = 0, ilen = inputs.length; i2 < ilen; ++i2) {
     value = inputs[i2];
@@ -1861,16 +1856,11 @@ function resolve$2(inputs, context, index2, info) {
     }
     if (context !== void 0 && typeof value === "function") {
       value = value(context);
-      cacheable = false;
     }
     if (index2 !== void 0 && isArray$1(value)) {
       value = value[index2 % value.length];
-      cacheable = false;
     }
     if (value !== void 0) {
-      if (info && !cacheable) {
-        info.cacheable = false;
-      }
       return value;
     }
   }
@@ -2038,7 +2028,7 @@ function _descriptors$1(proxy, defaults2 = {
 const readKey$1 = (prefix, name) => prefix ? prefix + _capitalize$1(name) : name;
 const needsSubResolver$1 = (prop, value) => isObject$2(value) && prop !== "adapters" && (Object.getPrototypeOf(value) === null || value.constructor === Object);
 function _cached$1(target, prop, resolve2) {
-  if (Object.prototype.hasOwnProperty.call(target, prop)) {
+  if (Object.prototype.hasOwnProperty.call(target, prop) || prop === "constructor") {
     return target[prop];
   }
   const value = resolve2();
@@ -2419,7 +2409,7 @@ function getRelativePosition$2(event, chart2) {
 function getContainerSize$1(canvas2, width, height) {
   let maxWidth, maxHeight;
   if (width === void 0 || height === void 0) {
-    const container = _getParentNode$1(canvas2);
+    const container = canvas2 && _getParentNode$1(canvas2);
     if (!container) {
       width = canvas2.clientWidth;
       height = canvas2.clientHeight;
@@ -2501,8 +2491,10 @@ const supportsEventListenerOptions$1 = function() {
         return false;
       }
     };
-    window.addEventListener("test", null, options);
-    window.removeEventListener("test", null, options);
+    if (_isDomSupported$1()) {
+      window.addEventListener("test", null, options);
+      window.removeEventListener("test", null, options);
+    }
   } catch (e2) {
   }
   return passiveSupported;
@@ -2891,9 +2883,9 @@ function styleChanged$1(style, prevStyle) {
   return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
 }
 /*!
- * Chart.js v4.4.0
+ * Chart.js v4.4.6
  * https://www.chartjs.org
- * (c) 2023 Chart.js Contributors
+ * (c) 2024 Chart.js Contributors
  * Released under the MIT License
  */
 let Animator$1 = class Animator {
@@ -3323,9 +3315,11 @@ function applyStack$1(stack, value, dsIndex, options = {}) {
   if (value === null) {
     return;
   }
+  let found = false;
   for (i2 = 0, ilen = keys.length; i2 < ilen; ++i2) {
     datasetIndex = +keys[i2];
     if (datasetIndex === dsIndex) {
+      found = true;
       if (options.all) {
         continue;
       }
@@ -3336,17 +3330,23 @@ function applyStack$1(stack, value, dsIndex, options = {}) {
       value += otherValue;
     }
   }
+  if (!found && !options.all) {
+    return 0;
+  }
   return value;
 }
-function convertObjectDataToArray$1(data) {
+function convertObjectDataToArray$1(data, meta) {
+  const { iScale, vScale } = meta;
+  const iAxisKey = iScale.axis === "x" ? "x" : "y";
+  const vAxisKey = vScale.axis === "x" ? "x" : "y";
   const keys = Object.keys(data);
   const adata = new Array(keys.length);
   let i2, ilen, key;
   for (i2 = 0, ilen = keys.length; i2 < ilen; ++i2) {
     key = keys[i2];
     adata[i2] = {
-      x: key,
-      y: data[key]
+      [iAxisKey]: key,
+      [vAxisKey]: data[key]
     };
   }
   return adata;
@@ -3535,7 +3535,8 @@ let DatasetController$1 = (_a = class {
     const data = dataset.data || (dataset.data = []);
     const _data = this._data;
     if (isObject$2(data)) {
-      this._data = convertObjectDataToArray$1(data);
+      const meta = this._cachedMeta;
+      this._data = convertObjectDataToArray$1(data, meta);
     } else if (_data !== data) {
       if (_data) {
         unlistenArrayEvents$1(_data, this);
@@ -3572,6 +3573,7 @@ let DatasetController$1 = (_a = class {
     this._resyncElements(resetNewElements);
     if (stackChanged || oldStacked !== meta._stacked) {
       updateStacks$1(this, meta._parsed);
+      meta._stacked = isStacked$1(meta.vScale, meta);
     }
   }
   configure() {
@@ -4332,8 +4334,10 @@ let BarController$1 = (_b = class extends DatasetController$1 {
     const metasets = iScale.getMatchingVisibleMetas(this._type).filter((meta) => meta.controller.options.grouped);
     const stacked = iScale.options.stacked;
     const stacks = [];
+    const currentParsed = this._cachedMeta.controller.getParsed(dataIndex);
+    const iScaleValue = currentParsed && currentParsed[iScale.axis];
     const skipNull = (meta) => {
-      const parsed = meta.controller.getParsed(dataIndex);
+      const parsed = meta._parsed.find((item) => item[iScale.axis] === iScaleValue);
       const val = parsed && parsed[meta.vScale.axis];
       if (isNullOrUndef$1(val) || isNaN(val)) {
         return true;
@@ -4472,7 +4476,7 @@ let BarController$1 = (_b = class extends DatasetController$1 {
     const ilen = rects.length;
     let i2 = 0;
     for (; i2 < ilen; ++i2) {
-      if (this.getParsed(i2)[vScale.axis] !== null) {
+      if (this.getParsed(i2)[vScale.axis] !== null && !rects[i2].hidden) {
         rects[i2].draw(this._ctx);
       }
     }
@@ -5223,7 +5227,7 @@ function getAxisItems$1(chart2, position, axis, intersect, useFinalPosition) {
   const rangeMethod = axis === "x" ? "inXRange" : "inYRange";
   let intersectsItem = false;
   evaluateInteractionItems$1(chart2, axis, position, (element, datasetIndex, index2) => {
-    if (element[rangeMethod](position[axis], useFinalPosition)) {
+    if (element[rangeMethod] && element[rangeMethod](position[axis], useFinalPosition)) {
       items.push({
         element,
         datasetIndex,
@@ -5721,10 +5725,14 @@ const eventListenerOptions$1 = supportsEventListenerOptions$1 ? {
   passive: true
 } : false;
 function addListener$1(node, type, listener) {
-  node.addEventListener(type, listener, eventListenerOptions$1);
+  if (node) {
+    node.addEventListener(type, listener, eventListenerOptions$1);
+  }
 }
 function removeListener$1(chart2, type, listener) {
-  chart2.canvas.removeEventListener(type, listener, eventListenerOptions$1);
+  if (chart2 && chart2.canvas) {
+    chart2.canvas.removeEventListener(type, listener, eventListenerOptions$1);
+  }
 }
 function fromNativeEvent$1(event, chart2) {
   const type = EVENT_TYPES$1[event.type] || event.type;
@@ -5917,7 +5925,7 @@ let DomPlatform$1 = class DomPlatform extends BasePlatform$1 {
     return getMaximumSize$1(canvas2, width, height, aspectRatio);
   }
   isAttached(canvas2) {
-    const container = _getParentNode$1(canvas2);
+    const container = canvas2 && _getParentNode$1(canvas2);
     return !!(container && container.isConnected);
   }
 };
@@ -6982,6 +6990,13 @@ let Scale$1 = class Scale extends Element$2 {
           case "right":
             left2 -= width;
             break;
+          case "inner":
+            if (i2 === ilen - 1) {
+              left2 -= width;
+            } else if (i2 > 0) {
+              left2 -= width / 2;
+            }
+            break;
         }
         backdrop = {
           left: left2,
@@ -7949,7 +7964,7 @@ function getResolver$1(resolverCache, scopes, prefixes) {
   }
   return cached;
 }
-const hasFunction$1 = (value) => isObject$2(value) && Object.getOwnPropertyNames(value).reduce((acc, key) => acc || isFunction$1(value[key]), false);
+const hasFunction$1 = (value) => isObject$2(value) && Object.getOwnPropertyNames(value).some((key) => isFunction$1(value[key]));
 function needContext$1(proxy, names2) {
   const { isScriptable, isIndexable: isIndexable2 } = _descriptors$1(proxy);
   for (const prop of names2) {
@@ -7962,7 +7977,7 @@ function needContext$1(proxy, names2) {
   }
   return false;
 }
-var version$3 = "4.4.0";
+var version$3 = "4.4.6";
 const KNOWN_POSITIONS$1 = [
   "top",
   "bottom",
@@ -8487,8 +8502,8 @@ let Chart$2 = (_h = class {
     let i2;
     if (this._resizeBeforeDraw) {
       const { width, height } = this._resizeBeforeDraw;
-      this._resize(width, height);
       this._resizeBeforeDraw = null;
+      this._resize(width, height);
     }
     this.clear();
     if (this.width <= 0 || this.height <= 0) {
@@ -9068,7 +9083,8 @@ let ArcElement$1 = (_i = class extends Element$2 {
     ], useFinalPosition);
     const rAdjust = (this.options.spacing + this.options.borderWidth) / 2;
     const _circumference = valueOrDefault$1(circumference, endAngle - startAngle);
-    const betweenAngles = _circumference >= TAU$1 || _angleBetween$1(angle, startAngle, endAngle);
+    const nonZeroBetween = _angleBetween$1(angle, startAngle, endAngle) && startAngle !== endAngle;
+    const betweenAngles = _circumference >= TAU$1 || nonZeroBetween;
     const withinRadius = _isBetween$1(distance, innerRadius + rAdjust, outerRadius + rAdjust);
     return betweenAngles && withinRadius;
   }
@@ -10941,20 +10957,26 @@ const positioners$2 = {
       return false;
     }
     let i2, len;
-    let x2 = 0;
+    let xSet = /* @__PURE__ */ new Set();
     let y2 = 0;
     let count = 0;
     for (i2 = 0, len = items.length; i2 < len; ++i2) {
       const el = items[i2].element;
       if (el && el.hasValue()) {
         const pos = el.tooltipPosition();
-        x2 += pos.x;
+        xSet.add(pos.x);
         y2 += pos.y;
         ++count;
       }
     }
+    if (count === 0 || xSet.size === 0) {
+      return false;
+    }
+    const xAverage = [
+      ...xSet
+    ].reduce((a2, b2) => a2 + b2) / xSet.size;
     return {
-      x: x2 / count,
+      x: xAverage,
       y: y2 / count
     };
   },
@@ -11769,7 +11791,7 @@ let Tooltip$1 = (_m = class extends Element$2 {
       return [];
     }
     if (!inChartArea) {
-      return lastActive;
+      return lastActive.filter((i2) => this.chart.data.datasets[i2.datasetIndex] && this.chart.getDatasetMeta(i2.datasetIndex).controller.getParsed(i2.index) !== void 0);
     }
     const active = this.chart.getElementsAtEventForMode(e2, options.mode, options, replay);
     if (options.reverse) {
@@ -13015,8 +13037,7 @@ function ChartComponent(props, ref) {
   const canvasRef = useRef(null);
   const chartRef = useRef();
   const renderChart = () => {
-    if (!canvasRef.current)
-      return;
+    if (!canvasRef.current) return;
     chartRef.current = new Chart$2(canvasRef.current, {
       type,
       data: cloneData(data, datasetIdKey),
@@ -13059,8 +13080,7 @@ function ChartComponent(props, ref) {
     data.datasets
   ]);
   useEffect(() => {
-    if (!chartRef.current)
-      return;
+    if (!chartRef.current) return;
     if (redraw) {
       destroyChart();
       setTimeout(renderChart);
@@ -13075,8 +13095,7 @@ function ChartComponent(props, ref) {
     updateMode
   ]);
   useEffect(() => {
-    if (!chartRef.current)
-      return;
+    if (!chartRef.current) return;
     destroyChart();
     setTimeout(renderChart);
   }, [
@@ -13269,17 +13288,15 @@ var hammer = { exports: {} };
       var values = [];
       var i2 = 0;
       while (i2 < src.length) {
-        var val = key ? src[i2][key] : src[i2];
+        var val = src[i2][key];
         if (inArray(values, val) < 0) {
           results.push(src[i2]);
         }
         values[i2] = val;
         i2++;
       }
-      if (sort) {
-        if (!key) {
-          results = results.sort();
-        } else {
+      {
+        {
           results = results.sort(function sortUniqueArray(a2, b2) {
             return a2[key] > b2[key];
           });
@@ -13690,7 +13707,7 @@ var hammer = { exports: {} };
       var all = toArray2(ev.touches);
       var changed = toArray2(ev.changedTouches);
       if (type & (INPUT_END | INPUT_CANCEL)) {
-        all = uniqueArray(all.concat(changed), "identifier", true);
+        all = uniqueArray(all.concat(changed), "identifier");
       }
       return [all, changed];
     }
@@ -13754,7 +13771,7 @@ var hammer = { exports: {} };
       }
       return [
         // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
-        uniqueArray(targetTouches.concat(changedTargetTouches), "identifier", true),
+        uniqueArray(targetTouches.concat(changedTargetTouches), "identifier"),
         changedTargetTouches
       ];
     }
@@ -14894,11 +14911,7 @@ var hammer = { exports: {} };
     });
     var freeGlobal = typeof window2 !== "undefined" ? window2 : typeof self !== "undefined" ? self : {};
     freeGlobal.Hammer = Hammer2;
-    if (typeof undefined$1 === "function" && undefined$1.amd) {
-      undefined$1(function() {
-        return Hammer2;
-      });
-    } else if (module.exports) {
+    if (module.exports) {
       module.exports = Hammer2;
     } else {
       window2[exportName] = Hammer2;
@@ -16814,57 +16827,57 @@ var plugin = {
   }
 };
 /*!
-* chartjs-plugin-annotation v3.0.1
+* chartjs-plugin-annotation v3.1.0
 * https://www.chartjs.org/chartjs-plugin-annotation/index
- * (c) 2023 chartjs-plugin-annotation Contributors
+ * (c) 2024 chartjs-plugin-annotation Contributors
  * Released under the MIT License
  */
 const interaction = {
   modes: {
     /**
      * Point mode returns all elements that hit test based on the event position
-     * @param {Object} state - the state of the plugin
+     * @param {AnnotationElement[]} visibleElements - annotation elements which are visible
      * @param {ChartEvent} event - the event we are find things at
      * @return {AnnotationElement[]} - elements that are found
      */
-    point(state, event) {
-      return filterElements(state, event, { intersect: true });
+    point(visibleElements, event) {
+      return filterElements(visibleElements, event, { intersect: true });
     },
     /**
      * Nearest mode returns the element closest to the event position
-     * @param {Object} state - the state of the plugin
+     * @param {AnnotationElement[]} visibleElements - annotation elements which are visible
      * @param {ChartEvent} event - the event we are find things at
      * @param {Object} options - interaction options to use
      * @return {AnnotationElement[]} - elements that are found (only 1 element)
      */
-    nearest(state, event, options) {
-      return getNearestItem(state, event, options);
+    nearest(visibleElements, event, options) {
+      return getNearestItem(visibleElements, event, options);
     },
     /**
      * x mode returns the elements that hit-test at the current x coordinate
-     * @param {Object} state - the state of the plugin
+     * @param {AnnotationElement[]} visibleElements - annotation elements which are visible
      * @param {ChartEvent} event - the event we are find things at
      * @param {Object} options - interaction options to use
      * @return {AnnotationElement[]} - elements that are found
      */
-    x(state, event, options) {
-      return filterElements(state, event, { intersect: options.intersect, axis: "x" });
+    x(visibleElements, event, options) {
+      return filterElements(visibleElements, event, { intersect: options.intersect, axis: "x" });
     },
     /**
      * y mode returns the elements that hit-test at the current y coordinate
-     * @param {Object} state - the state of the plugin
+     * @param {AnnotationElement[]} visibleElements - annotation elements which are visible
      * @param {ChartEvent} event - the event we are find things at
      * @param {Object} options - interaction options to use
      * @return {AnnotationElement[]} - elements that are found
      */
-    y(state, event, options) {
-      return filterElements(state, event, { intersect: options.intersect, axis: "y" });
+    y(visibleElements, event, options) {
+      return filterElements(visibleElements, event, { intersect: options.intersect, axis: "y" });
     }
   }
 };
-function getElements(state, event, options) {
+function getElements(visibleElements, event, options) {
   const mode = interaction.modes[options.mode] || interaction.modes.nearest;
-  return mode(state, event, options);
+  return mode(visibleElements, event, options);
 }
 function inRangeByAxis(element, event, axis) {
   if (axis !== "x" && axis !== "y") {
@@ -16880,12 +16893,12 @@ function getPointByAxis(event, center, axis) {
   }
   return center;
 }
-function filterElements(state, event, options) {
-  return state.visibleElements.filter((element) => options.intersect ? element.inRange(event.x, event.y) : inRangeByAxis(element, event, options.axis));
+function filterElements(visibleElements, event, options) {
+  return visibleElements.filter((element) => options.intersect ? element.inRange(event.x, event.y) : inRangeByAxis(element, event, options.axis));
 }
-function getNearestItem(state, event, options) {
+function getNearestItem(visibleElements, event, options) {
   let minDistance = Number.POSITIVE_INFINITY;
-  return filterElements(state, event, options).reduce((nearestItems, element) => {
+  return filterElements(visibleElements, event, options).reduce((nearestItems, element) => {
     const center = element.getCenterPoint();
     const evenPoint = getPointByAxis(event, center, options.axis);
     const distance = distanceBetweenPoints$1(event, evenPoint);
@@ -16898,26 +16911,36 @@ function getNearestItem(state, event, options) {
     return nearestItems;
   }, []).sort((a2, b2) => a2._index - b2._index).slice(0, 1);
 }
+function rotated(point, center, angle) {
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const cx2 = center.x;
+  const cy = center.y;
+  return {
+    x: cx2 + cos * (point.x - cx2) - sin * (point.y - cy),
+    y: cy + sin * (point.x - cx2) + cos * (point.y - cy)
+  };
+}
 const isOlderPart = (act, req) => req > act || act.length > req.length && act.slice(0, req.length) === req;
 const EPSILON$1 = 1e-3;
 const clamp = (x2, from2, to2) => Math.min(to2, Math.max(from2, x2));
+const inLimit = (limit, hitSize) => limit.value >= limit.start - hitSize && limit.value <= limit.end + hitSize;
 function clampAll(obj, from2, to2) {
   for (const key of Object.keys(obj)) {
     obj[key] = clamp(obj[key], from2, to2);
   }
   return obj;
 }
-function inPointRange(point, center, radius, borderWidth) {
+function inPointRange(point, center, radius, hitSize) {
   if (!point || !center || radius <= 0) {
     return false;
   }
-  const hBorderWidth = borderWidth / 2;
-  return Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2) <= Math.pow(radius + hBorderWidth, 2);
+  return Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2) <= Math.pow(radius + hitSize, 2);
 }
-function inBoxRange(point, { x: x2, y: y2, x2: x22, y2: y22 }, axis, borderWidth) {
-  const hBorderWidth = borderWidth / 2;
-  const inRangeX = point.x >= x2 - hBorderWidth - EPSILON$1 && point.x <= x22 + hBorderWidth + EPSILON$1;
-  const inRangeY = point.y >= y2 - hBorderWidth - EPSILON$1 && point.y <= y22 + hBorderWidth + EPSILON$1;
+function inBoxRange(point, { x: x2, y: y2, x2: x22, y2: y22 }, axis, { borderWidth, hitTolerance }) {
+  const hitSize = (borderWidth + hitTolerance) / 2;
+  const inRangeX = point.x >= x2 - hitSize - EPSILON$1 && point.x <= x22 + hitSize + EPSILON$1;
+  const inRangeY = point.y >= y2 - hitSize - EPSILON$1 && point.y <= y22 + hitSize + EPSILON$1;
   if (axis === "x") {
     return inRangeX;
   } else if (axis === "y") {
@@ -16925,6 +16948,10 @@ function inBoxRange(point, { x: x2, y: y2, x2: x22, y2: y22 }, axis, borderWidth
   }
   return inRangeX && inRangeY;
 }
+function inLabelRange(point, { rect, center }, axis, { rotation, borderWidth, hitTolerance }) {
+  const rotPoint = rotated(point, center, toRadians$1(-rotation));
+  return inBoxRange(rotPoint, rect, axis, { borderWidth, hitTolerance });
+}
 function getElementCenterPoint(element, useFinalPosition) {
   const { centerX, centerY } = element.getProps(["centerX", "centerY"], useFinalPosition);
   return { x: centerX, y: centerY };
@@ -16953,6 +16980,7 @@ const toPositivePercent = (s2) => clamp(toPercent(s2), 0, 1);
 const boxAppering = (x2, y2) => ({ x: x2, y: y2, x2, y2, width: 0, height: 0 });
 const defaultInitAnimation = {
   box: (properties) => boxAppering(properties.centerX, properties.centerY),
+  doughnutLabel: (properties) => boxAppering(properties.centerX, properties.centerY),
   ellipse: (properties) => ({ centerX: properties.centerX, centerY: properties.centerX, radius: 0, width: 0, height: 0 }),
   label: (properties) => boxAppering(properties.centerX, properties.centerY),
   line: (properties) => boxAppering(properties.x, properties.y),
@@ -16989,6 +17017,24 @@ function calculateTextAlignment(size, options) {
   }
   return x2;
 }
+function measureLabelRectangle(point, labelSize, { borderWidth, position, xAdjust, yAdjust }, padding) {
+  const hasPadding = isObject$2(padding);
+  const width = labelSize.width + (hasPadding ? padding.width : 0) + borderWidth;
+  const height = labelSize.height + (hasPadding ? padding.height : 0) + borderWidth;
+  const positionObj = toPosition(position);
+  const x2 = calculateLabelPosition$1(point.x, width, xAdjust, positionObj.x);
+  const y2 = calculateLabelPosition$1(point.y, height, yAdjust, positionObj.y);
+  return {
+    x: x2,
+    y: y2,
+    x2: x2 + width,
+    y2: y2 + height,
+    width,
+    height,
+    centerX: x2 + width / 2,
+    centerY: y2 + height / 2
+  };
+}
 function toPosition(value, defaultValue = "center") {
   if (isObject$2(value)) {
     return {
@@ -17002,9 +17048,26 @@ function toPosition(value, defaultValue = "center") {
     y: value
   };
 }
+const shouldFit = (options, fitRatio) => options && options.autoFit && fitRatio < 1;
+function toFonts(options, fitRatio) {
+  const optFont = options.font;
+  const fonts = isArray$1(optFont) ? optFont : [optFont];
+  if (shouldFit(options, fitRatio)) {
+    return fonts.map(function(f2) {
+      const font = toFont$1(f2);
+      font.size = Math.floor(f2.size * fitRatio);
+      font.lineHeight = f2.lineHeight;
+      return toFont$1(font);
+    });
+  }
+  return fonts.map((f2) => toFont$1(f2));
+}
 function isBoundToPoint(options) {
   return options && (defined$1(options.xValue) || defined$1(options.yValue));
 }
+function calculateLabelPosition$1(start, size, adjust = 0, position) {
+  return start - getRelativePosition$1(size, position) + adjust;
+}
 function initAnimationProperties(chart2, properties, options) {
   const initAnim = options.init;
   if (!initAnim) {
@@ -17059,10 +17122,10 @@ function translate(ctx, { x: x2, y: y2 }, rotation) {
 }
 function setBorderStyle(ctx, options) {
   if (options && options.borderWidth) {
-    ctx.lineCap = options.borderCapStyle;
+    ctx.lineCap = options.borderCapStyle || "butt";
     ctx.setLineDash(options.borderDash);
     ctx.lineDashOffset = options.borderDashOffset;
-    ctx.lineJoin = options.borderJoinStyle;
+    ctx.lineJoin = options.borderJoinStyle || "miter";
     ctx.lineWidth = options.borderWidth;
     ctx.strokeStyle = options.borderColor;
     return true;
@@ -17077,13 +17140,13 @@ function setShadowStyle(ctx, options) {
 function measureLabelSize$1(ctx, options) {
   const content = options.content;
   if (isImageOrCanvas(content)) {
-    return {
+    const size = {
       width: getSize(content.width, options.width),
       height: getSize(content.height, options.height)
     };
+    return size;
   }
-  const optFont = options.font;
-  const fonts = isArray$1(optFont) ? optFont.map((f2) => toFont$1(f2)) : [toFont$1(optFont)];
+  const fonts = toFonts(options);
   const strokeWidth = options.textStrokeWidth;
   const lines = isArray$1(content) ? content : [content];
   const mapKey = lines.join() + fontsKey(fonts) + strokeWidth + (ctx._measureText ? "-spriting" : "");
@@ -17114,7 +17177,7 @@ function drawBox(ctx, rect, options) {
   }
   ctx.restore();
 }
-function drawLabel(ctx, rect, options) {
+function drawLabel(ctx, rect, options, fitRatio) {
   const content = options.content;
   if (isImageOrCanvas(content)) {
     ctx.save();
@@ -17124,8 +17187,7 @@ function drawLabel(ctx, rect, options) {
     return;
   }
   const labels = isArray$1(content) ? content : [content];
-  const optFont = options.font;
-  const fonts = isArray$1(optFont) ? optFont.map((f2) => toFont$1(f2)) : [toFont$1(optFont)];
+  const fonts = toFonts(options, fitRatio);
   const optColor = options.color;
   const colors2 = isArray$1(optColor) ? optColor : [optColor];
   const x2 = calculateTextAlignment(rect, options);
@@ -17292,6 +17354,118 @@ function getOpacity(value, elementValue) {
   const opacity = isNumber$1(value) ? value : elementValue;
   return isNumber$1(opacity) ? clamp(opacity, 0, 1) : 1;
 }
+const positions$1 = ["left", "bottom", "top", "right"];
+function drawCallout(ctx, element) {
+  const { pointX, pointY, options } = element;
+  const callout = options.callout;
+  const calloutPosition = callout && callout.display && resolveCalloutPosition(element, callout);
+  if (!calloutPosition || isPointInRange(element, callout, calloutPosition)) {
+    return;
+  }
+  ctx.save();
+  ctx.beginPath();
+  const stroke = setBorderStyle(ctx, callout);
+  if (!stroke) {
+    return ctx.restore();
+  }
+  const { separatorStart, separatorEnd } = getCalloutSeparatorCoord(element, calloutPosition);
+  const { sideStart, sideEnd } = getCalloutSideCoord(element, calloutPosition, separatorStart);
+  if (callout.margin > 0 || options.borderWidth === 0) {
+    ctx.moveTo(separatorStart.x, separatorStart.y);
+    ctx.lineTo(separatorEnd.x, separatorEnd.y);
+  }
+  ctx.moveTo(sideStart.x, sideStart.y);
+  ctx.lineTo(sideEnd.x, sideEnd.y);
+  const rotatedPoint = rotated({ x: pointX, y: pointY }, element.getCenterPoint(), toRadians$1(-element.rotation));
+  ctx.lineTo(rotatedPoint.x, rotatedPoint.y);
+  ctx.stroke();
+  ctx.restore();
+}
+function getCalloutSeparatorCoord(element, position) {
+  const { x: x2, y: y2, x2: x22, y2: y22 } = element;
+  const adjust = getCalloutSeparatorAdjust(element, position);
+  let separatorStart, separatorEnd;
+  if (position === "left" || position === "right") {
+    separatorStart = { x: x2 + adjust, y: y2 };
+    separatorEnd = { x: separatorStart.x, y: y22 };
+  } else {
+    separatorStart = { x: x2, y: y2 + adjust };
+    separatorEnd = { x: x22, y: separatorStart.y };
+  }
+  return { separatorStart, separatorEnd };
+}
+function getCalloutSeparatorAdjust(element, position) {
+  const { width, height, options } = element;
+  const adjust = options.callout.margin + options.borderWidth / 2;
+  if (position === "right") {
+    return width + adjust;
+  } else if (position === "bottom") {
+    return height + adjust;
+  }
+  return -adjust;
+}
+function getCalloutSideCoord(element, position, separatorStart) {
+  const { y: y2, width, height, options } = element;
+  const start = options.callout.start;
+  const side = getCalloutSideAdjust(position, options.callout);
+  let sideStart, sideEnd;
+  if (position === "left" || position === "right") {
+    sideStart = { x: separatorStart.x, y: y2 + getSize(height, start) };
+    sideEnd = { x: sideStart.x + side, y: sideStart.y };
+  } else {
+    sideStart = { x: separatorStart.x + getSize(width, start), y: separatorStart.y };
+    sideEnd = { x: sideStart.x, y: sideStart.y + side };
+  }
+  return { sideStart, sideEnd };
+}
+function getCalloutSideAdjust(position, options) {
+  const side = options.side;
+  if (position === "left" || position === "top") {
+    return -side;
+  }
+  return side;
+}
+function resolveCalloutPosition(element, options) {
+  const position = options.position;
+  if (positions$1.includes(position)) {
+    return position;
+  }
+  return resolveCalloutAutoPosition(element, options);
+}
+function resolveCalloutAutoPosition(element, options) {
+  const { x: x2, y: y2, x2: x22, y2: y22, width, height, pointX, pointY, centerX, centerY, rotation } = element;
+  const center = { x: centerX, y: centerY };
+  const start = options.start;
+  const xAdjust = getSize(width, start);
+  const yAdjust = getSize(height, start);
+  const xPoints = [x2, x2 + xAdjust, x2 + xAdjust, x22];
+  const yPoints = [y2 + yAdjust, y22, y2, y22];
+  const result = [];
+  for (let index2 = 0; index2 < 4; index2++) {
+    const rotatedPoint = rotated({ x: xPoints[index2], y: yPoints[index2] }, center, toRadians$1(rotation));
+    result.push({
+      position: positions$1[index2],
+      distance: distanceBetweenPoints$1(rotatedPoint, { x: pointX, y: pointY })
+    });
+  }
+  return result.sort((a2, b2) => a2.distance - b2.distance)[0].position;
+}
+function isPointInRange(element, callout, position) {
+  const { pointX, pointY } = element;
+  const margin = callout.margin;
+  let x2 = pointX;
+  let y2 = pointY;
+  if (position === "left") {
+    x2 += margin;
+  } else if (position === "right") {
+    x2 -= margin;
+  } else if (position === "top") {
+    y2 += margin;
+  } else if (position === "bottom") {
+    y2 -= margin;
+  }
+  return element.inRange(x2, y2);
+}
 const limitedLineScale = {
   xScaleID: { min: "xMin", max: "xMax", start: "left", end: "right", startProp: "x", endProp: "x2" },
   yScaleID: { min: "yMin", max: "yMax", start: "bottom", end: "top", startProp: "y", endProp: "y2" }
@@ -17456,7 +17630,7 @@ function resolveLimitedLineProperties(scales, area, options) {
 }
 function calculateX({ properties, options }, labelSize, position, padding) {
   const { x: start, x2: end, width: size } = properties;
-  return calculatePosition$1({ start, end, size, borderWidth: options.borderWidth }, {
+  return calculatePosition({ start, end, size, borderWidth: options.borderWidth }, {
     position: position.x,
     padding: { start: padding.left, end: padding.right },
     adjust: options.label.xAdjust,
@@ -17465,14 +17639,14 @@ function calculateX({ properties, options }, labelSize, position, padding) {
 }
 function calculateY({ properties, options }, labelSize, position, padding) {
   const { y: start, y2: end, height: size } = properties;
-  return calculatePosition$1({ start, end, size, borderWidth: options.borderWidth }, {
+  return calculatePosition({ start, end, size, borderWidth: options.borderWidth }, {
     position: position.y,
     padding: { start: padding.top, end: padding.bottom },
     adjust: options.label.yAdjust,
     size: labelSize.height
   });
 }
-function calculatePosition$1(boxOpts, labelOpts) {
+function calculatePosition(boxOpts, labelOpts) {
   const { start, end, borderWidth } = boxOpts;
   const { position, padding: { start: padStart, end: padEnd }, adjust } = labelOpts;
   const availableSize = end - borderWidth - start - padStart - padEnd - labelOpts.size;
@@ -17501,22 +17675,11 @@ function resolveLabelElementProperties$1(chart2, properties, options) {
     rotation: label.rotation
   };
 }
-function rotated(point, center, angle) {
-  const cos = Math.cos(angle);
-  const sin = Math.sin(angle);
-  const cx2 = center.x;
-  const cy = center.y;
-  return {
-    x: cx2 + cos * (point.x - cx2) - sin * (point.y - cy),
-    y: cy + sin * (point.x - cx2) + cos * (point.y - cy)
-  };
-}
 const moveHooks = ["enter", "leave"];
 const eventHooks = moveHooks.concat("click");
 function updateListeners(chart2, state, options) {
   state.listened = loadHooks(options, eventHooks, state.listeners);
   state.moveListened = false;
-  state._getElements = getElements;
   moveHooks.forEach((hook) => {
     if (isFunction$1(options[hook])) {
       state.moveListened = true;
@@ -17555,7 +17718,7 @@ function handleMoveEvents(state, event, options) {
   }
   let elements;
   if (event.type === "mousemove") {
-    elements = getElements(state, event, options.interaction);
+    elements = getElements(state.visibleElements, event, options.interaction);
   } else {
     elements = [];
   }
@@ -17576,7 +17739,7 @@ function dispatchMoveEvents({ state, event }, hook, elements, checkElements) {
 }
 function handleClickEvents(state, event, options) {
   const listeners = state.listeners;
-  const elements = getElements(state, event, options.interaction);
+  const elements = getElements(state.visibleElements, event, options.interaction);
   let changed;
   for (const element of elements) {
     changed = dispatchEvent(element.options.click || listeners.click, element, event) || changed;
@@ -17681,7 +17844,7 @@ function updateLimits$1(annotation2, scale, props, limits) {
 class BoxAnnotation extends Element$2 {
   inRange(mouseX, mouseY, axis, useFinalPosition) {
     const { x: x2, y: y2 } = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians$1(-this.options.rotation));
-    return inBoxRange({ x: x2, y: y2 }, this.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis, this.options.borderWidth);
+    return inBoxRange({ x: x2, y: y2 }, this.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis, this.options);
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -17712,6 +17875,7 @@ BoxAnnotation.defaults = {
   borderWidth: 1,
   display: true,
   init: void 0,
+  hitTolerance: 0,
   label: {
     backgroundColor: "transparent",
     borderWidth: 0,
@@ -17730,6 +17894,7 @@ BoxAnnotation.defaults = {
       weight: "bold"
     },
     height: void 0,
+    hitTolerance: void 0,
     opacity: void 0,
     padding: 6,
     position: "center",
@@ -17763,11 +17928,188 @@ BoxAnnotation.descriptors = {
     _fallback: true
   }
 };
-const positions$1 = ["left", "bottom", "top", "right"];
+class DoughnutLabelAnnotation extends Element$2 {
+  inRange(mouseX, mouseY, axis, useFinalPosition) {
+    return inLabelRange(
+      { x: mouseX, y: mouseY },
+      { rect: this.getProps(["x", "y", "x2", "y2"], useFinalPosition), center: this.getCenterPoint(useFinalPosition) },
+      axis,
+      { rotation: this.rotation, borderWidth: 0, hitTolerance: this.options.hitTolerance }
+    );
+  }
+  getCenterPoint(useFinalPosition) {
+    return getElementCenterPoint(this, useFinalPosition);
+  }
+  draw(ctx) {
+    const options = this.options;
+    if (!options.display || !options.content) {
+      return;
+    }
+    drawBackground(ctx, this);
+    ctx.save();
+    translate(ctx, this.getCenterPoint(), this.rotation);
+    drawLabel(ctx, this, options, this._fitRatio);
+    ctx.restore();
+  }
+  resolveElementProperties(chart2, options) {
+    const meta = getDatasetMeta(chart2, options);
+    if (!meta) {
+      return {};
+    }
+    const { controllerMeta, point, radius } = getControllerMeta(chart2, options, meta);
+    let labelSize = measureLabelSize$1(chart2.ctx, options);
+    const _fitRatio = getFitRatio(labelSize, radius);
+    if (shouldFit(options, _fitRatio)) {
+      labelSize = { width: labelSize.width * _fitRatio, height: labelSize.height * _fitRatio };
+    }
+    const { position, xAdjust, yAdjust } = options;
+    const boxSize = measureLabelRectangle(point, labelSize, { borderWidth: 0, position, xAdjust, yAdjust });
+    return {
+      initProperties: initAnimationProperties(chart2, boxSize, options),
+      ...boxSize,
+      ...controllerMeta,
+      rotation: options.rotation,
+      _fitRatio
+    };
+  }
+}
+DoughnutLabelAnnotation.id = "doughnutLabelAnnotation";
+DoughnutLabelAnnotation.defaults = {
+  autoFit: true,
+  autoHide: true,
+  backgroundColor: "transparent",
+  backgroundShadowColor: "transparent",
+  borderColor: "transparent",
+  borderDash: [],
+  borderDashOffset: 0,
+  borderJoinStyle: "miter",
+  borderShadowColor: "transparent",
+  borderWidth: 0,
+  color: "black",
+  content: null,
+  display: true,
+  font: {
+    family: void 0,
+    lineHeight: void 0,
+    size: void 0,
+    style: void 0,
+    weight: void 0
+  },
+  height: void 0,
+  hitTolerance: 0,
+  init: void 0,
+  opacity: void 0,
+  position: "center",
+  rotation: 0,
+  shadowBlur: 0,
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  spacing: 1,
+  textAlign: "center",
+  textStrokeColor: void 0,
+  textStrokeWidth: 0,
+  width: void 0,
+  xAdjust: 0,
+  yAdjust: 0
+};
+DoughnutLabelAnnotation.defaultRoutes = {};
+function getDatasetMeta(chart2, options) {
+  return chart2.getSortedVisibleDatasetMetas().reduce(function(result, value) {
+    const controller = value.controller;
+    if (controller instanceof DoughnutController$1 && isControllerVisible(chart2, options, value.data) && (!result || controller.innerRadius < result.controller.innerRadius) && controller.options.circumference >= 90) {
+      return value;
+    }
+    return result;
+  }, void 0);
+}
+function isControllerVisible(chart2, options, elements) {
+  if (!options.autoHide) {
+    return true;
+  }
+  for (let i2 = 0; i2 < elements.length; i2++) {
+    if (!elements[i2].hidden && chart2.getDataVisibility(i2)) {
+      return true;
+    }
+  }
+}
+function getControllerMeta({ chartArea }, options, meta) {
+  const { left: left2, top: top2, right: right2, bottom: bottom2 } = chartArea;
+  const { innerRadius, offsetX, offsetY } = meta.controller;
+  const x2 = (left2 + right2) / 2 + offsetX;
+  const y2 = (top2 + bottom2) / 2 + offsetY;
+  const square = {
+    left: Math.max(x2 - innerRadius, left2),
+    right: Math.min(x2 + innerRadius, right2),
+    top: Math.max(y2 - innerRadius, top2),
+    bottom: Math.min(y2 + innerRadius, bottom2)
+  };
+  const point = {
+    x: (square.left + square.right) / 2,
+    y: (square.top + square.bottom) / 2
+  };
+  const space = options.spacing + options.borderWidth / 2;
+  const _radius = innerRadius - space;
+  const _counterclockwise = point.y > y2;
+  const side = _counterclockwise ? top2 + space : bottom2 - space;
+  const angles = getAngles(side, x2, y2, _radius);
+  const controllerMeta = {
+    _centerX: x2,
+    _centerY: y2,
+    _radius,
+    _counterclockwise,
+    ...angles
+  };
+  return {
+    controllerMeta,
+    point,
+    radius: Math.min(innerRadius, Math.min(square.right - square.left, square.bottom - square.top) / 2)
+  };
+}
+function getFitRatio({ width, height }, radius) {
+  const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+  return radius * 2 / hypo;
+}
+function getAngles(y2, centerX, centerY, radius) {
+  const yk2 = Math.pow(centerY - y2, 2);
+  const r2 = Math.pow(radius, 2);
+  const b2 = centerX * -2;
+  const c2 = Math.pow(centerX, 2) + yk2 - r2;
+  const delta = Math.pow(b2, 2) - 4 * c2;
+  if (delta <= 0) {
+    return {
+      _startAngle: 0,
+      _endAngle: TAU$1
+    };
+  }
+  const start = (-b2 - Math.sqrt(delta)) / 2;
+  const end = (-b2 + Math.sqrt(delta)) / 2;
+  return {
+    _startAngle: getAngleFromPoint$1({ x: centerX, y: centerY }, { x: start, y: y2 }).angle,
+    _endAngle: getAngleFromPoint$1({ x: centerX, y: centerY }, { x: end, y: y2 }).angle
+  };
+}
+function drawBackground(ctx, element) {
+  const { _centerX, _centerY, _radius, _startAngle, _endAngle, _counterclockwise, options } = element;
+  ctx.save();
+  const stroke = setBorderStyle(ctx, options);
+  ctx.fillStyle = options.backgroundColor;
+  ctx.beginPath();
+  ctx.arc(_centerX, _centerY, _radius, _startAngle, _endAngle, _counterclockwise);
+  ctx.closePath();
+  ctx.fill();
+  if (stroke) {
+    ctx.stroke();
+  }
+  ctx.restore();
+}
 class LabelAnnotation extends Element$2 {
   inRange(mouseX, mouseY, axis, useFinalPosition) {
-    const { x: x2, y: y2 } = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians$1(-this.rotation));
-    return inBoxRange({ x: x2, y: y2 }, this.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis, this.options.borderWidth);
+    return inLabelRange(
+      { x: mouseX, y: mouseY },
+      { rect: this.getProps(["x", "y", "x2", "y2"], useFinalPosition), center: this.getCenterPoint(useFinalPosition) },
+      axis,
+      { rotation: this.rotation, borderWidth: this.options.borderWidth, hitTolerance: this.options.hitTolerance }
+    );
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -17795,7 +18137,7 @@ class LabelAnnotation extends Element$2 {
     }
     const padding = toPadding$1(options.padding);
     const labelSize = measureLabelSize$1(chart2.ctx, options);
-    const boxSize = measureRect(point, labelSize, options, padding);
+    const boxSize = measureLabelRectangle(point, labelSize, options, padding);
     return {
       initProperties: initAnimationProperties(chart2, boxSize, options),
       pointX: point.x,
@@ -17841,6 +18183,7 @@ LabelAnnotation.defaults = {
     weight: void 0
   },
   height: void 0,
+  hitTolerance: 0,
   init: void 0,
   opacity: void 0,
   padding: 6,
@@ -17868,121 +18211,6 @@ LabelAnnotation.defaults = {
 LabelAnnotation.defaultRoutes = {
   borderColor: "color"
 };
-function measureRect(point, size, options, padding) {
-  const width = size.width + padding.width + options.borderWidth;
-  const height = size.height + padding.height + options.borderWidth;
-  const position = toPosition(options.position, "center");
-  const x2 = calculatePosition(point.x, width, options.xAdjust, position.x);
-  const y2 = calculatePosition(point.y, height, options.yAdjust, position.y);
-  return {
-    x: x2,
-    y: y2,
-    x2: x2 + width,
-    y2: y2 + height,
-    width,
-    height,
-    centerX: x2 + width / 2,
-    centerY: y2 + height / 2
-  };
-}
-function calculatePosition(start, size, adjust = 0, position) {
-  return start - getRelativePosition$1(size, position) + adjust;
-}
-function drawCallout(ctx, element) {
-  const { pointX, pointY, options } = element;
-  const callout = options.callout;
-  const calloutPosition = callout && callout.display && resolveCalloutPosition(element, callout);
-  if (!calloutPosition || isPointInRange(element, callout, calloutPosition)) {
-    return;
-  }
-  ctx.save();
-  ctx.beginPath();
-  const stroke = setBorderStyle(ctx, callout);
-  if (!stroke) {
-    return ctx.restore();
-  }
-  const { separatorStart, separatorEnd } = getCalloutSeparatorCoord(element, calloutPosition);
-  const { sideStart, sideEnd } = getCalloutSideCoord(element, calloutPosition, separatorStart);
-  if (callout.margin > 0 || options.borderWidth === 0) {
-    ctx.moveTo(separatorStart.x, separatorStart.y);
-    ctx.lineTo(separatorEnd.x, separatorEnd.y);
-  }
-  ctx.moveTo(sideStart.x, sideStart.y);
-  ctx.lineTo(sideEnd.x, sideEnd.y);
-  const rotatedPoint = rotated({ x: pointX, y: pointY }, element.getCenterPoint(), toRadians$1(-element.rotation));
-  ctx.lineTo(rotatedPoint.x, rotatedPoint.y);
-  ctx.stroke();
-  ctx.restore();
-}
-function getCalloutSeparatorCoord(element, position) {
-  const { x: x2, y: y2, x2: x22, y2: y22 } = element;
-  const adjust = getCalloutSeparatorAdjust(element, position);
-  let separatorStart, separatorEnd;
-  if (position === "left" || position === "right") {
-    separatorStart = { x: x2 + adjust, y: y2 };
-    separatorEnd = { x: separatorStart.x, y: y22 };
-  } else {
-    separatorStart = { x: x2, y: y2 + adjust };
-    separatorEnd = { x: x22, y: separatorStart.y };
-  }
-  return { separatorStart, separatorEnd };
-}
-function getCalloutSeparatorAdjust(element, position) {
-  const { width, height, options } = element;
-  const adjust = options.callout.margin + options.borderWidth / 2;
-  if (position === "right") {
-    return width + adjust;
-  } else if (position === "bottom") {
-    return height + adjust;
-  }
-  return -adjust;
-}
-function getCalloutSideCoord(element, position, separatorStart) {
-  const { y: y2, width, height, options } = element;
-  const start = options.callout.start;
-  const side = getCalloutSideAdjust(position, options.callout);
-  let sideStart, sideEnd;
-  if (position === "left" || position === "right") {
-    sideStart = { x: separatorStart.x, y: y2 + getSize(height, start) };
-    sideEnd = { x: sideStart.x + side, y: sideStart.y };
-  } else {
-    sideStart = { x: separatorStart.x + getSize(width, start), y: separatorStart.y };
-    sideEnd = { x: sideStart.x, y: sideStart.y + side };
-  }
-  return { sideStart, sideEnd };
-}
-function getCalloutSideAdjust(position, options) {
-  const side = options.side;
-  if (position === "left" || position === "top") {
-    return -side;
-  }
-  return side;
-}
-function resolveCalloutPosition(element, options) {
-  const position = options.position;
-  if (positions$1.includes(position)) {
-    return position;
-  }
-  return resolveCalloutAutoPosition(element, options);
-}
-function resolveCalloutAutoPosition(element, options) {
-  const { x: x2, y: y2, x2: x22, y2: y22, width, height, pointX, pointY, centerX, centerY, rotation } = element;
-  const center = { x: centerX, y: centerY };
-  const start = options.start;
-  const xAdjust = getSize(width, start);
-  const yAdjust = getSize(height, start);
-  const xPoints = [x2, x2 + xAdjust, x2 + xAdjust, x22];
-  const yPoints = [y2 + yAdjust, y22, y2, y22];
-  const result = [];
-  for (let index2 = 0; index2 < 4; index2++) {
-    const rotatedPoint = rotated({ x: xPoints[index2], y: yPoints[index2] }, center, toRadians$1(rotation));
-    result.push({
-      position: positions$1[index2],
-      distance: distanceBetweenPoints$1(rotatedPoint, { x: pointX, y: pointY })
-    });
-  }
-  return result.sort((a2, b2) => a2.distance - b2.distance)[0].position;
-}
 function getLabelSize({ x: x2, y: y2, width, height, options }) {
   const hBorderWidth = options.borderWidth / 2;
   const padding = toPadding$1(options.padding);
@@ -17993,22 +18221,6 @@ function getLabelSize({ x: x2, y: y2, width, height, options }) {
     height: height - padding.top - padding.bottom - options.borderWidth
   };
 }
-function isPointInRange(element, callout, position) {
-  const { pointX, pointY } = element;
-  const margin = callout.margin;
-  let x2 = pointX;
-  let y2 = pointY;
-  if (position === "left") {
-    x2 += margin;
-  } else if (position === "right") {
-    x2 -= margin;
-  } else if (position === "top") {
-    y2 += margin;
-  } else if (position === "bottom") {
-    y2 -= margin;
-  }
-  return element.inRange(x2, y2);
-}
 const pointInLine = (p1, p2, t) => ({ x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y) });
 const interpolateX = (y2, p1, p2) => pointInLine(p1, p2, Math.abs((y2 - p1.y) / (p2.y - p1.y))).x;
 const interpolateY = (x2, p1, p2) => pointInLine(p1, p2, Math.abs((x2 - p1.x) / (p2.x - p1.x))).y;
@@ -18020,12 +18232,13 @@ const coordAngleInCurve = (start, cp, end, t) => 2 * (1 - t) * (cp - start) + 2
 const angleInCurve = (start, cp, end, t) => -Math.atan2(coordAngleInCurve(start.x, cp.x, end.x, t), coordAngleInCurve(start.y, cp.y, end.y, t)) + 0.5 * PI$1;
 class LineAnnotation extends Element$2 {
   inRange(mouseX, mouseY, axis, useFinalPosition) {
-    const hBorderWidth = this.options.borderWidth / 2;
+    const hitSize = (this.options.borderWidth + this.options.hitTolerance) / 2;
     if (axis !== "x" && axis !== "y") {
       const point = { mouseX, mouseY };
       const { path, ctx } = this;
       if (path) {
         setBorderStyle(ctx, this.options);
+        ctx.lineWidth += this.options.hitTolerance;
         const { chart: chart2 } = this.$context;
         const mx = mouseX * chart2.currentDevicePixelRatio;
         const my = mouseY * chart2.currentDevicePixelRatio;
@@ -18033,10 +18246,10 @@ class LineAnnotation extends Element$2 {
         ctx.restore();
         return result;
       }
-      const epsilon = sqr(hBorderWidth);
+      const epsilon = sqr(hitSize);
       return intersects(this, point, epsilon, useFinalPosition) || isOnLabel(this, point, useFinalPosition);
     }
-    return inAxisRange(this, { mouseX, mouseY }, axis, { hBorderWidth, useFinalPosition });
+    return inAxisRange(this, { mouseX, mouseY }, axis, { hitSize, useFinalPosition });
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -18131,6 +18344,7 @@ LineAnnotation.defaults = {
   display: true,
   endValue: void 0,
   init: void 0,
+  hitTolerance: 0,
   label: {
     backgroundColor: "rgba(0,0,0,0.8)",
     backgroundShadowColor: "transparent",
@@ -18155,6 +18369,7 @@ LineAnnotation.defaults = {
       weight: "bold"
     },
     height: void 0,
+    hitTolerance: void 0,
     opacity: void 0,
     padding: 6,
     position: "center",
@@ -18197,9 +18412,9 @@ LineAnnotation.descriptors = {
 LineAnnotation.defaultRoutes = {
   borderColor: "color"
 };
-function inAxisRange(element, { mouseX, mouseY }, axis, { hBorderWidth, useFinalPosition }) {
+function inAxisRange(element, { mouseX, mouseY }, axis, { hitSize, useFinalPosition }) {
   const limit = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
-  return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
+  return inLimit(limit, hitSize) || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
 }
 function isLineInArea({ x: x2, y: y2, x2: x22, y2: y22 }, { top: top2, right: right2, bottom: bottom2, left: left2 }) {
   return !(x2 < left2 && x22 < left2 || x2 > right2 && x22 > right2 || y2 < top2 && y22 < top2 || y2 > bottom2 && y22 > bottom2);
@@ -18432,15 +18647,14 @@ function drawCurve(ctx, element, cp, length) {
 class EllipseAnnotation extends Element$2 {
   inRange(mouseX, mouseY, axis, useFinalPosition) {
     const rotation = this.options.rotation;
-    const borderWidth = this.options.borderWidth;
+    const hitSize = (this.options.borderWidth + this.options.hitTolerance) / 2;
     if (axis !== "x" && axis !== "y") {
-      return pointInEllipse({ x: mouseX, y: mouseY }, this.getProps(["width", "height", "centerX", "centerY"], useFinalPosition), rotation, borderWidth);
+      return pointInEllipse({ x: mouseX, y: mouseY }, this.getProps(["width", "height", "centerX", "centerY"], useFinalPosition), rotation, hitSize);
     }
     const { x: x2, y: y2, x2: x22, y2: y22 } = this.getProps(["x", "y", "x2", "y2"], useFinalPosition);
-    const hBorderWidth = borderWidth / 2;
     const limit = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
     const rotatedPoint = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians$1(-rotation));
-    return rotatedPoint[axis] >= limit.start - hBorderWidth - EPSILON$1 && rotatedPoint[axis] <= limit.end + hBorderWidth + EPSILON$1;
+    return rotatedPoint[axis] >= limit.start - hitSize - EPSILON$1 && rotatedPoint[axis] <= limit.end + hitSize + EPSILON$1;
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -18477,6 +18691,7 @@ EllipseAnnotation.defaults = {
   borderShadowColor: "transparent",
   borderWidth: 1,
   display: true,
+  hitTolerance: 0,
   init: void 0,
   label: Object.assign({}, BoxAnnotation.defaults.label),
   rotation: 0,
@@ -18500,7 +18715,7 @@ EllipseAnnotation.descriptors = {
     _fallback: true
   }
 };
-function pointInEllipse(p2, ellipse, rotation, borderWidth) {
+function pointInEllipse(p2, ellipse, rotation, hitSize) {
   const { width, height, centerX, centerY } = ellipse;
   const xRadius = width / 2;
   const yRadius = height / 2;
@@ -18508,23 +18723,21 @@ function pointInEllipse(p2, ellipse, rotation, borderWidth) {
     return false;
   }
   const angle = toRadians$1(rotation || 0);
-  const hBorderWidth = borderWidth / 2 || 0;
   const cosAngle = Math.cos(angle);
   const sinAngle = Math.sin(angle);
   const a2 = Math.pow(cosAngle * (p2.x - centerX) + sinAngle * (p2.y - centerY), 2);
   const b2 = Math.pow(sinAngle * (p2.x - centerX) - cosAngle * (p2.y - centerY), 2);
-  return a2 / Math.pow(xRadius + hBorderWidth, 2) + b2 / Math.pow(yRadius + hBorderWidth, 2) <= 1.0001;
+  return a2 / Math.pow(xRadius + hitSize, 2) + b2 / Math.pow(yRadius + hitSize, 2) <= 1.0001;
 }
 class PointAnnotation extends Element$2 {
   inRange(mouseX, mouseY, axis, useFinalPosition) {
     const { x: x2, y: y2, x2: x22, y2: y22, width } = this.getProps(["x", "y", "x2", "y2", "width"], useFinalPosition);
-    const borderWidth = this.options.borderWidth;
+    const hitSize = (this.options.borderWidth + this.options.hitTolerance) / 2;
     if (axis !== "x" && axis !== "y") {
-      return inPointRange({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), width / 2, borderWidth);
+      return inPointRange({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), width / 2, hitSize);
     }
-    const hBorderWidth = borderWidth / 2;
     const limit = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
-    return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth;
+    return inLimit(limit, hitSize);
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -18562,6 +18775,7 @@ PointAnnotation.defaults = {
   borderShadowColor: "transparent",
   borderWidth: 1,
   display: true,
+  hitTolerance: 0,
   init: void 0,
   pointStyle: "circle",
   radius: 10,
@@ -18649,6 +18863,7 @@ PolygonAnnotation.defaults = {
   borderShadowColor: "transparent",
   borderWidth: 1,
   display: true,
+  hitTolerance: 0,
   init: void 0,
   point: {
     radius: 0
@@ -18675,8 +18890,8 @@ PolygonAnnotation.defaultRoutes = {
   borderColor: "color",
   backgroundColor: "color"
 };
-function buildPointElement({ centerX, centerY }, { radius, borderWidth }, rad) {
-  const halfBorder = borderWidth / 2;
+function buildPointElement({ centerX, centerY }, { radius, borderWidth, hitTolerance }, rad) {
+  const hitSize = (borderWidth + hitTolerance) / 2;
   const sin = Math.sin(rad);
   const cos = Math.cos(rad);
   const point = { x: centerX + sin * radius, y: centerY - cos * radius };
@@ -18688,8 +18903,8 @@ function buildPointElement({ centerX, centerY }, { radius, borderWidth }, rad) {
       y: point.y,
       centerX: point.x,
       centerY: point.y,
-      bX: centerX + sin * (radius + halfBorder),
-      bY: centerY - cos * (radius + halfBorder)
+      bX: centerX + sin * (radius + hitSize),
+      bY: centerY - cos * (radius + hitSize)
     }
   };
 }
@@ -18707,6 +18922,7 @@ function pointIsInPolygon(points, x2, y2, useFinalPosition) {
 }
 const annotationTypes = {
   box: BoxAnnotation,
+  doughnutLabel: DoughnutLabelAnnotation,
   ellipse: EllipseAnnotation,
   label: LabelAnnotation,
   line: LineAnnotation,
@@ -18738,7 +18954,7 @@ function updateElements(chart2, state, options, mode) {
   for (let i2 = 0; i2 < annotations.length; i2++) {
     const annotationOptions = annotations[i2];
     const element = getOrCreateElement(elements, i2, annotationOptions.type);
-    const resolver = annotationOptions.setContext(getContext(chart2, element, annotationOptions));
+    const resolver = annotationOptions.setContext(getContext(chart2, element, elements, annotationOptions));
     const properties = element.resolveElementProperties(chart2, resolver);
     properties.skip = toSkip(properties);
     if ("elements" in properties) {
@@ -18812,9 +19028,12 @@ function resolveObj(resolver, defs) {
   }
   return result;
 }
-function getContext(chart2, element, annotation2) {
+function getContext(chart2, element, elements, annotation2) {
   return element.$context || (element.$context = Object.assign(Object.create(chart2.getContext()), {
     element,
+    get elements() {
+      return elements.filter((el) => el && el.options);
+    },
     id: annotation2.id,
     type: "annotation"
   }));
@@ -18830,8 +19049,9 @@ function resyncElements(elements, annotations) {
   }
   return elements;
 }
-var version$1 = "3.0.1";
+var version$1 = "3.1.0";
 const chartStates = /* @__PURE__ */ new Map();
+const isNotDoughnutLabel = (annotation2) => annotation2.type !== "doughnutLabel";
 const hooks = eventHooks.concat(elementHooks);
 var annotation = {
   id: "annotation",
@@ -18873,11 +19093,11 @@ var annotation = {
     } else if (isArray$1(annotationOptions)) {
       annotations.push(...annotationOptions);
     }
-    verifyScaleOptions(annotations, chart2.scales);
+    verifyScaleOptions(annotations.filter(isNotDoughnutLabel), chart2.scales);
   },
   afterDataLimits(chart2, args) {
     const state = chartStates.get(chart2);
-    adjustScaleRange(chart2, args.scale, state.annotations.filter((a2) => a2.display && a2.adjustScaleRange));
+    adjustScaleRange(chart2, args.scale, state.annotations.filter(isNotDoughnutLabel).filter((a2) => a2.display && a2.adjustScaleRange));
   },
   afterUpdate(chart2, args, options) {
     const state = chartStates.get(chart2);
@@ -18892,6 +19112,9 @@ var annotation = {
   afterDatasetsDraw(chart2, _args, options) {
     draw$1(chart2, "afterDatasetsDraw", options.clip);
   },
+  beforeDatasetDraw(chart2, _args, options) {
+    draw$1(chart2, _args.index, options.clip);
+  },
   beforeDraw(chart2, _args, options) {
     draw$1(chart2, "beforeDraw", options.clip);
   },
@@ -18907,14 +19130,23 @@ var annotation = {
   afterDestroy(chart2) {
     chartStates.delete(chart2);
   },
-  _getState(chart2) {
-    return chartStates.get(chart2);
+  getAnnotations(chart2) {
+    const state = chartStates.get(chart2);
+    return state ? state.elements : [];
+  },
+  // only for testing
+  _getAnnotationElementsAtEventForMode(visibleElements, event, options) {
+    return getElements(visibleElements, event, options);
   },
   defaults: {
     animations: {
       numbers: {
         properties: ["x", "y", "x2", "y2", "width", "height", "centerX", "centerY", "pointX", "pointY", "radius"],
         type: "number"
+      },
+      colors: {
+        properties: ["backgroundColor", "borderColor"],
+        type: "color"
       }
     },
     clip: true,
@@ -19009,8 +19241,7 @@ var ActionTypes = {
   }
 };
 function isPlainObject(obj) {
-  if (typeof obj !== "object" || obj === null)
-    return false;
+  if (typeof obj !== "object" || obj === null) return false;
   var proto = obj;
   while (Object.getPrototypeOf(proto) !== null) {
     proto = Object.getPrototypeOf(proto);
@@ -19018,10 +19249,8 @@ function isPlainObject(obj) {
   return Object.getPrototypeOf(obj) === proto;
 }
 function miniKindOf(val) {
-  if (val === void 0)
-    return "undefined";
-  if (val === null)
-    return "null";
+  if (val === void 0) return "undefined";
+  if (val === null) return "null";
   var type = typeof val;
   switch (type) {
     case "boolean":
@@ -19032,12 +19261,9 @@ function miniKindOf(val) {
       return type;
     }
   }
-  if (Array.isArray(val))
-    return "array";
-  if (isDate(val))
-    return "date";
-  if (isError(val))
-    return "error";
+  if (Array.isArray(val)) return "array";
+  if (isDate(val)) return "date";
+  if (isError(val)) return "error";
   var constructorName = ctorName(val);
   switch (constructorName) {
     case "Symbol":
@@ -19057,8 +19283,7 @@ function isError(val) {
   return val instanceof Error || typeof val.message === "string" && val.constructor && typeof val.constructor.stackTraceLimit === "number";
 }
 function isDate(val) {
-  if (val instanceof Date)
-    return true;
+  if (val instanceof Date) return true;
   return typeof val.toDateString === "function" && typeof val.getDate === "function" && typeof val.setDate === "function";
 }
 function kindOf(val) {
@@ -20352,33 +20577,28 @@ function makeStoreInstance(debugMode) {
   }));
 }
 function _objectWithoutProperties(source, excluded) {
-  if (source == null)
-    return {};
+  if (source == null) return {};
   var target = _objectWithoutPropertiesLoose(source, excluded);
   var key, i2;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
     for (i2 = 0; i2 < sourceSymbolKeys.length; i2++) {
       key = sourceSymbolKeys[i2];
-      if (excluded.indexOf(key) >= 0)
-        continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key))
-        continue;
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
       target[key] = source[key];
     }
   }
   return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null)
-    return {};
+  if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i2;
   for (i2 = 0; i2 < sourceKeys.length; i2++) {
     key = sourceKeys[i2];
-    if (excluded.indexOf(key) >= 0)
-      continue;
+    if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
   return target;
@@ -20437,45 +20657,35 @@ function getGlobalContext() {
   return typeof global !== "undefined" ? global : window;
 }
 var fastDeepEqual = function equal(a2, b2) {
-  if (a2 === b2)
-    return true;
+  if (a2 === b2) return true;
   if (a2 && b2 && typeof a2 == "object" && typeof b2 == "object") {
-    if (a2.constructor !== b2.constructor)
-      return false;
+    if (a2.constructor !== b2.constructor) return false;
     var length, i2, keys;
     if (Array.isArray(a2)) {
       length = a2.length;
-      if (length != b2.length)
-        return false;
+      if (length != b2.length) return false;
       for (i2 = length; i2-- !== 0; )
-        if (!equal(a2[i2], b2[i2]))
-          return false;
+        if (!equal(a2[i2], b2[i2])) return false;
       return true;
     }
-    if (a2.constructor === RegExp)
-      return a2.source === b2.source && a2.flags === b2.flags;
-    if (a2.valueOf !== Object.prototype.valueOf)
-      return a2.valueOf() === b2.valueOf();
-    if (a2.toString !== Object.prototype.toString)
-      return a2.toString() === b2.toString();
+    if (a2.constructor === RegExp) return a2.source === b2.source && a2.flags === b2.flags;
+    if (a2.valueOf !== Object.prototype.valueOf) return a2.valueOf() === b2.valueOf();
+    if (a2.toString !== Object.prototype.toString) return a2.toString() === b2.toString();
     keys = Object.keys(a2);
     length = keys.length;
-    if (length !== Object.keys(b2).length)
-      return false;
+    if (length !== Object.keys(b2).length) return false;
     for (i2 = length; i2-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(b2, keys[i2]))
-        return false;
+      if (!Object.prototype.hasOwnProperty.call(b2, keys[i2])) return false;
     for (i2 = length; i2-- !== 0; ) {
       var key = keys[i2];
-      if (!equal(a2[key], b2[key]))
-        return false;
+      if (!equal(a2[key], b2[key])) return false;
     }
     return true;
   }
   return a2 !== a2 && b2 !== b2;
 };
 const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqual);
-const useIsomorphicLayoutEffect$2 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useCollector(monitor, collect, onUpdate) {
   const [collected, setCollected] = useState(
     () => collect(monitor)
@@ -20493,7 +20703,7 @@ function useCollector(monitor, collect, onUpdate) {
     monitor,
     onUpdate
   ]);
-  useIsomorphicLayoutEffect$2(updateCollected);
+  useIsomorphicLayoutEffect$1(updateCollected);
   return [
     collected,
     updateCollected
@@ -20501,7 +20711,7 @@ function useCollector(monitor, collect, onUpdate) {
 }
 function useMonitorOutput(monitor, collect, onCollect) {
   const [collected, updateCollected] = useCollector(monitor, collect, onCollect);
-  useIsomorphicLayoutEffect$2(function subscribeToMonitorStateChange() {
+  useIsomorphicLayoutEffect$1(function subscribeToMonitorStateChange() {
     const handlerId = monitor.getHandlerId();
     if (handlerId == null) {
       return;
@@ -20526,9 +20736,9 @@ function useCollectedProps(collector, monitor, connector) {
 }
 function useOptionalFactory(arg, deps) {
   const memoDeps = [
-    ...deps || []
+    ...[]
   ];
-  if (deps == null && typeof arg !== "function") {
+  if (typeof arg !== "function") {
     memoDeps.push(arg);
   }
   return useMemo(() => {
@@ -20718,7 +20928,7 @@ function registerSource(type, source, manager) {
   ];
 }
 function shallowEqual(objA, objB, compare, compareContext) {
-  let compareResult = compare ? compare.call(compareContext, objA, objB) : void 0;
+  let compareResult = void 0;
   if (compareResult !== void 0) {
     return !!compareResult;
   }
@@ -20741,7 +20951,7 @@ function shallowEqual(objA, objB, compare, compareContext) {
     }
     const valueA = objA[key];
     const valueB = objB[key];
-    compareResult = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
+    compareResult = void 0;
     if (compareResult === false || compareResult === void 0 && valueA !== valueB) {
       return false;
     }
@@ -21051,7 +21261,7 @@ function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
       manager
     ]
   );
-  useIsomorphicLayoutEffect$2(() => {
+  useIsomorphicLayoutEffect$1(() => {
     connector.dragSourceOptions = dragSourceOptions || null;
     connector.reconnect();
     return () => connector.disconnectDragSource();
@@ -21059,7 +21269,7 @@ function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
     connector,
     dragSourceOptions
   ]);
-  useIsomorphicLayoutEffect$2(() => {
+  useIsomorphicLayoutEffect$1(() => {
     connector.dragPreviewOptions = dragPreviewOptions || null;
     connector.reconnect();
     return () => connector.disconnectDragPreview();
@@ -21153,7 +21363,7 @@ function useRegisteredDragSource(spec, monitor, connector) {
   const manager = useDragDropManager();
   const handler = useDragSource(spec, monitor, connector);
   const itemType = useDragType(spec);
-  useIsomorphicLayoutEffect$2(function registerDragSource() {
+  useIsomorphicLayoutEffect$1(function registerDragSource() {
     if (itemType != null) {
       const [handlerId, unregister] = registerSource(itemType, handler, manager);
       monitor.receiveHandlerId(handlerId);
@@ -21170,7 +21380,7 @@ function useRegisteredDragSource(spec, monitor, connector) {
   ]);
 }
 function useDrag(specArg, deps) {
-  const spec = useOptionalFactory(specArg, deps);
+  const spec = useOptionalFactory(specArg);
   invariant(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`);
   const monitor = useDragSourceMonitor();
   const connector = useDragSourceConnector(spec.options, spec.previewOptions);
@@ -21197,7 +21407,7 @@ function useDropTargetConnector(options) {
       manager
     ]
   );
-  useIsomorphicLayoutEffect$2(() => {
+  useIsomorphicLayoutEffect$1(() => {
     connector.dropTargetOptions = options || null;
     connector.reconnect();
     return () => connector.disconnectDropTarget();
@@ -21270,7 +21480,7 @@ function useRegisteredDropTarget(spec, monitor, connector) {
   const manager = useDragDropManager();
   const dropTarget = useDropTarget(spec, monitor);
   const accept = useAccept(spec);
-  useIsomorphicLayoutEffect$2(function registerDropTarget() {
+  useIsomorphicLayoutEffect$1(function registerDropTarget() {
     const [handlerId, unregister] = registerTarget(accept, dropTarget, manager);
     monitor.receiveHandlerId(handlerId);
     connector.receiveHandlerId(handlerId);
@@ -21286,7 +21496,7 @@ function useRegisteredDropTarget(spec, monitor, connector) {
   ]);
 }
 function useDrop(specArg, deps) {
-  const spec = useOptionalFactory(specArg, deps);
+  const spec = useOptionalFactory(specArg);
   const monitor = useDropTargetMonitor();
   const connector = useDropTargetConnector(spec.options);
   useRegisteredDropTarget(spec, monitor, connector);
@@ -22367,6 +22577,9 @@ var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
 })(AnnotationType$1 || {});
 var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
   PointStyle2["Circle"] = "circle";
+  PointStyle2["Square"] = "rect";
+  PointStyle2["Diamond"] = "rectRot";
+  PointStyle2["Triangle"] = "triangle";
   return PointStyle2;
 })(PointStyle || {});
 var ChartHoverMode = /* @__PURE__ */ ((ChartHoverMode2) => {
@@ -22397,8 +22610,7 @@ const MINOR_TICKS_PER_MAJOR = 10;
 const getLargestMajorTickWidth = (majorTickPositions) => {
   return majorTickPositions.reduce(
     (acc, curr, index2) => {
-      if (index2 === 0)
-        return acc;
+      if (index2 === 0) return acc;
       const gap = Math.abs(curr - majorTickPositions[index2 - 1]);
       return Math.max(gap, acc);
     },
@@ -22434,10 +22646,8 @@ const drawMinorTicksForScale = (scale) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
   const { chart: chart2, ctx } = scale;
   const config2 = chart2.config;
-  if (!((_d2 = (_c2 = (_b2 = (_a2 = config2 == null ? void 0 : config2.options) == null ? void 0 : _a2.scales) == null ? void 0 : _b2[scale.id]) == null ? void 0 : _c2.grid) == null ? void 0 : _d2.drawOnChartArea))
-    return;
-  if (config2.options.indexAxis === scale.axis)
-    return;
+  if (!((_d2 = (_c2 = (_b2 = (_a2 = config2 == null ? void 0 : config2.options) == null ? void 0 : _a2.scales) == null ? void 0 : _b2[scale.id]) == null ? void 0 : _c2.grid) == null ? void 0 : _d2.drawOnChartArea)) return;
+  if (config2.options.indexAxis === scale.axis) return;
   const isHorizontal = scale.axis === "x";
   const majorTickPositions = scale.ticks.map((_2, index2) => scale.getPixelForTick(index2)).sort((a2, b2) => a2 - b2);
   const minorTickPositions = getMinorTickPositions(majorTickPositions, scale);
@@ -22678,13 +22888,11 @@ const generateKey = (values) => {
 };
 const isPrimitiveValue = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
 const isRangeValid = (r2) => {
-  if (!r2)
-    return false;
+  if (!r2) return false;
   return Object.values(r2).some((value) => !isNilOrEmpty(value));
 };
 const getChartStateFromStorage = (persistenceId) => {
-  if (!persistenceId)
-    return null;
+  if (!persistenceId) return null;
   const chartStateKey = `line-chart-state-${persistenceId}`;
   const chartStateObjectJSON = localStorage.getItem(chartStateKey);
   if (chartStateObjectJSON) {
@@ -22714,8 +22922,7 @@ const removeExpiredChartStates = (maxAgeInHours = 72) => {
   }
 };
 const storeChartStateInStorage = (state, persistenceId) => {
-  if (!persistenceId)
-    return;
+  if (!persistenceId) return;
   const currentTime = (/* @__PURE__ */ new Date()).getTime();
   const chartStateKey = `line-chart-state-${persistenceId}`;
   const chartStateObject = {
@@ -22808,7 +23015,6 @@ var noop = function() {
 };
 var isBrowser = typeof window !== "undefined";
 var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
 var defaultState = {
   x: 0,
   y: 0,
@@ -22830,7 +23036,7 @@ function useMeasure() {
       }
     });
   }, []);
-  useIsomorphicLayoutEffect$1(function() {
+  useIsomorphicLayoutEffect(function() {
     if (!element)
       return;
     observer.observe(element);
@@ -22860,10 +23066,8 @@ function getLineOptions({
       icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
-        if (!pointsEnabled)
-          onTogglePoints();
-        if (!lineEnabled)
-          onToggleLine();
+        if (!pointsEnabled) onTogglePoints();
+        if (!lineEnabled) onToggleLine();
       }
     },
     {
@@ -22872,10 +23076,8 @@ function getLineOptions({
       icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
-        if (pointsEnabled)
-          onTogglePoints();
-        if (!lineEnabled)
-          onToggleLine();
+        if (pointsEnabled) onTogglePoints();
+        if (!lineEnabled) onToggleLine();
       }
     },
     {
@@ -22884,28 +23086,13 @@ function getLineOptions({
       icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {
-        if (!pointsEnabled)
-          onTogglePoints();
-        if (lineEnabled)
-          onToggleLine();
+        if (!pointsEnabled) onTogglePoints();
+        if (lineEnabled) onToggleLine();
       }
     }
   ];
 }
-const LineOptions = ({
-  lineEnabled,
-  onToggleLine,
-  onTogglePoints,
-  pointsEnabled,
-  translations
-}) => {
-  const options = getLineOptions({
-    lineEnabled,
-    onToggleLine,
-    onTogglePoints,
-    pointsEnabled,
-    translations
-  });
+const LineOptions = ({ options }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const selectedOption = options.find((option) => option.selected);
   return /* @__PURE__ */ jsx(
@@ -22947,28 +23134,22 @@ var DefaultContext = {
   attr: void 0
 };
 var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-var __assign = globalThis && globalThis.__assign || function() {
+var __assign = function() {
   __assign = Object.assign || function(t) {
     for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
       s2 = arguments[i2];
-      for (var p2 in s2)
-        if (Object.prototype.hasOwnProperty.call(s2, p2))
-          t[p2] = s2[p2];
+      for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2)) t[p2] = s2[p2];
     }
     return t;
   };
   return __assign.apply(this, arguments);
 };
-var __rest = globalThis && globalThis.__rest || function(s2, e2) {
+var __rest = function(s2, e2) {
   var t = {};
-  for (var p2 in s2)
-    if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
-      t[p2] = s2[p2];
-  if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++) {
-      if (e2.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2]))
-        t[p2[i2]] = s2[p2[i2]];
-    }
+  for (var p2 in s2) if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0) t[p2] = s2[p2];
+  if (s2 != null && typeof Object.getOwnPropertySymbols === "function") for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++) {
+    if (e2.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2])) t[p2[i2]] = s2[p2[i2]];
+  }
   return t;
 };
 function Tree2Element(tree) {
@@ -22990,10 +23171,8 @@ function IconBase(props) {
     var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
     var computedSize = size || conf.size || "1em";
     var className;
-    if (conf.className)
-      className = conf.className;
-    if (props.className)
-      className = (className ? className + " " : "") + props.className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
     return React__default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
@@ -23062,25 +23241,23 @@ function getDragOptions({
 }) {
   return [
     {
-      buttonLabel: dragToZoom,
       label: dragToZoom,
+      description: doubleClickToReset,
       icon: /* @__PURE__ */ jsx(TbZoomIn, {}),
       selected: zoomEnabled,
       type: "Option",
       onClick: () => {
-        if (!zoomEnabled)
-          onToggleZoom();
+        if (!zoomEnabled) onToggleZoom();
       }
     },
     {
-      buttonLabel: dragToPan,
       label: dragToPan,
+      description: doubleClickToReset,
       icon: /* @__PURE__ */ jsx(TbArrowsMove, {}),
       selected: panEnabled,
       type: "Option",
       onClick: () => {
-        if (!panEnabled)
-          onTogglePan();
+        if (!panEnabled) onTogglePan();
       }
     },
     ...isDragDataAllowed ? [
@@ -23090,8 +23267,7 @@ function getDragOptions({
         selected: enableDragPoints,
         type: "Option",
         onClick: () => {
-          if (!enableDragPoints)
-            onToggleDragPoints();
+          if (!enableDragPoints) onToggleDragPoints();
         }
       }
     ] : [],
@@ -23102,8 +23278,7 @@ function getDragOptions({
         selected: enableDragAnnotation,
         type: "Option",
         onClick: () => {
-          if (!enableDragAnnotation)
-            onToggleDragAnnotation();
+          if (!enableDragAnnotation) onToggleDragAnnotation();
         }
       }
     ] : [],
@@ -23113,59 +23288,10 @@ function getDragOptions({
       selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
       type: "Option",
       onClick: onDisableDragOptions
-    },
-    {
-      label: /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: doubleClickToReset }),
-      type: "Option",
-      disabled: true
     }
   ];
 }
-const DragOptions = ({
-  onTogglePan,
-  onToggleZoom,
-  panEnabled,
-  zoomEnabled,
-  enableDragPoints,
-  enableDragAnnotation,
-  isDragDataAllowed,
-  isDragAnnotationAllowed,
-  onToggleDragAnnotation,
-  onToggleDragPoints,
-  onDisableDragOptions,
-  translations: {
-    dragToZoom,
-    doubleClickToReset,
-    dragToPan,
-    dragToMovePoints,
-    dragDisabled,
-    dragToMoveAnnotation
-  }
-}) => {
-  const options = useMemo(
-    () => getDragOptions({
-      onTogglePan,
-      onToggleZoom,
-      panEnabled,
-      zoomEnabled,
-      enableDragPoints,
-      enableDragAnnotation,
-      isDragDataAllowed,
-      isDragAnnotationAllowed,
-      onToggleDragAnnotation,
-      onToggleDragPoints,
-      onDisableDragOptions,
-      translations: {
-        dragToZoom,
-        doubleClickToReset,
-        dragToPan,
-        dragToMovePoints,
-        dragDisabled,
-        dragToMoveAnnotation
-      }
-    }),
-    [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed]
-  );
+const DragOptions = ({ options }) => {
   const selectedOption = options.find((option) => option.selected);
   return /* @__PURE__ */ jsx(
     Menu,
@@ -23179,7 +23305,7 @@ const DragOptions = ({
             colored: "muted",
             basic: true,
             small: true,
-            label: (selectedOption == null ? void 0 : selectedOption.buttonLabel) || (selectedOption == null ? void 0 : selectedOption.label),
+            label: selectedOption == null ? void 0 : selectedOption.label,
             icon: selectedOption == null ? void 0 : selectedOption.icon
           }
         )
@@ -23187,8 +23313,8 @@ const DragOptions = ({
     }
   );
 };
-const controls = "_controls_1961q_1";
-const buttons = "_buttons_1961q_7";
+const controls = "_controls_1edjs_1";
+const buttons = "_buttons_1edjs_6";
 const styles$4 = {
   controls,
   buttons
@@ -23234,7 +23360,7 @@ function resolveUrl(url, baseUrl) {
   a2.href = url;
   return a2.href;
 }
-const uuid = (() => {
+const uuid = /* @__PURE__ */ (() => {
   let counter = 0;
   const random = () => (
     // eslint-disable-next-line no-bitwise
@@ -23653,10 +23779,8 @@ async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl)
     const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
     const contentType = getMimeType(resourceURL);
     let dataURL;
-    if (getContentFromUrl) {
-      const content = await getContentFromUrl(resolvedURL);
-      dataURL = makeDataUrl(content, contentType);
-    } else {
+    if (getContentFromUrl) ;
+    else {
       dataURL = await resourceToDataURL(resolvedURL, contentType, options);
     }
     return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
@@ -23954,8 +24078,7 @@ var dist = { exports: {} };
     return function(e3) {
       var t = {};
       function n2(o2) {
-        if (t[o2])
-          return t[o2].exports;
+        if (t[o2]) return t[o2].exports;
         var r2 = t[o2] = { i: o2, l: false, exports: {} };
         return e3[o2].call(r2.exports, r2, r2.exports, n2), r2.l = true, r2.exports;
       }
@@ -23964,16 +24087,12 @@ var dist = { exports: {} };
       }, n2.r = function(e4) {
         "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e4, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e4, "__esModule", { value: true });
       }, n2.t = function(e4, t2) {
-        if (1 & t2 && (e4 = n2(e4)), 8 & t2)
-          return e4;
-        if (4 & t2 && "object" == typeof e4 && e4 && e4.__esModule)
-          return e4;
+        if (1 & t2 && (e4 = n2(e4)), 8 & t2) return e4;
+        if (4 & t2 && "object" == typeof e4 && e4 && e4.__esModule) return e4;
         var o2 = /* @__PURE__ */ Object.create(null);
-        if (n2.r(o2), Object.defineProperty(o2, "default", { enumerable: true, value: e4 }), 2 & t2 && "string" != typeof e4)
-          for (var r2 in e4)
-            n2.d(o2, r2, (function(t3) {
-              return e4[t3];
-            }).bind(null, r2));
+        if (n2.r(o2), Object.defineProperty(o2, "default", { enumerable: true, value: e4 }), 2 & t2 && "string" != typeof e4) for (var r2 in e4) n2.d(o2, r2, (function(t3) {
+          return e4[t3];
+        }).bind(null, r2));
         return o2;
       }, n2.n = function(e4) {
         var t2 = e4 && e4.__esModule ? function() {
@@ -24027,12 +24146,10 @@ var dist = { exports: {} };
               r3(s2);
             }, 0));
           } : "msSaveOrOpenBlob" in navigator ? function(e4, n4, a4) {
-            if (n4 = n4 || e4.name || "download", "string" != typeof e4)
-              navigator.msSaveOrOpenBlob(function(e5, t3) {
-                return void 0 === t3 ? t3 = { autoBom: false } : "object" != typeof t3 && (console.warn("Deprecated: Expected third argument to be a object"), t3 = { autoBom: !t3 }), t3.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e5.type) ? new Blob(["\uFEFF", e5], { type: e5.type }) : e5;
-              }(e4, a4), n4);
-            else if (o3(e4))
-              t2(e4, n4, a4);
+            if (n4 = n4 || e4.name || "download", "string" != typeof e4) navigator.msSaveOrOpenBlob(function(e5, t3) {
+              return void 0 === t3 ? t3 = { autoBom: false } : "object" != typeof t3 && (console.warn("Deprecated: Expected third argument to be a object"), t3 = { autoBom: !t3 }), t3.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e5.type) ? new Blob(["\uFEFF", e5], { type: e5.type }) : e5;
+            }(e4, a4), n4);
+            else if (o3(e4)) t2(e4, n4, a4);
             else {
               var i3 = document.createElement("a");
               i3.href = e4, i3.target = "_blank", setTimeout(function() {
@@ -24040,8 +24157,7 @@ var dist = { exports: {} };
               });
             }
           } : function(e4, n4, o4, r4) {
-            if ((r4 = r4 || open("", "_blank")) && (r4.document.title = r4.document.body.innerText = "downloading..."), "string" == typeof e4)
-              return t2(e4, n4, o4);
+            if ((r4 = r4 || open("", "_blank")) && (r4.document.title = r4.document.body.innerText = "downloading..."), "string" == typeof e4) return t2(e4, n4, o4);
             var c3 = "application/octet-stream" === e4.type, s2 = /constructor/i.test(a3.HTMLElement) || a3.safari, u2 = /CriOS\/[\d]+/.test(navigator.userAgent);
             if ((u2 || c3 && s2 || i2) && "undefined" != typeof FileReader) {
               var l2 = new FileReader();
@@ -24065,8 +24181,7 @@ var dist = { exports: {} };
         return function(e4, t2, n3) {
           t2 = t2 || "", n3 = n3 || 512;
           for (var o3 = atob(e4), r3 = [], a3 = 0; a3 < o3.length; a3 += n3) {
-            for (var i2 = o3.slice(a3, a3 + n3), c2 = new Array(i2.length), s2 = 0; s2 < i2.length; s2++)
-              c2[s2] = i2.charCodeAt(s2);
+            for (var i2 = o3.slice(a3, a3 + n3), c2 = new Array(i2.length), s2 = 0; s2 < i2.length; s2++) c2[s2] = i2.charCodeAt(s2);
             var u2 = new Uint8Array(c2);
             r3.push(u2);
           }
@@ -24086,8 +24201,7 @@ var dist = { exports: {} };
         return (u2 = Object.assign || function(e4) {
           for (var t2 = 1; t2 < arguments.length; t2++) {
             var n3 = arguments[t2];
-            for (var o3 in n3)
-              Object.prototype.hasOwnProperty.call(n3, o3) && (e4[o3] = n3[o3]);
+            for (var o3 in n3) Object.prototype.hasOwnProperty.call(n3, o3) && (e4[o3] = n3[o3]);
           }
           return e4;
         }).apply(this, arguments);
@@ -24110,8 +24224,7 @@ var dist = { exports: {} };
         var t2;
         if ("string" == typeof e4 && (t2 = Object.keys(f2).find(function(t3) {
           return 0 === e4.indexOf(f2[t3]);
-        })), t2)
-          return t2;
+        })), t2) return t2;
         throw new Error("props.base64 on <Base64Downloader/> has invalid or undefined extension. expected ".concat(Object.keys(l2).join(", ")));
       }
       d2.defaultProps = { className: "", style: {}, downloadName: p2, Tag: "button", extraAttributes: {} }, d2.propTypes = { base64: i2.a.string.isRequired, children: i2.a.oneOfType([i2.a.node, i2.a.string]).isRequired, downloadName: i2.a.string, onDownloadSuccess: i2.a.func, onDownloadError: i2.a.func, Tag: i2.a.string, className: i2.a.string, style: i2.a.object, extraAttributes: i2.a.object }, t.default = d2;
@@ -24139,7 +24252,7 @@ var dist = { exports: {} };
       e3.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
     }, function(e3, t) {
       var n2;
-      n2 = function() {
+      n2 = /* @__PURE__ */ function() {
         return this;
       }();
       try {
@@ -24156,8 +24269,7 @@ const downloadPgn = (chartRef, state) => {
   var _a2;
   const chart2 = chartRef.current;
   const canvasElement = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.parentElement;
-  if (!canvasElement)
-    return;
+  if (!canvasElement) return;
   const { ctx } = chart2;
   ctx.save();
   ctx.globalCompositeOperation = "destination-over";
@@ -24323,8 +24435,7 @@ const initializeFormState = ({
 const isEmptyString = (value) => value === "";
 const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
-  if (isEmptyString(value))
-    errors.push("mustHaveAValue");
+  if (isEmptyString(value)) errors.push("mustHaveAValue");
   if (type === "min" && !isLessThanMax(value, compareTo)) {
     errors.push("mustBeLessThanMax");
   } else if (type === "max" && !isGreaterThanMin(value, compareTo)) {
@@ -24643,6 +24754,39 @@ const Controls = ({
   });
   const [measureRef, { width }] = useMeasure$1();
   const isNarrow = width < 200;
+  const lineOptions = useMemo(
+    () => getLineOptions({
+      lineEnabled,
+      onToggleLine,
+      onTogglePoints,
+      pointsEnabled,
+      translations
+    }),
+    [lineEnabled, pointsEnabled]
+  );
+  const dragOptions = useMemo(
+    () => getDragOptions({
+      onTogglePan,
+      onToggleZoom,
+      panEnabled,
+      zoomEnabled,
+      enableDragPoints,
+      enableDragAnnotation,
+      isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
+      isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
+      onToggleDragAnnotation,
+      onToggleDragPoints,
+      onDisableDragOptions,
+      translations
+    }),
+    [
+      zoomEnabled,
+      panEnabled,
+      enableDragPoints,
+      dragData == null ? void 0 : dragData.enableDragData,
+      annotations == null ? void 0 : annotations.enableDragAnnotation
+    ]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$4.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
@@ -24672,36 +24816,11 @@ const Controls = ({
                   menu: {
                     placement: "bottom-end",
                     sections: [
-                      ...getLineOptions({
-                        lineEnabled,
-                        onToggleLine,
-                        onTogglePoints,
-                        pointsEnabled,
-                        translations
-                      }).map((option) => ({
-                        ...option,
-                        type: "Option"
-                      })),
+                      ...lineOptions,
                       {
                         type: "Divider"
                       },
-                      ...getDragOptions({
-                        onTogglePan,
-                        onToggleZoom,
-                        panEnabled,
-                        zoomEnabled,
-                        enableDragPoints,
-                        enableDragAnnotation,
-                        isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
-                        isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
-                        onToggleDragAnnotation,
-                        onToggleDragPoints,
-                        onDisableDragOptions,
-                        translations
-                      }).map((option) => ({
-                        ...option,
-                        type: "Option"
-                      })),
+                      ...dragOptions,
                       {
                         type: "Divider"
                       },
@@ -24717,16 +24836,7 @@ const Controls = ({
                   }
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  LineOptions,
-                  {
-                    lineEnabled,
-                    pointsEnabled,
-                    onToggleLine,
-                    onTogglePoints,
-                    translations
-                  }
-                ),
+                /* @__PURE__ */ jsx(LineOptions, { options: lineOptions }),
                 /* @__PURE__ */ jsx(
                   Tooltip$2,
                   {
@@ -24746,23 +24856,7 @@ const Controls = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  DragOptions,
-                  {
-                    panEnabled,
-                    zoomEnabled,
-                    onTogglePan,
-                    onToggleZoom,
-                    enableDragPoints,
-                    enableDragAnnotation,
-                    isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
-                    isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
-                    onToggleDragAnnotation,
-                    onToggleDragPoints,
-                    onDisableDragOptions,
-                    translations
-                  }
-                )
+                /* @__PURE__ */ jsx(DragOptions, { options: dragOptions })
               ] })
             ] }),
             table2 ? /* @__PURE__ */ jsx(
@@ -24949,8 +25043,7 @@ const INIT_KEYS = {
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
 const checkCustomOption = (data, customOptions) => {
-  if (isEmpty(data) || isEmpty(customOptions))
-    return false;
+  if (isEmpty(data) || isEmpty(customOptions)) return false;
   const checkOption = (dataset) => {
     if (typeof customOptions === "string") {
       return dataset && has(dataset, customOptions);
@@ -25275,8 +25368,7 @@ const getAnnotationsData = (data) => {
 };
 const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
   var _a2;
-  if (!chartRef || !scalesKeys)
-    return {};
+  if (!chartRef || !scalesKeys) return {};
   const metasets = ((_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.getSortedVisibleDatasetMetas()) ?? [];
   const annotData = getAnnotationsData(annotationsData);
   return metasets && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
@@ -25620,7 +25712,8 @@ const generateAnnotations = (annotationsData) => {
     const borderColor = {
       [AnnotationType.LINE]: color2,
       [AnnotationType.POINT]: color2,
-      [AnnotationType.BOX]: color2
+      [AnnotationType.BOX]: color2,
+      [AnnotationType.ELLIPSE]: TRANSPARENT
     }[type] || TRANSPARENT;
     const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
     const borderDash = type === AnnotationType.LINE ? ANNOTATION_DASH : void 0;
@@ -25705,7 +25798,9 @@ const generateAnnotations = (annotationsData) => {
       leave,
       onDragStart,
       onDrag,
-      onDragEnd
+      onDragEnd,
+      pointStyle: (ann == null ? void 0 : ann.pointStyle) ?? PointStyle.Circle,
+      resizable: (ann == null ? void 0 : ann.resizable) ?? false
     };
   });
 };
@@ -25998,8 +26093,7 @@ const getAxesRangesFromChart = (chartRef, axes) => {
   });
 };
 const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
-  if (!chartRef || !chartRef.current)
-    return null;
+  if (!chartRef || !chartRef.current) return null;
   const metasets = chartRef.current.getSortedVisibleDatasetMetas();
   const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
   let allData = [];
@@ -26008,8 +26102,7 @@ const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
     allData = allData.concat(data);
   });
   allData = allData.concat(annotDataByType);
-  if (allData.length === 0)
-    return null;
+  if (allData.length === 0) return null;
   const min = Math.min(...allData);
   const max = Math.max(...allData);
   return { min, max };
@@ -26244,8 +26337,7 @@ const chartAreaTextPlugin = {
       maxWidth: initialMaxWidth,
       position
     } = options;
-    if (!showLabel || !text)
-      return;
+    if (!showLabel || !text) return;
     const { ctx, chartArea } = chart2;
     const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
     const [x2, y2] = getPositionCoordinates(position, chart2, xOffset, yOffset);
@@ -26324,11 +26416,77 @@ const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
     height
   };
 };
+const isWithinChartArea = ({
+  x: x2,
+  y: y2,
+  chartArea,
+  scales,
+  metrics,
+  resizable = false,
+  dragRange,
+  annotationType
+}) => {
+  if (resizable && !dragRange) {
+    return true;
+  }
+  if (dragRange) {
+    const withinRangeX = x2 !== void 0 && dragRange.x ? x2 >= dragRange.x[0] && x2 <= dragRange.x[1] : true;
+    const withinRangeY = y2 !== void 0 && dragRange.y ? y2 >= dragRange.y[0] && y2 <= dragRange.y[1] : true;
+    return withinRangeX && withinRangeY;
+  }
+  const minX = scales.x.getValueForPixel(chartArea.left) ?? Number.NEGATIVE_INFINITY;
+  const maxX = scales.x.getValueForPixel(chartArea.right) ?? Number.POSITIVE_INFINITY;
+  const minY = scales.y.getValueForPixel(chartArea.bottom) ?? Number.NEGATIVE_INFINITY;
+  const maxY = scales.y.getValueForPixel(chartArea.top) ?? Number.POSITIVE_INFINITY;
+  if (annotationType === AnnotationType.POINT) {
+    const withinX = x2 !== void 0 ? x2 >= minX && x2 <= maxX : true;
+    const withinY = y2 !== void 0 ? y2 >= minY && y2 <= maxY : true;
+    return withinX && withinY;
+  }
+  if (annotationType === AnnotationType.BOX && metrics.width !== void 0 && metrics.height !== void 0) {
+    const boxXMin = x2 !== void 0 ? x2 - metrics.width / 2 : void 0;
+    const boxXMax = x2 !== void 0 ? x2 + metrics.width / 2 : void 0;
+    const boxYMin = y2 !== void 0 ? y2 - metrics.height / 2 : void 0;
+    const boxYMax = y2 !== void 0 ? y2 + metrics.height / 2 : void 0;
+    const withinBoxX = boxXMin !== void 0 && boxXMax !== void 0 ? boxXMin >= minX && boxXMax <= maxX : true;
+    const withinBoxY = boxYMin !== void 0 && boxYMax !== void 0 ? boxYMin >= minY && boxYMax <= maxY : true;
+    return withinBoxX && withinBoxY;
+  }
+  return true;
+};
+const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotation, chart2, scales, metrics) => {
+  const { resizable, dragRange = null } = activeAnnotation ?? {};
+  const checkArea = isWithinChartArea({
+    [axis]: newPosition,
+    chartArea: chart2.chartArea,
+    scales,
+    resizable,
+    dragRange,
+    metrics: metrics || {},
+    annotationType: activeAnnotation.type
+  });
+  if (!checkArea) return;
+  if (activeAnnotation.type === AnnotationType.POINT) {
+    if (axis === "x") {
+      activeAnnotation.xValue = newPosition;
+    } else if (axis === "y") {
+      activeAnnotation.yValue = newPosition;
+    }
+  } else if (activeAnnotation.type === AnnotationType.BOX && metrics) {
+    if (axis === "x" && metrics.width) {
+      activeAnnotation.xMin = newPosition - metrics.width / 2;
+      activeAnnotation.xMax = newPosition + metrics.width / 2;
+    }
+    if (axis === "y" && metrics.height) {
+      activeAnnotation.yMin = newPosition - metrics.height / 2;
+      activeAnnotation.yMax = newPosition + metrics.height / 2;
+    }
+  }
+};
 const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
   const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
   const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
-  if (!annotation2)
-    return;
+  if (!annotation2) return;
   const metrics = calculateAnnotationMetricsInValues(annotation2);
   if (annotation2 && annotation2.enableDrag && !isNil(metrics.centerY) && !isNil(metrics.centerX)) {
     canvas2.style.cursor = CursorStyle.Move;
@@ -26349,24 +26507,24 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
     let newCenterX = x2 - dragStartX;
     let newCenterY = y2 - dragStartY;
     if (dragAxis !== DragAxis.Y) {
-      if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
-        activeAnnotation.xValue = newCenterX;
-      } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
-        if (!isNil(metrics == null ? void 0 : metrics.width)) {
-          activeAnnotation.xMin = newCenterX - metrics.width / 2;
-          activeAnnotation.xMax = newCenterX + metrics.width / 2;
-        }
-      }
+      updateAnnotationPositionWithinBounds(
+        DragAxis.X,
+        newCenterX,
+        activeAnnotation,
+        chart2,
+        scales,
+        metrics
+      );
     }
     if (dragAxis !== DragAxis.X) {
-      if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
-        activeAnnotation.yValue = newCenterY;
-      } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
-        if (!isNil(metrics == null ? void 0 : metrics.height)) {
-          activeAnnotation.yMin = newCenterY - metrics.height / 2;
-          activeAnnotation.yMax = newCenterY + metrics.height / 2;
-        }
-      }
+      updateAnnotationPositionWithinBounds(
+        DragAxis.Y,
+        newCenterY,
+        activeAnnotation,
+        chart2,
+        scales,
+        metrics
+      );
     }
     chart2.update();
     if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
@@ -26447,8 +26605,7 @@ const annotationDraggerPlugin = {
   beforeDraw(chart2) {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     let annotations = ((_b2 = (_a2 = chart2.options.plugins) == null ? void 0 : _a2.annotation) == null ? void 0 : _b2.annotations) ?? {};
-    if (!annotations)
-      return;
+    if (!annotations) return;
     annotationLabel(
       chart2.ctx,
       annotations,
@@ -26483,8 +26640,7 @@ const annotationDraggerPlugin = {
     };
     const typedScales = { x: scales.x, y: scales.y };
     let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
-    if (!chart2 && !annotations)
-      return;
+    if (!chart2 && !annotations) return;
     let isDragging2 = false;
     let dragStartX, dragStartY;
     let activeAnnotation = null;
@@ -26651,9 +26807,10 @@ const SvgTriangle = (props) => /* @__PURE__ */ React.createElement("svg", { heig
 const LEGEND_SYMBOL_SIZE$1 = 16;
 const LineItem = ({ dataset }) => {
   var _a2;
-  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(" ")) || "";
+  const { borderColor, borderDash, borderWidth } = dataset ?? {};
+  const [dash0, dash1] = borderDash ?? [];
+  const offset = dash0 && dash1 ? (LEGEND_SYMBOL_SIZE$1 - dash0) / 2 % (dash0 + dash1) * -1 : 0;
+  const borderDashString = ((_a2 = dataset == null ? void 0 : dataset.borderDash) == null ? void 0 : _a2.join(" ")) || "";
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemLine, children: /* @__PURE__ */ jsx(
     "svg",
     {
@@ -26678,9 +26835,8 @@ const LineItem = ({ dataset }) => {
   ) });
 };
 const PointItem = ({ dataset }) => {
-  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset;
-  if (!pointRadius)
-    return null;
+  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset ?? {};
+  if (!pointRadius) return null;
   const size = pointRadius * 2;
   const icons = {
     circle: /* @__PURE__ */ jsx(SvgCircle, {}),
@@ -26691,19 +26847,19 @@ const PointItem = ({ dataset }) => {
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
-      icon: icons[pointStyle] ?? /* @__PURE__ */ jsx(SvgCircle, {}),
+      icon: (icons == null ? void 0 : icons[pointStyle]) ?? /* @__PURE__ */ jsx(SvgCircle, {}),
       size,
       color: pointBackgroundColor
     }
   ) });
 };
 const BoxItem = ({ dataset }) => {
-  const { backgroundColor } = dataset;
+  const { backgroundColor } = dataset ?? {};
   const style = { backgroundColor };
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, style });
 };
 const LegendItemLine = ({ dataset }) => {
-  const { annotationType, showLine } = dataset;
+  const { annotationType, showLine } = dataset ?? {};
   switch (annotationType) {
     case AnnotationType$1.Box:
     case AnnotationType$1.Ellipse:
@@ -26723,15 +26879,15 @@ const renderLegendItemSymbol = (dataset, chartType, index2) => {
     case ChartType.LINE:
       return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
     case ChartType.BAR: {
-      const { backgroundColor } = dataset;
-      const color2 = backgroundColor instanceof Array ? backgroundColor[index2] : backgroundColor;
+      const { backgroundColor } = dataset ?? {};
+      const color2 = backgroundColor instanceof Array ? backgroundColor == null ? void 0 : backgroundColor[index2] : backgroundColor;
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: color2 }) });
     }
     case ChartType.PIE:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) }) });
     case ChartType.SCATTER: {
-      const { backgroundColor, borderColor } = dataset;
-      const color2 = backgroundColor instanceof Array ? backgroundColor[index2] : backgroundColor;
+      const { backgroundColor, borderColor } = dataset ?? {};
+      const color2 = backgroundColor instanceof Array ? backgroundColor == null ? void 0 : backgroundColor[index2] : backgroundColor;
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: color2 ?? borderColor }) });
     }
     default:
@@ -26748,7 +26904,7 @@ const LegendItem = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(styles$3.legendItem, hidden && styles$3.isHidden),
+      className: cx(styles$3 == null ? void 0 : styles$3.legendItem, hidden && (styles$3 == null ? void 0 : styles$3.isHidden)),
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -26759,7 +26915,7 @@ const LegendItem = ({
             children: renderLegendItemSymbol(dataset, chartType, index2)
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset.label })
+        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset == null ? void 0 : dataset.label })
       ]
     }
   );
@@ -26801,9 +26957,8 @@ const getGeneratedLabels = (chart2) => {
 const useGeneratedLabels = (chartRef, generatedDatasets) => {
   const [items, setItems] = useState([]);
   useEffect(() => {
-    const chart2 = chartRef.current;
-    if (!chart2)
-      return;
+    const chart2 = chartRef == null ? void 0 : chartRef.current;
+    if (!chart2) return;
     const newItems = getGeneratedLabels(chart2);
     setItems(newItems);
   }, [generatedDatasets, chartRef]);
@@ -26814,10 +26969,10 @@ const createLegendStyle = (legendPosition, chart2) => {
   const { height = 0, width = 0, chartArea } = chart2 ?? {};
   const { top: top2 = 0, left: left2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = chartArea ?? {};
   return {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    left: (legendPosition == null ? void 0 : legendPosition.includes("left")) ? left2 : void 0,
+    right: (legendPosition == null ? void 0 : legendPosition.includes("right")) ? width - right2 : void 0,
+    top: (legendPosition == null ? void 0 : legendPosition.includes("top")) ? top2 : void 0,
+    bottom: (legendPosition == null ? void 0 : legendPosition.includes("bottom")) ? height - bottom2 : void 0,
     maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
     maxWidth: 0.9 * (right2 - left2 - LEGEND_MARGIN * 2),
     margin: LEGEND_MARGIN
@@ -26828,27 +26983,28 @@ const LegendItems = ({
   datasets,
   legendClick,
   chartType
-}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items.map((item, index2) => {
-  if (datasets[item.datasetIndex].hideLegend) {
+}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items == null ? void 0 : items.map((item, index2) => {
+  var _a2;
+  if ((_a2 = datasets == null ? void 0 : datasets[item == null ? void 0 : item.datasetIndex]) == null ? void 0 : _a2.hideLegend) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     LegendItem,
     {
       index: index2,
-      hidden: item.hidden,
-      dataset: datasets[item.datasetIndex],
+      hidden: item == null ? void 0 : item.hidden,
+      dataset: datasets == null ? void 0 : datasets[item == null ? void 0 : item.datasetIndex],
       handleClick: (_2) => legendClick(_2, item),
       chartType
     },
-    `${item.datasetIndex}-hidden-${item.hidden}`
+    `${item == null ? void 0 : item.datasetIndex}-hidden-${item == null ? void 0 : item.hidden}`
   );
 }) });
 const LegendPanel = forwardRef(
   ({ legendPosition, chartRef, isDragging: isDragging2, legendConfig }, ref) => {
     var _a2;
     const chart2 = chartRef == null ? void 0 : chartRef.current;
-    const { options, generatedDatasets, chartType } = legendConfig;
+    const { options, generatedDatasets, chartType } = legendConfig ?? {};
     const datasets = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets;
     const { legend: legend2, legendClick } = useLegendState({
       chartRef,
@@ -26892,13 +27048,17 @@ const LegendPanel = forwardRef(
   }
 );
 const LegendDropZone = (legendDropZoneProps) => {
-  const { position, onDrop, placeholderSize } = legendDropZoneProps;
+  const {
+    position = "",
+    onDrop = noop$2,
+    placeholderSize = {}
+  } = legendDropZoneProps ?? {};
   const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
     accept: "legend",
     drop: onDrop,
     collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
+      isOver: monitor == null ? void 0 : monitor.isOver(),
+      canDrop: monitor == null ? void 0 : monitor.canDrop()
     })
   }));
   const isActive2 = isOver && canDrop;
@@ -26909,10 +27069,10 @@ const LegendDropZone = (legendDropZoneProps) => {
       className: cx(
         styles$3.dropzone,
         isActive2 && styles$3.isActive,
-        position.includes("left") && styles$3.left,
-        position.includes("right") && styles$3.right,
-        position.includes("top") && styles$3.top,
-        position.includes("bottom") && styles$3.bottom
+        (position == null ? void 0 : position.includes("left")) && styles$3.left,
+        (position == null ? void 0 : position.includes("right")) && styles$3.right,
+        (position == null ? void 0 : position.includes("top")) && styles$3.top,
+        (position == null ? void 0 : position.includes("bottom")) && styles$3.bottom
       ),
       children: /* @__PURE__ */ jsx(
         "div",
@@ -26945,7 +27105,7 @@ const LegendDropZones = (legendDropZonesProps) => {
         zIndex: isDragging2 ? 0 : -1
         // Position dropzones behind chart when not needed
       },
-      children: positions2.map((position) => /* @__PURE__ */ jsx(
+      children: positions2 == null ? void 0 : positions2.map((position) => /* @__PURE__ */ jsx(
         LegendDropZone,
         {
           position,
@@ -26959,24 +27119,32 @@ const LegendDropZones = (legendDropZonesProps) => {
 };
 const Legend2 = ({ chartRef, legendConfig }) => {
   const chart2 = chartRef == null ? void 0 : chartRef.current;
-  const { chartArea } = chart2 ?? {};
+  const [chartArea, setChartArea] = useState(
+    chart2 == null ? void 0 : chart2.chartArea
+  );
   const {
     options: { legend: legend2 }
   } = legendConfig ?? {};
-  const [measureRef] = useMeasure$1();
+  const [measureRef, measureRect] = useMeasure$1();
   const resizeRef = measureRef;
   const panelRef = useRef(null);
   const [legendPosition, setLegendPosition] = useState(
     (legend2 == null ? void 0 : legend2.position) || Position.BottomLeft
   );
-  const panelRect = panelRef.current ? panelRef.current.getBoundingClientRect() : null;
+  const panelRect = (panelRef == null ? void 0 : panelRef.current) ? panelRef.current.getBoundingClientRect() : null;
   const panelSize = { width: panelRect == null ? void 0 : panelRect.width, height: panelRect == null ? void 0 : panelRect.height };
-  const [{ isDragging: isDragging2 }, dragRef] = useDrag(() => ({
+  const [{ isDragging: isDragging2 = false }, dragRef = noop$2] = useDrag(() => ({
     type: "legend",
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
     })
   }));
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setChartArea(chart2 == null ? void 0 : chart2.chartArea);
+    }, 20);
+    return () => clearTimeout(timeout);
+  }, [measureRect]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$3.resizeContainer }),
     /* @__PURE__ */ jsx(
@@ -26999,7 +27167,8 @@ const Legend2 = ({ chartRef, legendConfig }) => {
         setLegendPosition: (position) => setLegendPosition(position),
         isDragging: isDragging2,
         placeholderSize: panelSize
-      }
+      },
+      measureRect.width
     )
   ] });
 };
@@ -27319,8 +27488,7 @@ const usePieChartConfig = (chart2) => {
           return "";
         const dataElement = context.dataset.data[context.dataIndex];
         const label = (dataElement == null ? void 0 : dataElement.label) || (typeof dataElement === "number" ? dataElement : Array.isArray(dataElement) ? dataElement.reduce((acc, curr, i2) => {
-          if (i2 === 0)
-            return `${acc} ${curr}`;
+          if (i2 === 0) return `${acc} ${curr}`;
           return `${acc}, ${curr}`;
         }, "") : "");
         const dataLabel = typeof dataElement === "number" ? Number.isInteger(label) ? label : label.toFixed(2) : label;
@@ -27341,8 +27509,7 @@ const usePieChartConfig = (chart2) => {
         usePointStyle: true,
         filter: (item) => {
           var _a2;
-          if (!options.legend.useDataset)
-            return true;
+          if (!options.legend.useDataset) return true;
           return !((_a2 = data.datasets[item.index]) == null ? void 0 : _a2.hideLegend);
         }
       },
@@ -27481,7 +27648,7 @@ const PieChartWithLegend = (props) => {
  * (c) 2022 Chart.js Contributors
  * Released under the MIT License
  */
-const uid = function() {
+const uid = /* @__PURE__ */ function() {
   let id = 0;
   return function() {
     return id++;
@@ -27521,11 +27688,7 @@ function each(loopable, fn, thisArg, reverse) {
   let i2, len, keys;
   if (isArray(loopable)) {
     len = loopable.length;
-    if (reverse) {
-      for (i2 = len - 1; i2 >= 0; i2--) {
-        fn.call(thisArg, loopable[i2], i2);
-      }
-    } else {
+    {
       for (i2 = 0; i2 < len; i2++) {
         fn.call(thisArg, loopable[i2], i2);
       }
@@ -28782,7 +28945,7 @@ function clearCanvas(canvas2, ctx) {
   ctx.restore();
 }
 function drawPoint(ctx, options, x2, y2) {
-  drawPointLegend(ctx, options, x2, y2, null);
+  drawPointLegend(ctx, options, x2, y2);
 }
 function drawPointLegend(ctx, options, x2, y2, w2) {
   let type, xOffset, yOffset, size, cornerRadius, width;
@@ -28807,9 +28970,7 @@ function drawPointLegend(ctx, options, x2, y2, w2) {
   ctx.beginPath();
   switch (style) {
     default:
-      if (w2) {
-        ctx.ellipse(x2, y2, w2 / 2, radius, 0, 0, TAU);
-      } else {
+      {
         ctx.arc(x2, y2, radius, 0, TAU);
       }
       ctx.closePath();
@@ -28836,7 +28997,7 @@ function drawPointLegend(ctx, options, x2, y2, w2) {
     case "rect":
       if (!rotation) {
         size = Math.SQRT1_2 * radius;
-        width = w2 ? w2 / 2 : size;
+        width = size;
         ctx.rect(x2 - width, y2 - size, 2 * width, 2 * size);
         break;
       }
@@ -28876,7 +29037,7 @@ function drawPointLegend(ctx, options, x2, y2, w2) {
       ctx.lineTo(x2 - yOffset, y2 + xOffset);
       break;
     case "line":
-      xOffset = w2 ? w2 / 2 : Math.cos(rad) * radius;
+      xOffset = Math.cos(rad) * radius;
       yOffset = Math.sin(rad) * radius;
       ctx.moveTo(x2 - xOffset, y2 - yOffset);
       ctx.lineTo(x2 + xOffset, y2 + yOffset);
@@ -29064,25 +29225,13 @@ function toFont(options, fallback) {
   return font;
 }
 function resolve(inputs, context, index2, info) {
-  let cacheable = true;
   let i2, ilen, value;
   for (i2 = 0, ilen = inputs.length; i2 < ilen; ++i2) {
     value = inputs[i2];
     if (value === void 0) {
       continue;
     }
-    if (context !== void 0 && typeof value === "function") {
-      value = value(context);
-      cacheable = false;
-    }
-    if (index2 !== void 0 && isArray(value)) {
-      value = value[index2 % value.length];
-      cacheable = false;
-    }
     if (value !== void 0) {
-      if (info && !cacheable) {
-        info.cacheable = false;
-      }
       return value;
     }
   }
@@ -39081,8 +39230,7 @@ var n = { value: () => {
 } };
 function e() {
   for (var t, n2 = 0, e2 = arguments.length, i2 = {}; n2 < e2; ++n2) {
-    if (!(t = arguments[n2] + "") || t in i2 || /[\s.]/.test(t))
-      throw new Error("illegal type: " + t);
+    if (!(t = arguments[n2] + "") || t in i2 || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
     i2[t] = [];
   }
   return new r(i2);
@@ -39093,58 +39241,40 @@ function r(t) {
 function i(t, n2) {
   return t.trim().split(/^|\s+/).map(function(t2) {
     var e2 = "", r2 = t2.indexOf(".");
-    if (r2 >= 0 && (e2 = t2.slice(r2 + 1), t2 = t2.slice(0, r2)), t2 && !n2.hasOwnProperty(t2))
-      throw new Error("unknown type: " + t2);
+    if (r2 >= 0 && (e2 = t2.slice(r2 + 1), t2 = t2.slice(0, r2)), t2 && !n2.hasOwnProperty(t2)) throw new Error("unknown type: " + t2);
     return { type: t2, name: e2 };
   });
 }
 function o(t, n2) {
-  for (var e2, r2 = 0, i2 = t.length; r2 < i2; ++r2)
-    if ((e2 = t[r2]).name === n2)
-      return e2.value;
+  for (var e2, r2 = 0, i2 = t.length; r2 < i2; ++r2) if ((e2 = t[r2]).name === n2) return e2.value;
 }
 function a(t, e2, r2) {
-  for (var i2 = 0, o2 = t.length; i2 < o2; ++i2)
-    if (t[i2].name === e2) {
-      t[i2] = n, t = t.slice(0, i2).concat(t.slice(i2 + 1));
-      break;
-    }
+  for (var i2 = 0, o2 = t.length; i2 < o2; ++i2) if (t[i2].name === e2) {
+    t[i2] = n, t = t.slice(0, i2).concat(t.slice(i2 + 1));
+    break;
+  }
   return null != r2 && t.push({ name: e2, value: r2 }), t;
 }
 r.prototype = e.prototype = { constructor: r, on: function(t, n2) {
   var e2, r2 = this._, u2 = i(t + "", r2), s2 = -1, c2 = u2.length;
   if (!(arguments.length < 2)) {
-    if (null != n2 && "function" != typeof n2)
-      throw new Error("invalid callback: " + n2);
-    for (; ++s2 < c2; )
-      if (e2 = (t = u2[s2]).type)
-        r2[e2] = a(r2[e2], t.name, n2);
-      else if (null == n2)
-        for (e2 in r2)
-          r2[e2] = a(r2[e2], t.name, null);
+    if (null != n2 && "function" != typeof n2) throw new Error("invalid callback: " + n2);
+    for (; ++s2 < c2; ) if (e2 = (t = u2[s2]).type) r2[e2] = a(r2[e2], t.name, n2);
+    else if (null == n2) for (e2 in r2) r2[e2] = a(r2[e2], t.name, null);
     return this;
   }
-  for (; ++s2 < c2; )
-    if ((e2 = (t = u2[s2]).type) && (e2 = o(r2[e2], t.name)))
-      return e2;
+  for (; ++s2 < c2; ) if ((e2 = (t = u2[s2]).type) && (e2 = o(r2[e2], t.name))) return e2;
 }, copy: function() {
   var t = {}, n2 = this._;
-  for (var e2 in n2)
-    t[e2] = n2[e2].slice();
+  for (var e2 in n2) t[e2] = n2[e2].slice();
   return new r(t);
 }, call: function(t, n2) {
-  if ((e2 = arguments.length - 2) > 0)
-    for (var e2, r2, i2 = new Array(e2), o2 = 0; o2 < e2; ++o2)
-      i2[o2] = arguments[o2 + 2];
-  if (!this._.hasOwnProperty(t))
-    throw new Error("unknown type: " + t);
-  for (o2 = 0, e2 = (r2 = this._[t]).length; o2 < e2; ++o2)
-    r2[o2].value.apply(n2, i2);
+  if ((e2 = arguments.length - 2) > 0) for (var e2, r2, i2 = new Array(e2), o2 = 0; o2 < e2; ++o2) i2[o2] = arguments[o2 + 2];
+  if (!this._.hasOwnProperty(t)) throw new Error("unknown type: " + t);
+  for (o2 = 0, e2 = (r2 = this._[t]).length; o2 < e2; ++o2) r2[o2].value.apply(n2, i2);
 }, apply: function(t, n2, e2) {
-  if (!this._.hasOwnProperty(t))
-    throw new Error("unknown type: " + t);
-  for (var r2 = this._[t], i2 = 0, o2 = r2.length; i2 < o2; ++i2)
-    r2[i2].value.apply(n2, e2);
+  if (!this._.hasOwnProperty(t)) throw new Error("unknown type: " + t);
+  for (var r2 = this._[t], i2 = 0, o2 = r2.length; i2 < o2; ++i2) r2[i2].value.apply(n2, e2);
 } };
 var u = "http://www.w3.org/1999/xhtml", s = { svg: "http://www.w3.org/2000/svg", xhtml: u, xlink: "http://www.w3.org/1999/xlink", xml: "http://www.w3.org/XML/1998/namespace", xmlns: "http://www.w3.org/2000/xmlns/" };
 function c(t) {
@@ -39204,19 +39334,14 @@ function E(t) {
   };
 }
 function D(t, n2, e2, r2, i2, o2) {
-  for (var a2, u2 = 0, s2 = n2.length, c2 = o2.length; u2 < c2; ++u2)
-    (a2 = n2[u2]) ? (a2.__data__ = o2[u2], r2[u2] = a2) : e2[u2] = new A(t, o2[u2]);
-  for (; u2 < s2; ++u2)
-    (a2 = n2[u2]) && (i2[u2] = a2);
+  for (var a2, u2 = 0, s2 = n2.length, c2 = o2.length; u2 < c2; ++u2) (a2 = n2[u2]) ? (a2.__data__ = o2[u2], r2[u2] = a2) : e2[u2] = new A(t, o2[u2]);
+  for (; u2 < s2; ++u2) (a2 = n2[u2]) && (i2[u2] = a2);
 }
 function S(t, n2, e2, r2, i2, o2, a2) {
   var u2, s2, c2, l2 = /* @__PURE__ */ new Map(), f2 = n2.length, h3 = o2.length, p2 = new Array(f2);
-  for (u2 = 0; u2 < f2; ++u2)
-    (s2 = n2[u2]) && (p2[u2] = c2 = a2.call(s2, s2.__data__, u2, n2) + "", l2.has(c2) ? i2[u2] = s2 : l2.set(c2, s2));
-  for (u2 = 0; u2 < h3; ++u2)
-    c2 = a2.call(t, o2[u2], u2, o2) + "", (s2 = l2.get(c2)) ? (r2[u2] = s2, s2.__data__ = o2[u2], l2.delete(c2)) : e2[u2] = new A(t, o2[u2]);
-  for (u2 = 0; u2 < f2; ++u2)
-    (s2 = n2[u2]) && l2.get(p2[u2]) === s2 && (i2[u2] = s2);
+  for (u2 = 0; u2 < f2; ++u2) (s2 = n2[u2]) && (p2[u2] = c2 = a2.call(s2, s2.__data__, u2, n2) + "", l2.has(c2) ? i2[u2] = s2 : l2.set(c2, s2));
+  for (u2 = 0; u2 < h3; ++u2) c2 = a2.call(t, o2[u2], u2, o2) + "", (s2 = l2.get(c2)) ? (r2[u2] = s2, s2.__data__ = o2[u2], l2.delete(c2)) : e2[u2] = new A(t, o2[u2]);
+  for (u2 = 0; u2 < f2; ++u2) (s2 = n2[u2]) && l2.get(p2[u2]) === s2 && (i2[u2] = s2);
 }
 function C(t) {
   return t.__data__;
@@ -39307,12 +39432,10 @@ function H(t) {
   this._node = t, this._names = F(t.getAttribute("class") || "");
 }
 function G(t, n2) {
-  for (var e2 = z(t), r2 = -1, i2 = n2.length; ++r2 < i2; )
-    e2.add(n2[r2]);
+  for (var e2 = z(t), r2 = -1, i2 = n2.length; ++r2 < i2; ) e2.add(n2[r2]);
 }
 function K(t, n2) {
-  for (var e2 = z(t), r2 = -1, i2 = n2.length; ++r2 < i2; )
-    e2.remove(n2[r2]);
+  for (var e2 = z(t), r2 = -1, i2 = n2.length; ++r2 < i2; ) e2.remove(n2[r2]);
 }
 function J(t) {
   return function() {
@@ -39388,23 +39511,20 @@ function ft(t) {
   return function() {
     var n2 = this.__on;
     if (n2) {
-      for (var e2, r2 = 0, i2 = -1, o2 = n2.length; r2 < o2; ++r2)
-        e2 = n2[r2], t.type && e2.type !== t.type || e2.name !== t.name ? n2[++i2] = e2 : this.removeEventListener(e2.type, e2.listener, e2.options);
+      for (var e2, r2 = 0, i2 = -1, o2 = n2.length; r2 < o2; ++r2) e2 = n2[r2], t.type && e2.type !== t.type || e2.name !== t.name ? n2[++i2] = e2 : this.removeEventListener(e2.type, e2.listener, e2.options);
       ++i2 ? n2.length = i2 : delete this.__on;
     }
   };
 }
 function ht(t, n2, e2) {
   return function() {
-    var r2, i2 = this.__on, o2 = function(t2) {
+    var r2, i2 = this.__on, o2 = /* @__PURE__ */ function(t2) {
       return function(n3) {
         t2.call(this, n3, this.__data__);
       };
     }(n2);
     if (i2) {
-      for (var a2 = 0, u2 = i2.length; a2 < u2; ++a2)
-        if ((r2 = i2[a2]).type === t.type && r2.name === t.name)
-          return this.removeEventListener(r2.type, r2.listener, r2.options), this.addEventListener(r2.type, r2.listener = o2, r2.options = e2), void (r2.value = n2);
+      for (var a2 = 0, u2 = i2.length; a2 < u2; ++a2) if ((r2 = i2[a2]).type === t.type && r2.name === t.name) return this.removeEventListener(r2.type, r2.listener, r2.options), this.addEventListener(r2.type, r2.listener = o2, r2.options = e2), void (r2.value = n2);
     }
     this.addEventListener(t.type, o2, e2), r2 = { type: t.type, name: t.name, value: n2, listener: o2, options: e2 }, i2 ? i2.push(r2) : this.__on = [r2];
   };
@@ -39449,8 +39569,7 @@ function mt(t) {
 function _t(t, n2) {
   if (t = function(t2) {
     let n3;
-    for (; n3 = t2.sourceEvent; )
-      t2 = n3;
+    for (; n3 = t2.sourceEvent; ) t2 = n3;
     return t2;
   }(t), void 0 === n2 && (n2 = t.currentTarget), n2) {
     var e2 = n2.ownerSVGElement || n2;
@@ -39467,12 +39586,10 @@ function _t(t, n2) {
 }
 yt.prototype = { constructor: yt, select: function(t) {
   "function" != typeof t && (t = d(t));
-  for (var n2 = this._groups, e2 = n2.length, r2 = new Array(e2), i2 = 0; i2 < e2; ++i2)
-    for (var o2, a2, u2 = n2[i2], s2 = u2.length, c2 = r2[i2] = new Array(s2), l2 = 0; l2 < s2; ++l2)
-      (o2 = u2[l2]) && (a2 = t.call(o2, o2.__data__, l2, u2)) && ("__data__" in o2 && (a2.__data__ = o2.__data__), c2[l2] = a2);
+  for (var n2 = this._groups, e2 = n2.length, r2 = new Array(e2), i2 = 0; i2 < e2; ++i2) for (var o2, a2, u2 = n2[i2], s2 = u2.length, c2 = r2[i2] = new Array(s2), l2 = 0; l2 < s2; ++l2) (o2 = u2[l2]) && (a2 = t.call(o2, o2.__data__, l2, u2)) && ("__data__" in o2 && (a2.__data__ = o2.__data__), c2[l2] = a2);
   return new yt(r2, this._parents);
 }, selectAll: function(t) {
-  t = "function" == typeof t ? function(t2) {
+  t = "function" == typeof t ? /* @__PURE__ */ function(t2) {
     return function() {
       return g(t2.apply(this, arguments));
     };
@@ -39481,46 +39598,39 @@ yt.prototype = { constructor: yt, select: function(t) {
       return this.querySelectorAll(t2);
     };
   }(t);
-  for (var n2 = this._groups, e2 = n2.length, r2 = [], i2 = [], o2 = 0; o2 < e2; ++o2)
-    for (var a2, u2 = n2[o2], s2 = u2.length, c2 = 0; c2 < s2; ++c2)
-      (a2 = u2[c2]) && (r2.push(t.call(a2, a2.__data__, c2, u2)), i2.push(a2));
+  for (var n2 = this._groups, e2 = n2.length, r2 = [], i2 = [], o2 = 0; o2 < e2; ++o2) for (var a2, u2 = n2[o2], s2 = u2.length, c2 = 0; c2 < s2; ++c2) (a2 = u2[c2]) && (r2.push(t.call(a2, a2.__data__, c2, u2)), i2.push(a2));
   return new yt(r2, i2);
 }, selectChild: function(t) {
-  return this.select(null == t ? _ : function(t2) {
+  return this.select(null == t ? _ : /* @__PURE__ */ function(t2) {
     return function() {
       return m.call(this.children, t2);
     };
   }("function" == typeof t ? t : y(t)));
 }, selectChildren: function(t) {
-  return this.selectAll(null == t ? x : function(t2) {
+  return this.selectAll(null == t ? x : /* @__PURE__ */ function(t2) {
     return function() {
       return w.call(this.children, t2);
     };
   }("function" == typeof t ? t : y(t)));
 }, filter: function(t) {
-  "function" != typeof t && (t = function(t2) {
+  "function" != typeof t && (t = /* @__PURE__ */ function(t2) {
     return function() {
       return this.matches(t2);
     };
   }(t));
-  for (var n2 = this._groups, e2 = n2.length, r2 = new Array(e2), i2 = 0; i2 < e2; ++i2)
-    for (var o2, a2 = n2[i2], u2 = a2.length, s2 = r2[i2] = [], c2 = 0; c2 < u2; ++c2)
-      (o2 = a2[c2]) && t.call(o2, o2.__data__, c2, a2) && s2.push(o2);
+  for (var n2 = this._groups, e2 = n2.length, r2 = new Array(e2), i2 = 0; i2 < e2; ++i2) for (var o2, a2 = n2[i2], u2 = a2.length, s2 = r2[i2] = [], c2 = 0; c2 < u2; ++c2) (o2 = a2[c2]) && t.call(o2, o2.__data__, c2, a2) && s2.push(o2);
   return new yt(r2, this._parents);
 }, data: function(t, n2) {
-  if (!arguments.length)
-    return Array.from(this, C);
+  if (!arguments.length) return Array.from(this, C);
   var e2 = n2 ? S : D, r2 = this._parents, i2 = this._groups;
   "function" != typeof t && (t = E(t));
   for (var o2 = i2.length, a2 = new Array(o2), u2 = new Array(o2), s2 = new Array(o2), c2 = 0; c2 < o2; ++c2) {
     var l2 = r2[c2], f2 = i2[c2], h3 = f2.length, p2 = M(t.call(l2, l2 && l2.__data__, c2, r2)), d2 = p2.length, g2 = u2[c2] = new Array(d2), v2 = a2[c2] = new Array(d2), y2 = s2[c2] = new Array(h3);
     e2(l2, f2, g2, v2, y2, p2, n2);
-    for (var m2, _2, w2 = 0, x2 = 0; w2 < d2; ++w2)
-      if (m2 = g2[w2]) {
-        for (w2 >= x2 && (x2 = w2 + 1); !(_2 = v2[x2]) && ++x2 < d2; )
-          ;
-        m2._next = _2 || null;
-      }
+    for (var m2, _2, w2 = 0, x2 = 0; w2 < d2; ++w2) if (m2 = g2[w2]) {
+      for (w2 >= x2 && (x2 = w2 + 1); !(_2 = v2[x2]) && ++x2 < d2; ) ;
+      m2._next = _2 || null;
+    }
   }
   return (a2 = new yt(a2, r2))._enter = u2, a2._exit = s2, a2;
 }, enter: function() {
@@ -39531,18 +39641,13 @@ yt.prototype = { constructor: yt, select: function(t) {
   var r2 = this.enter(), i2 = this, o2 = this.exit();
   return "function" == typeof t ? (r2 = t(r2)) && (r2 = r2.selection()) : r2 = r2.append(t + ""), null != n2 && (i2 = n2(i2)) && (i2 = i2.selection()), null == e2 ? o2.remove() : e2(o2), r2 && i2 ? r2.merge(i2).order() : i2;
 }, merge: function(t) {
-  for (var n2 = t.selection ? t.selection() : t, e2 = this._groups, r2 = n2._groups, i2 = e2.length, o2 = r2.length, a2 = Math.min(i2, o2), u2 = new Array(i2), s2 = 0; s2 < a2; ++s2)
-    for (var c2, l2 = e2[s2], f2 = r2[s2], h3 = l2.length, p2 = u2[s2] = new Array(h3), d2 = 0; d2 < h3; ++d2)
-      (c2 = l2[d2] || f2[d2]) && (p2[d2] = c2);
-  for (; s2 < i2; ++s2)
-    u2[s2] = e2[s2];
+  for (var n2 = t.selection ? t.selection() : t, e2 = this._groups, r2 = n2._groups, i2 = e2.length, o2 = r2.length, a2 = Math.min(i2, o2), u2 = new Array(i2), s2 = 0; s2 < a2; ++s2) for (var c2, l2 = e2[s2], f2 = r2[s2], h3 = l2.length, p2 = u2[s2] = new Array(h3), d2 = 0; d2 < h3; ++d2) (c2 = l2[d2] || f2[d2]) && (p2[d2] = c2);
+  for (; s2 < i2; ++s2) u2[s2] = e2[s2];
   return new yt(u2, this._parents);
 }, selection: function() {
   return this;
 }, order: function() {
-  for (var t = this._groups, n2 = -1, e2 = t.length; ++n2 < e2; )
-    for (var r2, i2 = t[n2], o2 = i2.length - 1, a2 = i2[o2]; --o2 >= 0; )
-      (r2 = i2[o2]) && (a2 && 4 ^ r2.compareDocumentPosition(a2) && a2.parentNode.insertBefore(r2, a2), a2 = r2);
+  for (var t = this._groups, n2 = -1, e2 = t.length; ++n2 < e2; ) for (var r2, i2 = t[n2], o2 = i2.length - 1, a2 = i2[o2]; --o2 >= 0; ) (r2 = i2[o2]) && (a2 && 4 ^ r2.compareDocumentPosition(a2) && a2.parentNode.insertBefore(r2, a2), a2 = r2);
   return this;
 }, sort: function(t) {
   function n2(n3, e3) {
@@ -39550,8 +39655,7 @@ yt.prototype = { constructor: yt, select: function(t) {
   }
   t || (t = N);
   for (var e2 = this._groups, r2 = e2.length, i2 = new Array(r2), o2 = 0; o2 < r2; ++o2) {
-    for (var a2, u2 = e2[o2], s2 = u2.length, c2 = i2[o2] = new Array(s2), l2 = 0; l2 < s2; ++l2)
-      (a2 = u2[l2]) && (c2[l2] = a2);
+    for (var a2, u2 = e2[o2], s2 = u2.length, c2 = i2[o2] = new Array(s2), l2 = 0; l2 < s2; ++l2) (a2 = u2[l2]) && (c2[l2] = a2);
     c2.sort(n2);
   }
   return new yt(i2, this._parents).order();
@@ -39561,24 +39665,19 @@ yt.prototype = { constructor: yt, select: function(t) {
 }, nodes: function() {
   return Array.from(this);
 }, node: function() {
-  for (var t = this._groups, n2 = 0, e2 = t.length; n2 < e2; ++n2)
-    for (var r2 = t[n2], i2 = 0, o2 = r2.length; i2 < o2; ++i2) {
-      var a2 = r2[i2];
-      if (a2)
-        return a2;
-    }
+  for (var t = this._groups, n2 = 0, e2 = t.length; n2 < e2; ++n2) for (var r2 = t[n2], i2 = 0, o2 = r2.length; i2 < o2; ++i2) {
+    var a2 = r2[i2];
+    if (a2) return a2;
+  }
   return null;
 }, size: function() {
   let t = 0;
-  for (const n2 of this)
-    ++t;
+  for (const n2 of this) ++t;
   return t;
 }, empty: function() {
   return !this.node();
 }, each: function(t) {
-  for (var n2 = this._groups, e2 = 0, r2 = n2.length; e2 < r2; ++e2)
-    for (var i2, o2 = n2[e2], a2 = 0, u2 = o2.length; a2 < u2; ++a2)
-      (i2 = o2[a2]) && t.call(i2, i2.__data__, a2, o2);
+  for (var n2 = this._groups, e2 = 0, r2 = n2.length; e2 < r2; ++e2) for (var i2, o2 = n2[e2], a2 = 0, u2 = o2.length; a2 < u2; ++a2) (i2 = o2[a2]) && t.call(i2, i2.__data__, a2, o2);
   return this;
 }, attr: function(t, n2) {
   var e2 = c(t);
@@ -39594,9 +39693,7 @@ yt.prototype = { constructor: yt, select: function(t) {
 }, classed: function(t, n2) {
   var e2 = F(t + "");
   if (arguments.length < 2) {
-    for (var r2 = z(this.node()), i2 = -1, o2 = e2.length; ++i2 < o2; )
-      if (!r2.contains(e2[i2]))
-        return false;
+    for (var r2 = z(this.node()), i2 = -1, o2 = e2.length; ++i2 < o2; ) if (!r2.contains(e2[i2])) return false;
     return true;
   }
   return this.each(("function" == typeof n2 ? W : n2 ? J : Q)(e2, n2));
@@ -39627,23 +39724,17 @@ yt.prototype = { constructor: yt, select: function(t) {
 }, on: function(t, n2, e2) {
   var r2, i2, o2 = lt(t + ""), a2 = o2.length;
   if (!(arguments.length < 2)) {
-    for (u2 = n2 ? ht : ft, r2 = 0; r2 < a2; ++r2)
-      this.each(u2(o2[r2], n2, e2));
+    for (u2 = n2 ? ht : ft, r2 = 0; r2 < a2; ++r2) this.each(u2(o2[r2], n2, e2));
     return this;
   }
   var u2 = this.node().__on;
   if (u2) {
-    for (var s2, c2 = 0, l2 = u2.length; c2 < l2; ++c2)
-      for (r2 = 0, s2 = u2[c2]; r2 < a2; ++r2)
-        if ((i2 = o2[r2]).type === s2.type && i2.name === s2.name)
-          return s2.value;
+    for (var s2, c2 = 0, l2 = u2.length; c2 < l2; ++c2) for (r2 = 0, s2 = u2[c2]; r2 < a2; ++r2) if ((i2 = o2[r2]).type === s2.type && i2.name === s2.name) return s2.value;
   }
 }, dispatch: function(t, n2) {
   return this.each(("function" == typeof n2 ? gt : dt)(t, n2));
 }, [Symbol.iterator]: function* () {
-  for (var t = this._groups, n2 = 0, e2 = t.length; n2 < e2; ++n2)
-    for (var r2, i2 = t[n2], o2 = 0, a2 = i2.length; o2 < a2; ++o2)
-      (r2 = i2[o2]) && (yield r2);
+  for (var t = this._groups, n2 = 0, e2 = t.length; n2 < e2; ++n2) for (var r2, i2 = t[n2], o2 = 0, a2 = i2.length; o2 < a2; ++o2) (r2 = i2[o2]) && (yield r2);
 } };
 const wt = { passive: false }, xt = { capture: true, passive: false };
 function bt(t) {
@@ -39700,38 +39791,34 @@ function Pt() {
   function y2(t2, n3) {
     if (o2.call(this, t2, n3)) {
       var e2, r3, i3 = t2.changedTouches, u3 = a2.call(this, t2, n3), s3 = i3.length;
-      for (e2 = 0; e2 < s3; ++e2)
-        (r3 = w2(this, u3, t2, n3, i3[e2].identifier, i3[e2])) && (bt(t2), r3("start", t2, i3[e2]));
+      for (e2 = 0; e2 < s3; ++e2) (r3 = w2(this, u3, t2, n3, i3[e2].identifier, i3[e2])) && (bt(t2), r3("start", t2, i3[e2]));
     }
   }
   function m2(t2) {
     var n3, e2, r3 = t2.changedTouches, i3 = r3.length;
-    for (n3 = 0; n3 < i3; ++n3)
-      (e2 = c2[r3[n3].identifier]) && (At(t2), e2("drag", t2, r3[n3]));
+    for (n3 = 0; n3 < i3; ++n3) (e2 = c2[r3[n3].identifier]) && (At(t2), e2("drag", t2, r3[n3]));
   }
   function _2(t2) {
     var n3, e2, r3 = t2.changedTouches, o3 = r3.length;
     for (i2 && clearTimeout(i2), i2 = setTimeout(function() {
       i2 = null;
-    }, 500), n3 = 0; n3 < o3; ++n3)
-      (e2 = c2[r3[n3].identifier]) && (bt(t2), e2("end", t2, r3[n3]));
+    }, 500), n3 = 0; n3 < o3; ++n3) (e2 = c2[r3[n3].identifier]) && (bt(t2), e2("end", t2, r3[n3]));
   }
   function w2(t2, n3, e2, r3, i3, o3) {
     var a3, s3, h4, d3 = l2.copy(), g3 = _t(o3 || e2, n3);
-    if (null != (h4 = u2.call(t2, new Dt("beforestart", { sourceEvent: e2, target: p2, identifier: i3, active: f2, x: g3[0], y: g3[1], dx: 0, dy: 0, dispatch: d3 }), r3)))
-      return a3 = h4.x - g3[0] || 0, s3 = h4.y - g3[1] || 0, function e3(o4, u3, l3) {
-        var v3, y3 = g3;
-        switch (o4) {
-          case "start":
-            c2[i3] = e3, v3 = f2++;
-            break;
-          case "end":
-            delete c2[i3], --f2;
-          case "drag":
-            g3 = _t(l3 || u3, n3), v3 = f2;
-        }
-        d3.call(o4, t2, new Dt(o4, { sourceEvent: u3, subject: h4, target: p2, identifier: i3, active: v3, x: g3[0] + a3, y: g3[1] + s3, dx: g3[0] - y3[0], dy: g3[1] - y3[1], dispatch: d3 }), r3);
-      };
+    if (null != (h4 = u2.call(t2, new Dt("beforestart", { sourceEvent: e2, target: p2, identifier: i3, active: f2, x: g3[0], y: g3[1], dx: 0, dy: 0, dispatch: d3 }), r3))) return a3 = h4.x - g3[0] || 0, s3 = h4.y - g3[1] || 0, function e3(o4, u3, l3) {
+      var v3, y3 = g3;
+      switch (o4) {
+        case "start":
+          c2[i3] = e3, v3 = f2++;
+          break;
+        case "end":
+          delete c2[i3], --f2;
+        case "drag":
+          g3 = _t(l3 || u3, n3), v3 = f2;
+      }
+      d3.call(o4, t2, new Dt(o4, { sourceEvent: u3, subject: h4, target: p2, identifier: i3, active: v3, x: g3[0] + a3, y: g3[1] + s3, dx: g3[0] - y3[0], dy: g3[1] - y3[1], dispatch: d3 }), r3);
+    };
   }
   return p2.filter = function(t2) {
     return arguments.length ? (o2 = "function" == typeof t2 ? t2 : Et(!!t2), p2) : o2;
@@ -39771,17 +39858,15 @@ const zt = (t, n2, e2, r2) => {
   if (Bt) {
     Xt = Bt.datasetIndex, jt = Bt.index, qt = true;
     let i2 = n2.data.datasets[Xt].data[jt];
-    if ("radar" === Rt || "polarArea" === Rt)
-      i2 = function(t2, n3) {
-        let e3, r3, i3;
-        t2.touches ? (e3 = t2.touches[0].clientX - n3.canvas.getBoundingClientRect().left, r3 = t2.touches[0].clientY - n3.canvas.getBoundingClientRect().top) : (e3 = t2.clientX - n3.canvas.getBoundingClientRect().left, r3 = t2.clientY - n3.canvas.getBoundingClientRect().top);
-        let o2 = n3.scales[It], a2 = Math.sqrt(Math.pow(e3 - o2.xCenter, 2) + Math.pow(r3 - o2.yCenter, 2)), u2 = o2.drawingArea / (o2.max - o2.min);
-        return i3 = o2.options.ticks.reverse ? o2.max - a2 / u2 : o2.min + a2 / u2, i3 = Ut(i3, n3.config.options.plugins.dragData.round), i3 = i3 > n3.scales[It].max ? n3.scales[It].max : i3, i3 = i3 < n3.scales[It].min ? n3.scales[It].min : i3, i3;
-      }(t, n2);
+    if ("radar" === Rt || "polarArea" === Rt) i2 = function(t2, n3) {
+      let e3, r3, i3;
+      t2.touches ? (e3 = t2.touches[0].clientX - n3.canvas.getBoundingClientRect().left, r3 = t2.touches[0].clientY - n3.canvas.getBoundingClientRect().top) : (e3 = t2.clientX - n3.canvas.getBoundingClientRect().left, r3 = t2.clientY - n3.canvas.getBoundingClientRect().top);
+      let o2 = n3.scales[It], a2 = Math.sqrt(Math.pow(e3 - o2.xCenter, 2) + Math.pow(r3 - o2.yCenter, 2)), u2 = o2.drawingArea / (o2.max - o2.min);
+      return i3 = o2.options.ticks.reverse ? o2.max - a2 / u2 : o2.min + a2 / u2, i3 = Ut(i3, n3.config.options.plugins.dragData.round), i3 = i3 > n3.scales[It].max ? n3.scales[It].max : i3, i3 = i3 < n3.scales[It].min ? n3.scales[It].min : i3, i3;
+    }(t, n2);
     else if (Lt) {
       i2 = Ut(Ft(t, n2, Xt, jt) - Vt, e2.round);
-    } else
-      i2 = Ft(t, n2, Xt, jt);
+    } else i2 = Ft(t, n2, Xt, jt);
     (!r2 || "function" == typeof r2 && false !== r2(t, Xt, jt, i2)) && (n2.data.datasets[Xt].data[jt] = i2, n2.update("none"));
   }
 };
@@ -39800,8 +39885,7 @@ const Ht = { id: "dragdata", afterInit: function(t) {
         }(() => n3.config.options.plugins.tooltip.animation);
         const o2 = n3.data.datasets[r2], a2 = n3.getDatasetMeta(r2);
         let u2 = o2.data[i2];
-        if (kt = a2.xAxisID, Tt = a2.yAxisID, It = a2.rAxisID, false === o2.dragData || n3.config.options.scales[kt] && false === n3.config.options.scales[kt].dragData || n3.config.options.scales[Tt] && false === n3.config.options.scales[Tt].dragData || n3.config.options.scales[It] && false === n3.config.options.scales[It].rAxisID || false === o2.data[Bt.index].dragData)
-          return void (Bt = null);
+        if (kt = a2.xAxisID, Tt = a2.yAxisID, It = a2.rAxisID, false === o2.dragData || n3.config.options.scales[kt] && false === n3.config.options.scales[kt].dragData || n3.config.options.scales[Tt] && false === n3.config.options.scales[Tt].dragData || n3.config.options.scales[It] && false === n3.config.options.scales[It].rAxisID || false === o2.data[Bt.index].dragData) return void (Bt = null);
         if ("bar" === Rt) {
           Lt = n3.config.options.scales[kt].stacked;
           const e4 = n3.data.datasets[0].data[0];
@@ -39816,8 +39900,7 @@ const Ht = { id: "dragdata", afterInit: function(t) {
         const r2 = Bt.datasetIndex, i2 = Bt.index;
         let o2 = function(t3, n4, e4) {
           const r3 = t3.config.options.plugins.dragData;
-          if (!r3.magnet)
-            return t3.data.datasets[n4].data[e4];
+          if (!r3.magnet) return t3.data.datasets[n4].data[e4];
           {
             const i3 = r3.magnet;
             if (i3.to && "function" == typeof i3.to) {
@@ -39831,8 +39914,7 @@ const Ht = { id: "dragdata", afterInit: function(t) {
     })(e2.sourceEvent, t, n2.onDragEnd)));
   }
 }, beforeEvent: function(t) {
-  if (qt)
-    return t.tooltip && t.tooltip.update(), false;
+  if (qt) return t.tooltip && t.tooltip.update(), false;
 } };
 Chart.register(Ht);
 const useBarChartConfig = (chartRef, chart2) => {
@@ -40055,8 +40137,7 @@ const getBarChartToolTips = (options) => {
     const x2 = Array.isArray((_a3 = options.axes) == null ? void 0 : _a3.x) ? options.axes.x : [];
     const y2 = Array.isArray((_b2 = options.axes) == null ? void 0 : _b2.y) ? options.axes.y : [];
     const getAxisIndex = (axisID) => {
-      if (!axisID)
-        return 0;
+      if (!axisID) return 0;
       const match = axisID.match(/\d+$/);
       return match ? parseInt(match[0], 10) - 1 : 0;
     };
@@ -40687,8 +40768,7 @@ const gradientBackgroundPlugin = {
       gradientColors,
       direction = GradientDirection.BottomLeftToTopRight
     } = gradientOptions ?? {};
-    if (!display || !gradientColors || gradientColors.length === 0)
-      return;
+    if (!display || !gradientColors || gradientColors.length === 0) return;
     const [x0, y0, x1, y1] = getGradientCoordinates(direction, chartArea);
     const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
     gradientColors.forEach(({ offset, color: color2 }) => {
@@ -40784,9 +40864,13 @@ const ScatterChartWithLegend = (props) => {
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(ScatterChart, { ...props }) });
 };
 export {
+  AlignOptions,
+  AnnotationType$1 as AnnotationType,
   BarChartWithLegend as BarChart,
   LineChartWithLegend as LineChart,
   PieChartWithLegend as PieChart,
+  PointStyle,
+  Position,
   ScatterChartWithLegend as ScatterChart,
   initializeLineChart
 };
@@ -40796,7 +40880,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_1961q_1 {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--padding-xs);\n}\n._buttons_1961q_7 {\n  display: flex;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-end;\n  margin-left: auto;\n  gap: var(--padding-xxs);\n}\n._legend_wpro0_1 {\n  position: absolute;\n  opacity: 0.9;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n  opacity: 0;\n}\n._legendItems_wpro0_11 {\n  background-color: var(--color-background-raised);\n  border: 1px solid var(--color-border);\n  padding: 4px 8px;\n  border-radius: 2px;\n  overflow-y: auto;\n  max-height: 100%;\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n  display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n  display: none;\n}\n._legendToggle_wpro0_50 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n  display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  position: static;\n  transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n  display: none;\n}\n._legendItem_wpro0_11 {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  user-select: none;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n  display: flex;\n  align-items: center;\n  height: 16px;\n  position: relative;\n  flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n  filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n  width: 100%;\n  height: 12px;\n  display: block;\n}\n._legendItemLine_wpro0_95 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n  position: absolute;\n  display: flex;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n  text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n  overflow: overlay;\n  --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n  display: block;\n  width: 16px;\n  z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n  display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n  background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n  background-color: #00000000;\n  border: 5px solid transparent;\n  border-radius: 24px;\n  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n  position: absolute;\n}\n._dropzone_wpro0_140 {\n  position: absolute;\n  width: 50%;\n  height: 50%;\n  display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n  left: 0;\n  justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n  right: 0;\n  justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n  top: 0;\n  align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n  bottom: 0;\n  align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.05);\n  display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n  display: block;\n}\n._resizeContainer_wpro0_176 {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_x1sru_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_x1sru_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_x1sru_38 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n  margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_x1sru_53 {\n  width: auto;\n  height: auto;\n}\n._actions_x1sru_57 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  padding-top: 10px;\n  position: relative;\n}\n._chart_1jdnu_1 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_1jdnu_1:focus {\n  border: 1px solid #85b7d9;\n  outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_1jdnu_32 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n  margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n  width: 'auto';\n  height: 'auto';\n}"));
+      elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n  filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n  border: 1px solid rgba(255, 255, 255, 0);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n  flex-grow: 1;\n  min-height: 0;\n  position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n  aspect-ratio: 1;\n  min-height: 0;\n  min-width: 0;\n}\n._chart_e3qdd_1:focus {\n  outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n  border: 0;\n}\n._zoomForm_e3qdd_43 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n  margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n  margin-left: 5px;\n  line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n  width: auto;\n  height: auto;\n}\n._table_e3qdd_62 {\n  overflow: auto;\n}\n._controls_1edjs_1 {\n  display: flex;\n  align-items: center;\n  gap: var(--padding-xs);\n}\n._buttons_1edjs_6 {\n  display: flex;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-end;\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) {