@dynatrace/strato-components 3.11.2 → 3.12.0

package/esm/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.tsx"],
-  "sourcesContent": ["import { Fragment, type CSSProperties, type ReactNode } from 'react';\n\nimport { labelClipWrapper, labelSpan } from './BarLabelOverlay.sty.js';\nimport { BAR_LABEL_MIN_SIZE, BAR_LABEL_PADDING } from './label-utils.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../../core/components/text-ellipsis/truncate-string.js';\n\ninterface HorizontalBarLabelProps {\n  x: number;\n  y: number;\n  barWidth: number;\n  barHeight: number;\n  canvasWidth: number;\n  isReversed: boolean;\n  text: string;\n  insideColor: string;\n  outsideColor: string;\n  truncationMode: TruncationMode;\n}\n\n/**\n * HTML \"split-clip\" label for a single horizontal bar.\n *\n * The label renders twice: an outer copy (`outsideColor`) spans from the bar's\n * leading edge to the chart's opposite edge so long labels overflow the bar\n * up to the chart bounds; a wrapper at the bar's bounds clips an inner copy\n * (`insideColor`) via `overflow: hidden`. Where the two overlap, the inner\n * copy paints on top so the section *inside the bar* picks up the contrast\n * color while the section *outside the bar* keeps the neutral text color.\n *\n * When `isReversed` is true (the numerical X axis has `reversed` set, i.e.\n * RTL bars) the layout mirrors: bars grow right-to-left and the label anchors\n * at the bar's right edge (the zero-baseline side), allowing overflow toward\n * the left edge.\n */\nexport function HorizontalBarLabel({\n  x,\n  y,\n  barWidth,\n  barHeight,\n  canvasWidth,\n  isReversed,\n  text,\n  insideColor,\n  outsideColor,\n  truncationMode,\n}: Readonly<HorizontalBarLabelProps>): ReactNode {\n  // For horizontal bars the text's height sits across the bar's HEIGHT.\n  if (barHeight < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const centerY = y + barHeight / 2;\n  const availLength = isReversed\n    ? x + barWidth - 2 * BAR_LABEL_PADDING\n    : canvasWidth - x - 2 * BAR_LABEL_PADDING;\n  if (availLength < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const truncated = truncateString(\n    text,\n    availLength,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n\n  const anchor: CSSProperties = isReversed\n    ? { right: BAR_LABEL_PADDING, textAlign: 'right' }\n    : { left: x + BAR_LABEL_PADDING };\n\n  const outerStyle: CSSProperties = {\n    ...anchor,\n    top: centerY,\n    transform: 'translateY(-50%)',\n    width: availLength,\n    color: outsideColor,\n  };\n  const wrapperStyle: CSSProperties = {\n    left: x,\n    top: y,\n    width: barWidth,\n    height: barHeight,\n  };\n  const innerStyle: CSSProperties = {\n    ...(isReversed ? anchor : { left: BAR_LABEL_PADDING }),\n    top: barHeight / 2,\n    transform: 'translateY(-50%)',\n    width: availLength,\n    color: insideColor,\n  };\n  return (\n    <Fragment>\n      <span className={labelSpan} style={outerStyle}>\n        {truncated}\n      </span>\n      <div className={labelClipWrapper} style={wrapperStyle}>\n        <span className={labelSpan} style={innerStyle}>\n          {truncated}\n        </span>\n      </div>\n    </Fragment>\n  );\n}\n\nHorizontalBarLabel['displayName'] = 'HorizontalBarLabel';\n"],
-  "mappings": "AA6FI,SACE,KADF;AA7FJ,SAAS,gBAAoD;AAE7D,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,oBAAoB,yBAAyB;AAEtD,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AA8BxB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAE/C,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,YAAY;AAChC,QAAM,cAAc,aAChB,IAAI,WAAW,IAAI,oBACnB,cAAc,IAAI,IAAI;AAC1B,MAAI,cAAc,oBAAoB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAwB,aAC1B,EAAE,OAAO,mBAAmB,WAAW,QAAQ,IAC/C,EAAE,MAAM,IAAI,kBAAkB;AAElC,QAAM,aAA4B;AAAA,IAChC,GAAG;AAAA,IACH,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACA,QAAM,eAA8B;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACA,QAAM,aAA4B;AAAA,IAChC,GAAI,aAAa,SAAS,EAAE,MAAM,kBAAkB;AAAA,IACpD,KAAK,YAAY;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACA,SACE,qBAAC,YACC;AAAA,wBAAC,UAAK,WAAW,WAAW,OAAO,YAChC,qBACH;AAAA,IACA,oBAAC,SAAI,WAAW,kBAAkB,OAAO,cACvC,8BAAC,UAAK,WAAW,WAAW,OAAO,YAChC,qBACH,GACF;AAAA,KACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { type CSSProperties, type ReactNode } from 'react';\n\nimport { labelSpan } from './BarLabelOverlay.sty.js';\nimport { BAR_LABEL_MIN_SIZE, BAR_LABEL_PADDING } from './label-utils.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../../core/components/text-ellipsis/truncate-string.js';\n\ninterface HorizontalBarLabelProps {\n  x: number;\n  y: number;\n  barWidth: number;\n  barHeight: number;\n  canvasWidth: number;\n  isReversed: boolean;\n  text: string;\n  insideColor: string;\n  outsideColor: string;\n  truncationMode: TruncationMode;\n}\n\n/**\n * HTML label for a single horizontal bar. Colored via a hard-stop gradient\n * clipped to the text rather than two overlapping copies of the text, which\n * used to render visibly bolder on Windows (APPDEV-19526).\n *\n * When `isReversed` is true (RTL), the layout mirrors: bars grow\n * right-to-left and the label anchors at the bar's right edge.\n */\nexport function HorizontalBarLabel({\n  x,\n  y,\n  barWidth,\n  barHeight,\n  canvasWidth,\n  isReversed,\n  text,\n  insideColor,\n  outsideColor,\n  truncationMode,\n}: Readonly<HorizontalBarLabelProps>): ReactNode {\n  if (barHeight < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const centerY = y + barHeight / 2;\n  const availLength = isReversed\n    ? x + barWidth - 2 * BAR_LABEL_PADDING\n    : canvasWidth - x - 2 * BAR_LABEL_PADDING;\n  if (availLength < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const truncated = truncateString(\n    text,\n    availLength,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n\n  const insideExtent = Math.max(\n    0,\n    Math.min(availLength, barWidth - BAR_LABEL_PADDING),\n  );\n  const insidePercent = (insideExtent / availLength) * 100;\n  const gradient = isReversed\n    ? `linear-gradient(to right, ${outsideColor} 0%, ${outsideColor} ${100 - insidePercent}%, ${insideColor} ${100 - insidePercent}%, ${insideColor} 100%)`\n    : `linear-gradient(to right, ${insideColor} 0%, ${insideColor} ${insidePercent}%, ${outsideColor} ${insidePercent}%, ${outsideColor} 100%)`;\n\n  const style: CSSProperties = {\n    ...(isReversed\n      ? {\n          right: canvasWidth - (x + barWidth) + BAR_LABEL_PADDING,\n          textAlign: 'right' as const,\n        }\n      : { left: x + BAR_LABEL_PADDING }),\n    top: centerY,\n    transform: 'translateY(-50%)',\n    width: availLength,\n    backgroundImage: gradient,\n    WebkitBackgroundClip: 'text',\n    backgroundClip: 'text',\n    color: 'transparent',\n  };\n\n  return (\n    <span className={labelSpan} style={style}>\n      {truncated}\n    </span>\n  );\n}\n\nHorizontalBarLabel['displayName'] = 'HorizontalBarLabel';\n"],
+  "mappings": "AAsFI;AApFJ,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,yBAAyB;AAEtD,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAuBxB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,YAAY;AAChC,QAAM,cAAc,aAChB,IAAI,WAAW,IAAI,oBACnB,cAAc,IAAI,IAAI;AAC1B,MAAI,cAAc,oBAAoB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,eAAe,KAAK;AAAA,IACxB;AAAA,IACA,KAAK,IAAI,aAAa,WAAW,iBAAiB;AAAA,EACpD;AACA,QAAM,gBAAiB,eAAe,cAAe;AACrD,QAAM,WAAW,aACb,6BAA6B,YAAY,QAAQ,YAAY,IAAI,MAAM,aAAa,MAAM,WAAW,IAAI,MAAM,aAAa,MAAM,WAAW,WAC7I,6BAA6B,WAAW,QAAQ,WAAW,IAAI,aAAa,MAAM,YAAY,IAAI,aAAa,MAAM,YAAY;AAErI,QAAM,QAAuB;AAAA,IAC3B,GAAI,aACA;AAAA,MACE,OAAO,eAAe,IAAI,YAAY;AAAA,MACtC,WAAW;AAAA,IACb,IACA,EAAE,MAAM,IAAI,kBAAkB;AAAA,IAClC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAEA,SACE,oBAAC,UAAK,WAAW,WAAW,OACzB,qBACH;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { labelClipWrapper, labelSpan } from "./BarLabelOverlay.sty.js";
+import { jsx } from "react/jsx-runtime";
+import { labelSpan } from "./BarLabelOverlay.sty.js";
 import { BAR_LABEL_MIN_SIZE, BAR_LABEL_PADDING } from "./label-utils.js";
 import { charsFontWidth12pixelsSize400Map } from "../../../../core/components/text-ellipsis/chars-font-width-map.js";
 import { truncateString } from "../../../../core/components/text-ellipsis/truncate-string.js";
@@ -32,30 +31,28 @@ function VerticalBarLabel({
   const centerX = x + barWidth / 2;
   const centerY = canvasHeight / 2;
   const rotation = isReversed ? "rotate(90deg)" : "rotate(-90deg)";
-  const outerStyle = {
+  const toGradientPosition = (screenY) => {
+    const t = (screenY - BAR_LABEL_PADDING) / availLength;
+    return isReversed ? t : 1 - t;
+  };
+  const barStart = toGradientPosition(y);
+  const barEnd = toGradientPosition(y + barHeight);
+  const insideStart = Math.max(0, Math.min(1, Math.min(barStart, barEnd)));
+  const insideEnd = Math.max(0, Math.min(1, Math.max(barStart, barEnd)));
+  const insideStartPercent = insideStart * 100;
+  const insideEndPercent = insideEnd * 100;
+  const gradient = `linear-gradient(to right, ${outsideColor} 0%, ${outsideColor} ${insideStartPercent}%, ${insideColor} ${insideStartPercent}%, ${insideColor} ${insideEndPercent}%, ${outsideColor} ${insideEndPercent}%, ${outsideColor} 100%)`;
+  const style = {
     left: centerX,
     top: centerY,
     transform: `translate(-50%, -50%) ${rotation}`,
     width: availLength,
-    color: outsideColor
-  };
-  const wrapperStyle = {
-    left: x,
-    top: y,
-    width: barWidth,
-    height: barHeight
-  };
-  const innerStyle = {
-    left: barWidth / 2,
-    top: centerY - y,
-    transform: `translate(-50%, -50%) ${rotation}`,
-    width: availLength,
-    color: insideColor
+    backgroundImage: gradient,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    color: "transparent"
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: labelSpan, style: outerStyle, children: truncated }),
-    /* @__PURE__ */ jsx("div", { className: labelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ jsx("span", { className: labelSpan, style: innerStyle, children: truncated }) })
-  ] });
+  return /* @__PURE__ */ jsx("span", { className: labelSpan, style, children: truncated });
 }
 VerticalBarLabel["displayName"] = "VerticalBarLabel";
 export {

package/esm/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.tsx"],
-  "sourcesContent": ["import { Fragment, type CSSProperties, type ReactNode } from 'react';\n\nimport { labelClipWrapper, labelSpan } from './BarLabelOverlay.sty.js';\nimport { BAR_LABEL_MIN_SIZE, BAR_LABEL_PADDING } from './label-utils.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../../core/components/text-ellipsis/truncate-string.js';\n\ninterface VerticalBarLabelProps {\n  x: number;\n  y: number;\n  barWidth: number;\n  barHeight: number;\n  canvasHeight: number;\n  isReversed: boolean;\n  text: string;\n  insideColor: string;\n  outsideColor: string;\n  truncationMode: TruncationMode;\n}\n\n/**\n * HTML \"split-clip\" label for a single vertical bar.\n *\n * Mirrors the horizontal split-clip pattern but rotated. The constraining\n * dimension is the bar's WIDTH (perpendicular to the rotated text's reading\n * direction); the bar's height does not constrain a rotated label \u2014 the\n * available text length runs the full chart height minus padding.\n *\n * When `isReversed` is false (BTT, normal) the bar grows upward and the label\n * is rotated \u221290\u00B0, reading bottom-to-top.\n *\n * When `isReversed` is true (the numerical Y axis has `reversed` set, i.e.\n * TTB) the bar grows downward from the chart top and the label is rotated\n * +90\u00B0, reading top-to-bottom.\n */\nexport function VerticalBarLabel({\n  x,\n  y,\n  barWidth,\n  barHeight,\n  canvasHeight,\n  isReversed,\n  text,\n  insideColor,\n  outsideColor,\n  truncationMode,\n}: Readonly<VerticalBarLabelProps>): ReactNode {\n  // For vertical bars the rotated text's *height* (font line-box) sits across\n  // the bar's WIDTH. The bar height does not constrain a rotated label.\n  if (barWidth < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const availLength = canvasHeight - 2 * BAR_LABEL_PADDING;\n  if (availLength < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const truncated = truncateString(\n    text,\n    availLength,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n\n  const centerX = x + barWidth / 2;\n  const centerY = canvasHeight / 2;\n\n  const rotation = isReversed ? 'rotate(90deg)' : 'rotate(-90deg)';\n\n  const outerStyle: CSSProperties = {\n    left: centerX,\n    top: centerY,\n    transform: `translate(-50%, -50%) ${rotation}`,\n    width: availLength,\n    color: outsideColor,\n  };\n  const wrapperStyle: CSSProperties = {\n    left: x,\n    top: y,\n    width: barWidth,\n    height: barHeight,\n  };\n  // The inner span must sit at the same absolute position as the outer span,\n  // expressed relative to the clip wrapper's origin at (x, y).\n  const innerStyle: CSSProperties = {\n    left: barWidth / 2,\n    top: centerY - y,\n    transform: `translate(-50%, -50%) ${rotation}`,\n    width: availLength,\n    color: insideColor,\n  };\n\n  return (\n    <Fragment>\n      <span className={labelSpan} style={outerStyle}>\n        {truncated}\n      </span>\n      <div className={labelClipWrapper} style={wrapperStyle}>\n        <span className={labelSpan} style={innerStyle}>\n          {truncated}\n        </span>\n      </div>\n    </Fragment>\n  );\n}\n\nVerticalBarLabel['displayName'] = 'VerticalBarLabel';\n"],
-  "mappings": "AA+FI,SACE,KADF;AA/FJ,SAAS,gBAAoD;AAE7D,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,oBAAoB,yBAAyB;AAEtD,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AA8BxB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAG7C,MAAI,WAAW,oBAAoB;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,eAAe,IAAI;AACvC,MAAI,cAAc,oBAAoB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,UAAU,eAAe;AAE/B,QAAM,WAAW,aAAa,kBAAkB;AAEhD,QAAM,aAA4B;AAAA,IAChC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW,yBAAyB,QAAQ;AAAA,IAC5C,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACA,QAAM,eAA8B;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAGA,QAAM,aAA4B;AAAA,IAChC,MAAM,WAAW;AAAA,IACjB,KAAK,UAAU;AAAA,IACf,WAAW,yBAAyB,QAAQ;AAAA,IAC5C,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,SACE,qBAAC,YACC;AAAA,wBAAC,UAAK,WAAW,WAAW,OAAO,YAChC,qBACH;AAAA,IACA,oBAAC,SAAI,WAAW,kBAAkB,OAAO,cACvC,8BAAC,UAAK,WAAW,WAAW,OAAO,YAChC,qBACH,GACF;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { type CSSProperties, type ReactNode } from 'react';\n\nimport { labelSpan } from './BarLabelOverlay.sty.js';\nimport { BAR_LABEL_MIN_SIZE, BAR_LABEL_PADDING } from './label-utils.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../../core/components/text-ellipsis/truncate-string.js';\n\ninterface VerticalBarLabelProps {\n  x: number;\n  y: number;\n  barWidth: number;\n  barHeight: number;\n  canvasHeight: number;\n  isReversed: boolean;\n  text: string;\n  insideColor: string;\n  outsideColor: string;\n  truncationMode: TruncationMode;\n}\n\n/**\n * HTML label for a single vertical (rotated) bar \u2014 see `HorizontalBarLabel`\n * for the coloring approach explanation.\n *\n * When `isReversed` is false (BTT, normal) the bar grows upward and the label\n * is rotated \u221290\u00B0, reading bottom-to-top.\n *\n * When `isReversed` is true (the numerical Y axis has `reversed` set, i.e.\n * TTB) the bar grows downward from the chart top and the label is rotated\n * +90\u00B0, reading top-to-bottom.\n */\nexport function VerticalBarLabel({\n  x,\n  y,\n  barWidth,\n  barHeight,\n  canvasHeight,\n  isReversed,\n  text,\n  insideColor,\n  outsideColor,\n  truncationMode,\n}: Readonly<VerticalBarLabelProps>): ReactNode {\n  // For vertical bars the rotated text's *height* (font line-box) sits across\n  // the bar's WIDTH. The bar height does not constrain a rotated label.\n  if (barWidth < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const availLength = canvasHeight - 2 * BAR_LABEL_PADDING;\n  if (availLength < BAR_LABEL_MIN_SIZE) {\n    return null;\n  }\n\n  const truncated = truncateString(\n    text,\n    availLength,\n    charsFontWidth12pixelsSize400Map,\n    truncationMode,\n  );\n\n  const centerX = x + barWidth / 2;\n  const centerY = canvasHeight / 2;\n\n  const rotation = isReversed ? 'rotate(90deg)' : 'rotate(-90deg)';\n\n  const toGradientPosition = (screenY: number) => {\n    const t = (screenY - BAR_LABEL_PADDING) / availLength;\n    return isReversed ? t : 1 - t;\n  };\n\n  const barStart = toGradientPosition(y);\n  const barEnd = toGradientPosition(y + barHeight);\n  const insideStart = Math.max(0, Math.min(1, Math.min(barStart, barEnd)));\n  const insideEnd = Math.max(0, Math.min(1, Math.max(barStart, barEnd)));\n  const insideStartPercent = insideStart * 100;\n  const insideEndPercent = insideEnd * 100;\n\n  const gradient = `linear-gradient(to right, ${outsideColor} 0%, ${outsideColor} ${insideStartPercent}%, ${insideColor} ${insideStartPercent}%, ${insideColor} ${insideEndPercent}%, ${outsideColor} ${insideEndPercent}%, ${outsideColor} 100%)`;\n\n  const style: CSSProperties = {\n    left: centerX,\n    top: centerY,\n    transform: `translate(-50%, -50%) ${rotation}`,\n    width: availLength,\n    backgroundImage: gradient,\n    WebkitBackgroundClip: 'text',\n    backgroundClip: 'text',\n    color: 'transparent',\n  };\n\n  return (\n    <span className={labelSpan} style={style}>\n      {truncated}\n    </span>\n  );\n}\n\nVerticalBarLabel['displayName'] = 'VerticalBarLabel';\n"],
+  "mappings": "AA6FI;AA3FJ,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,yBAAyB;AAEtD,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AA0BxB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAG7C,MAAI,WAAW,oBAAoB;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,eAAe,IAAI;AACvC,MAAI,cAAc,oBAAoB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,UAAU,eAAe;AAE/B,QAAM,WAAW,aAAa,kBAAkB;AAEhD,QAAM,qBAAqB,CAAC,YAAoB;AAC9C,UAAM,KAAK,UAAU,qBAAqB;AAC1C,WAAO,aAAa,IAAI,IAAI;AAAA,EAC9B;AAEA,QAAM,WAAW,mBAAmB,CAAC;AACrC,QAAM,SAAS,mBAAmB,IAAI,SAAS;AAC/C,QAAM,cAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,MAAM,CAAC,CAAC;AACvE,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,MAAM,CAAC,CAAC;AACrE,QAAM,qBAAqB,cAAc;AACzC,QAAM,mBAAmB,YAAY;AAErC,QAAM,WAAW,6BAA6B,YAAY,QAAQ,YAAY,IAAI,kBAAkB,MAAM,WAAW,IAAI,kBAAkB,MAAM,WAAW,IAAI,gBAAgB,MAAM,YAAY,IAAI,gBAAgB,MAAM,YAAY;AAExO,QAAM,QAAuB;AAAA,IAC3B,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW,yBAAyB,QAAQ;AAAA,IAC5C,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAEA,SACE,oBAAC,UAAK,WAAW,WAAW,OACzB,qBACH;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.css

@@ -1,10 +1,10 @@
-._1a48u8w0-3-11-2 {
+._1a48u8w0-3-12-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._1a48u8w1-3-11-2 {
+._1a48u8w1-3-12-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._1a48u8w2-3-11-2 {
+._1a48u8w2-3-12-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./RectLabelOverlay.css";
-var rectLabelClipWrapper = "_1a48u8w2-3-11-2";
-var rectLabelSpan = "_1a48u8w1-3-11-2";
-var rectOverlayContainer = "_1a48u8w0-3-11-2";
+var rectLabelClipWrapper = "_1a48u8w2-3-12-0";
+var rectLabelSpan = "_1a48u8w1-3-12-0";
+var rectOverlayContainer = "_1a48u8w0-3-12-0";
 export {
   rectLabelClipWrapper,
   rectLabelSpan,

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/RectLabelOverlay.css.ts"],
-  "sourcesContent": ["import './RectLabelOverlay.css';\nexport var rectLabelClipWrapper = '_1a48u8w2-3-11-2';\nexport var rectLabelSpan = '_1a48u8w1-3-11-2';\nexport var rectOverlayContainer = '_1a48u8w0-3-11-2';"],
+  "sourcesContent": ["import './RectLabelOverlay.css';\nexport var rectLabelClipWrapper = '_1a48u8w2-3-12-0';\nexport var rectLabelSpan = '_1a48u8w1-3-12-0';\nexport var rectOverlayContainer = '_1a48u8w0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;AAC3B,IAAI,gBAAgB;AACpB,IAAI,uBAAuB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/area-accessors.js

@@ -13,17 +13,19 @@ function applyNumericalBarScaleTransformations(args, accessorCoord, baseline, re
     v0 = !isNil(v0) ? v0 + accumulator : accumulator;
     v1 = !isNil(v1) ? v1 + accumulator : accumulator;
   }
+  const applyFn = (v, fn) => !isNil(v) ? fn(v) : v;
   if (relAccessor && isNotBaseline && !isNil(binDomain) && isSeriesStacked) {
+    const effectiveDomain = binDomain || 1;
     return {
-      v0: !isNil(v0) ? v0 / binDomain * 100 : v0,
-      v1: !isNil(v1) ? v1 / binDomain * 100 : v1,
+      v0: applyFn(v0, (n) => n / effectiveDomain * 100),
+      v1: applyFn(v1, (n) => n / effectiveDomain * 100),
       scale: args.scale
     };
   }
   if (relAccessor) {
     return {
-      v0: !isNil(v0) ? relAccessor(v0) : v0,
-      v1: !isNil(v1) ? relAccessor(v1) : v1,
+      v0: applyFn(v0, relAccessor),
+      v1: applyFn(v1, relAccessor),
       scale: args.scale
     };
   }

package/esm/charts/xy-chart/components/displays/area-accessors.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/area-accessors.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { AreaScaleLinear } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getBandCenteredPoint } from '../../utils/get-band-centered-point.js';\nimport { getCenterDate } from '../../utils/get-center-date.js';\nimport {\n  isCategoricalAreaScale,\n  isNumericalAreaScale,\n  isTimeAreaScale,\n} from '../../utils/type-guards.js';\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear & { v1: number },\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear & { v1: number };\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear;\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear {\n  const isNotBaseline = baseline !== undefined && accessorCoord !== baseline;\n  let { v0, v1 } = args;\n\n  if (isNotBaseline && accumulator !== undefined) {\n    v0 = !isNil(v0) ? v0 + accumulator : accumulator;\n    v1 = !isNil(v1) ? v1 + accumulator : accumulator;\n  }\n\n  if (relAccessor && isNotBaseline && !isNil(binDomain) && isSeriesStacked) {\n    return {\n      v0: !isNil(v0) ? (v0 / binDomain) * 100 : v0,\n      v1: !isNil(v1) ? (v1 / binDomain) * 100 : v1,\n      scale: args.scale,\n    };\n  }\n\n  if (relAccessor) {\n    return {\n      v0: !isNil(v0) ? relAccessor(v0) : v0,\n      v1: !isNil(v1) ? relAccessor(v1) : v1,\n      scale: args.scale,\n    };\n  }\n\n  return { v0, v1, scale: args.scale };\n}\n\n/**\n * Creates an accessor function for the primary (non-stacking) axis.\n * For vertical areas, this is the X axis; for horizontal areas, this is the Y axis.\n *\n * - Numerical: returns scaled v0 value\n * - Time: returns scaled center of v0-v1 range\n * - Categorical: returns band-centered position\n */\nconst getPrimaryAxisAccessor = (accessorKeys: ['x0', 'x1'] | ['y0', 'y1']) => {\n  return (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]] as Date | undefined;\n\n      if (v0 === undefined) {\n        throw Error('unknown Accessor value for Area series');\n      }\n\n      const args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        return args.scale(relAccessor ? relAccessor(args.v0) : args.v0);\n      }\n\n      if (isTimeAreaScale(args)) {\n        const value = getCenterDate(args.v0, args.v1);\n        return args.scale(value);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return getBandCenteredPoint(args.scale, args.v0);\n      }\n\n      throw Error('unknown Accessor value for Area series');\n    };\n  };\n};\n\n/**\n * Creates accessors for the stacking axis (the value axis).\n * For vertical areas, this is the Y axis (y0 to baseline, y1 to top).\n * For horizontal areas, this is the X axis (x0 to baseline, x1 to right edge).\n *\n * The baseline (v0Accessor) considers stacking accumulation.\n * The endpoint (v1Accessor) returns the cumulative value.\n *\n * @param accessorKeys - The keys to use for accessing datapoint values\n * @param baselineCoord - The coordinate that represents the baseline ('x' for vertical, 'y' for horizontal)\n */\nconst getGrowingAccessors = (\n  accessorKeys: ['x0', 'x1'] | ['y0', 'y1'],\n  baselineCoord: 'x' | 'y',\n) => {\n  const baselineAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isNumericalAreaScale(args)) {\n        const value = args.v0 ?? 0;\n        return args.scale(value);\n      }\n\n      if (isTimeAreaScale(args)) {\n        return args.scale(args.scale.invert(0));\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return args.scale.range()[1];\n      }\n\n      throw Error('unknown baseline accessor for Area series');\n    };\n  };\n\n  const endpointAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      if (v1 === undefined) {\n        throw Error(\n          `${accessorKeys[1]} cannot be undefined for the growing accessor in the AreaSeries`,\n        );\n      }\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isTimeAreaScale(args) || isNumericalAreaScale(args)) {\n        return args.scale(args.v1);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        const catWidth = Math.floor(args.scale.bandwidth() / 2);\n        return (args.scale(args.v1) ?? 0) + catWidth;\n      }\n\n      throw Error('unknown value accessor for Area series');\n    };\n  };\n\n  return { baselineAccessor, endpointAccessor };\n};\n\n// ============================================================================\n// VERTICAL AREA ACCESSORS\n// Primary axis: X (x0/x1), Growing/Stacking axis: Y (y0/y1)\n// ============================================================================\n\n/**\n * X accessor for the primary (category/time) axis in vertical area charts.\n * Used when x0/x1 define the categorical or time dimension.\n */\nexport const xAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['x0', 'x1'])(scale, relAccessor);\n\n/**\n * Vertical area stacking accessors (y0 = baseline, y1 = top)\n * baselineCoord is 'x' because vertical areas stack along the Y axis\n * while the X axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: y0Accessor, endpointAccessor: y1Accessor } =\n  getGrowingAccessors(['y0', 'y1'], 'x');\n\n// ============================================================================\n// HORIZONTAL AREA ACCESSORS\n// Primary axis: Y (y0/y1), Growing/Stacking axis: X (x0/x1)\n// ============================================================================\n\n/**\n * Y accessor for the primary (category/time) axis in horizontal area charts.\n * Used when y0/y1 define the categorical or time dimension.\n */\nexport const yAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['y0', 'y1'])(scale, relAccessor);\n\n/**\n * Horizontal area stacking accessors (x0 = baseline, x1 = right edge)\n * baselineCoord is 'y' because horizontal areas stack along the X axis\n * while the Y axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: x0Accessor, endpointAccessor: x1Accessor } =\n  getGrowingAccessors(['x0', 'x1'], 'y');\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { AreaScaleLinear } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getBandCenteredPoint } from '../../utils/get-band-centered-point.js';\nimport { getCenterDate } from '../../utils/get-center-date.js';\nimport {\n  isCategoricalAreaScale,\n  isNumericalAreaScale,\n  isTimeAreaScale,\n} from '../../utils/type-guards.js';\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear & { v1: number },\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear & { v1: number };\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear;\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear {\n  const isNotBaseline = baseline !== undefined && accessorCoord !== baseline;\n  let { v0, v1 } = args;\n\n  if (isNotBaseline && accumulator !== undefined) {\n    v0 = !isNil(v0) ? v0 + accumulator : accumulator;\n    v1 = !isNil(v1) ? v1 + accumulator : accumulator;\n  }\n\n  const applyFn = (\n    v: number | undefined,\n    fn: (n: number) => number,\n  ): number | undefined => (!isNil(v) ? fn(v) : v);\n\n  if (relAccessor && isNotBaseline && !isNil(binDomain) && isSeriesStacked) {\n    const effectiveDomain = binDomain || 1;\n    return {\n      v0: applyFn(v0, (n) => (n / effectiveDomain) * 100),\n      v1: applyFn(v1, (n) => (n / effectiveDomain) * 100),\n      scale: args.scale,\n    };\n  }\n\n  if (relAccessor) {\n    return {\n      v0: applyFn(v0, relAccessor),\n      v1: applyFn(v1, relAccessor),\n      scale: args.scale,\n    };\n  }\n\n  return { v0, v1, scale: args.scale };\n}\n\n/**\n * Creates an accessor function for the primary (non-stacking) axis.\n * For vertical areas, this is the X axis; for horizontal areas, this is the Y axis.\n *\n * - Numerical: returns scaled v0 value\n * - Time: returns scaled center of v0-v1 range\n * - Categorical: returns band-centered position\n */\nconst getPrimaryAxisAccessor = (accessorKeys: ['x0', 'x1'] | ['y0', 'y1']) => {\n  return (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]] as Date | undefined;\n\n      if (v0 === undefined) {\n        throw Error('unknown Accessor value for Area series');\n      }\n\n      const args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        return args.scale(relAccessor ? relAccessor(args.v0) : args.v0);\n      }\n\n      if (isTimeAreaScale(args)) {\n        const value = getCenterDate(args.v0, args.v1);\n        return args.scale(value);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return getBandCenteredPoint(args.scale, args.v0);\n      }\n\n      throw Error('unknown Accessor value for Area series');\n    };\n  };\n};\n\n/**\n * Creates accessors for the stacking axis (the value axis).\n * For vertical areas, this is the Y axis (y0 to baseline, y1 to top).\n * For horizontal areas, this is the X axis (x0 to baseline, x1 to right edge).\n *\n * The baseline (v0Accessor) considers stacking accumulation.\n * The endpoint (v1Accessor) returns the cumulative value.\n *\n * @param accessorKeys - The keys to use for accessing datapoint values\n * @param baselineCoord - The coordinate that represents the baseline ('x' for vertical, 'y' for horizontal)\n */\nconst getGrowingAccessors = (\n  accessorKeys: ['x0', 'x1'] | ['y0', 'y1'],\n  baselineCoord: 'x' | 'y',\n) => {\n  const baselineAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isNumericalAreaScale(args)) {\n        const value = args.v0 ?? 0;\n        return args.scale(value);\n      }\n\n      if (isTimeAreaScale(args)) {\n        return args.scale(args.scale.invert(0));\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return args.scale.range()[1];\n      }\n\n      throw Error('unknown baseline accessor for Area series');\n    };\n  };\n\n  const endpointAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      if (v1 === undefined) {\n        throw Error(\n          `${accessorKeys[1]} cannot be undefined for the growing accessor in the AreaSeries`,\n        );\n      }\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isTimeAreaScale(args) || isNumericalAreaScale(args)) {\n        return args.scale(args.v1);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        const catWidth = Math.floor(args.scale.bandwidth() / 2);\n        return (args.scale(args.v1) ?? 0) + catWidth;\n      }\n\n      throw Error('unknown value accessor for Area series');\n    };\n  };\n\n  return { baselineAccessor, endpointAccessor };\n};\n\n// ============================================================================\n// VERTICAL AREA ACCESSORS\n// Primary axis: X (x0/x1), Growing/Stacking axis: Y (y0/y1)\n// ============================================================================\n\n/**\n * X accessor for the primary (category/time) axis in vertical area charts.\n * Used when x0/x1 define the categorical or time dimension.\n */\nexport const xAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['x0', 'x1'])(scale, relAccessor);\n\n/**\n * Vertical area stacking accessors (y0 = baseline, y1 = top)\n * baselineCoord is 'x' because vertical areas stack along the Y axis\n * while the X axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: y0Accessor, endpointAccessor: y1Accessor } =\n  getGrowingAccessors(['y0', 'y1'], 'x');\n\n// ============================================================================\n// HORIZONTAL AREA ACCESSORS\n// Primary axis: Y (y0/y1), Growing/Stacking axis: X (x0/x1)\n// ============================================================================\n\n/**\n * Y accessor for the primary (category/time) axis in horizontal area charts.\n * Used when y0/y1 define the categorical or time dimension.\n */\nexport const yAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['y0', 'y1'])(scale, relAccessor);\n\n/**\n * Horizontal area stacking accessors (x0 = baseline, x1 = right edge)\n * baselineCoord is 'y' because horizontal areas stack along the X axis\n * while the Y axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: x0Accessor, endpointAccessor: x1Accessor } =\n  getGrowingAccessors(['x0', 'x1'], 'y');\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAStB,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAsBA,SAAS,sCACd,MACA,eACA,UACA,aACA,aACA,WACA,iBACiB;AACjB,QAAM,gBAAgB,aAAa,UAAa,kBAAkB;AAClE,MAAI,EAAE,IAAI,GAAG,IAAI;AAEjB,MAAI,iBAAiB,gBAAgB,QAAW;AAC9C,SAAK,CAAC,MAAM,EAAE,IAAI,KAAK,cAAc;AACrC,SAAK,CAAC,MAAM,EAAE,IAAI,KAAK,cAAc;AAAA,EACvC;AAEA,QAAM,UAAU,CACd,GACA,OACwB,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,IAAI;AAE9C,MAAI,eAAe,iBAAiB,CAAC,MAAM,SAAS,KAAK,iBAAiB;AACxE,UAAM,kBAAkB,aAAa;AACrC,WAAO;AAAA,MACL,IAAI,QAAQ,IAAI,CAAC,MAAO,IAAI,kBAAmB,GAAG;AAAA,MAClD,IAAI,QAAQ,IAAI,CAAC,MAAO,IAAI,kBAAmB,GAAG;AAAA,MAClD,OAAO,KAAK;AAAA,IACd;AAAA,EACF;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,MACL,IAAI,QAAQ,IAAI,WAAW;AAAA,MAC3B,IAAI,QAAQ,IAAI,WAAW;AAAA,MAC3B,OAAO,KAAK;AAAA,IACd;AAAA,EACF;AAEA,SAAO,EAAE,IAAI,IAAI,OAAO,KAAK,MAAM;AACrC;AAUA,MAAM,yBAAyB,CAAC,iBAA8C;AAC5E,SAAO,CAAC,OAAwB,gBAA4C;AAC1E,WAAO,CAAC,cAA6B;AACnC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AACpC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AAEpC,UAAI,OAAO,QAAW;AACpB,cAAM,MAAM,wCAAwC;AAAA,MACtD;AAEA,YAAM,OAAO,EAAE,OAAO,IAAI,GAAG;AAE7B,UAAI,qBAAqB,IAAI,GAAG;AAC9B,eAAO,KAAK,MAAM,cAAc,YAAY,KAAK,EAAE,IAAI,KAAK,EAAE;AAAA,MAChE;AAEA,UAAI,gBAAgB,IAAI,GAAG;AACzB,cAAM,QAAQ,cAAc,KAAK,IAAI,KAAK,EAAE;AAC5C,eAAO,KAAK,MAAM,KAAK;AAAA,MACzB;AAEA,UAAI,uBAAuB,IAAI,GAAG;AAChC,eAAO,qBAAqB,KAAK,OAAO,KAAK,EAAE;AAAA,MACjD;AAEA,YAAM,MAAM,wCAAwC;AAAA,IACtD;AAAA,EACF;AACF;AAaA,MAAM,sBAAsB,CAC1B,cACA,kBACG;AACH,QAAM,mBAAmB,CACvB,OACA,oBACA,aACA,oBACG;AACH,WAAO,CAAC,cAA6B;AACnC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AACpC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AAEpC,YAAM,EAAE,aAAa,UAAU,UAAU,IACvC,mBAAmB,IAAI,SAAS,KAAK,CAAC;AAExC,UAAI,OAAO,EAAE,OAAO,IAAI,GAAG;AAE3B,UAAI,qBAAqB,IAAI,GAAG;AAC9B,eAAO;AAAA,UACL;AAAA,UACA,kBAAkB,MAAM,MAAM;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,UAAI,qBAAqB,IAAI,GAAG;AAC9B,cAAM,QAAQ,KAAK,MAAM;AACzB,eAAO,KAAK,MAAM,KAAK;AAAA,MACzB;AAEA,UAAI,gBAAgB,IAAI,GAAG;AACzB,eAAO,KAAK,MAAM,KAAK,MAAM,OAAO,CAAC,CAAC;AAAA,MACxC;AAEA,UAAI,uBAAuB,IAAI,GAAG;AAChC,eAAO,KAAK,MAAM,MAAM,EAAE,CAAC;AAAA,MAC7B;AAEA,YAAM,MAAM,2CAA2C;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,mBAAmB,CACvB,OACA,oBACA,aACA,oBACG;AACH,WAAO,CAAC,cAA6B;AACnC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AACpC,YAAM,KAAK,UAAU,aAAa,CAAC,CAAC;AACpC,YAAM,EAAE,aAAa,UAAU,UAAU,IACvC,mBAAmB,IAAI,SAAS,KAAK,CAAC;AAExC,UAAI,OAAO,QAAW;AACpB,cAAM;AAAA,UACJ,GAAG,aAAa,CAAC,CAAC;AAAA,QACpB;AAAA,MACF;AAEA,UAAI,OAAO,EAAE,OAAO,IAAI,GAAG;AAE3B,UAAI,qBAAqB,IAAI,GAAG;AAC9B,eAAO;AAAA,UACL;AAAA,UACA,kBAAkB,MAAM,MAAM;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,UAAI,gBAAgB,IAAI,KAAK,qBAAqB,IAAI,GAAG;AACvD,eAAO,KAAK,MAAM,KAAK,EAAE;AAAA,MAC3B;AAEA,UAAI,uBAAuB,IAAI,GAAG;AAChC,cAAM,WAAW,KAAK,MAAM,KAAK,MAAM,UAAU,IAAI,CAAC;AACtD,gBAAQ,KAAK,MAAM,KAAK,EAAE,KAAK,KAAK;AAAA,MACtC;AAEA,YAAM,MAAM,wCAAwC;AAAA,IACtD;AAAA,EACF;AAEA,SAAO,EAAE,kBAAkB,iBAAiB;AAC9C;AAWO,MAAM,YAAY,CACvB,OACA,gBACG,uBAAuB,CAAC,MAAM,IAAI,CAAC,EAAE,OAAO,WAAW;AAOrD,MAAM,EAAE,kBAAkB,YAAY,kBAAkB,WAAW,IACxE,oBAAoB,CAAC,MAAM,IAAI,GAAG,GAAG;AAWhC,MAAM,YAAY,CACvB,OACA,gBACG,uBAAuB,CAAC,MAAM,IAAI,CAAC,EAAE,OAAO,WAAW;AAOrD,MAAM,EAAE,kBAAkB,YAAY,kBAAkB,WAAW,IACxE,oBAAoB,CAAC,MAAM,IAAI,GAAG,GAAG;",
   "names": []
 }

package/esm/charts/xy-chart/components/legend/XYLegend/XYLegend.js

@@ -12,7 +12,8 @@ import { useChartLayoutLoading } from "../../../../core/components/chart-layout/
 import { useChartLayoutOrientation } from "../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js";
 import { getLegendOrientation } from "../../../../core/components/chart-layout/utils/orientation.js";
 import { ChartLegend } from "../../../../core/components/legend/categorical/ChartLegend.js";
-import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
+import { usePinCoordinationActions } from "../../../../core/components/overlay-tooltip/usePinCoordinationActions.js";
+import { useTooltipActions } from "../../../../core/components/overlay-tooltip/useTooltipActions.js";
 import { buildCategoricalItemsFromScale } from "../../../../core/utils/build-categorical-items-from-scale.js";
 import { safeGet } from "../../../../core/utils/safe-get.js";
 import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
@@ -67,7 +68,8 @@ function getLegendItems(series, metadata, isMixedSeries, scaleColorMap, isCatego
   });
 }
 function XYLegend({ series, seriesToMetadata }) {
-  const dispatch = useTooltipReducer();
+  const { reset } = useTooltipActions();
+  const { dismissAnnotation } = usePinCoordinationActions();
   const { orientation: layoutOrientation } = useChartLayoutOrientation();
   const orientation = getLegendOrientation(layoutOrientation);
   const setState = useSetState();
@@ -95,10 +97,11 @@ function XYLegend({ series, seriesToMetadata }) {
   const updateVisibleSeries = useCallback(
     (visibleItems) => {
       const visibleIds = new Set(visibleItems.map((item) => item.id));
-      dispatch({ type: "RESET_TOOLTIP" })();
+      reset();
+      dismissAnnotation();
       setState(reduceFilterSeries(visibleIds));
     },
-    [setState, dispatch]
+    [setState, reset, dismissAnnotation]
   );
   const updateHighlightedSeriesId = (legendItemId) => {
     setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));

package/esm/charts/xy-chart/components/legend/XYLegend/XYLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/XYLegend.tsx"],
-  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\nimport { useCallback, useMemo } from 'react';\n\nimport { getXYLegendActions } from './utils/getXYLegendActions.js';\nimport {\n  AREA_CHART_ICON_SHAPE,\n  BAR_CHART_ICON_SHAPE,\n  LINE_CHART_ICON_SHAPE,\n  RECT_CHART_ICON_SHAPE,\n  XYLegendIcon,\n} from './XYLegendIcon.js';\nimport { useChartLayoutLoading } from '../../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../../core/components/legend/categorical/ChartLegend.js';\nimport type { LegendItem } from '../../../../core/components/legend/categorical/types/legend.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { buildCategoricalItemsFromScale } from '../../../../core/utils/build-categorical-items-from-scale.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { reduceFilterSeries } from '../../../store/reducer-filter-series.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport {\n  AREA_VARIANT,\n  type AreaSeriesWithDatapoints,\n  BAR_VARIANT,\n  type BarSeriesWithDatapoints,\n  DOT_VARIANT,\n  type DotSeriesWithDatapoints,\n  LINE_VARIANT,\n  type LineSeriesWithDatapoints,\n  RECT_VARIANT,\n  type RectSeriesWithDatapoints,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { isRangeLegend } from '../../../utils/is-range-legend.js';\nimport { isRectSeries } from '../../../utils/type-guards.js';\n\nconst CHART_ICONS = {\n  [LINE_VARIANT]: LINE_CHART_ICON_SHAPE,\n  [BAR_VARIANT]: BAR_CHART_ICON_SHAPE,\n  [RECT_VARIANT]: RECT_CHART_ICON_SHAPE,\n  [AREA_VARIANT]: AREA_CHART_ICON_SHAPE,\n} as const;\n\nfunction getLegendItems(\n  series: (\n    | DotSeriesWithDatapoints\n    | LineSeriesWithDatapoints\n    | BarSeriesWithDatapoints\n    | RectSeriesWithDatapoints\n    | AreaSeriesWithDatapoints\n  )[],\n  metadata: SeriesToMetadata,\n  isMixedSeries: boolean,\n  scaleColorMap: SeriesIdToColorScale,\n  isCategoricalRectOnly: boolean,\n) {\n  return series.flatMap((series) => {\n    if (series.type === RECT_VARIANT) {\n      if (isRangeLegend(metadata, series)) {\n        return [];\n      }\n      const scale = safeGet(scaleColorMap, series.id) as ScaleOrdinal<\n        string,\n        string\n      >;\n      const overrideItems = safeGet(metadata, series).categoricalColorOverrides;\n\n      const shape = isCategoricalRectOnly ? 'circle' : CHART_ICONS[series.type];\n\n      const items = buildCategoricalItemsFromScale(\n        scale,\n        overrideItems,\n        //We need to compare exactly the same id when an action is selected\n        //In RectSeries, categories are unique per series.\n        (category: string) => `${series.id}--${category}`,\n      );\n\n      return items.map((item: LegendItem) => ({\n        ...item,\n        icon: <XYLegendIcon color={item.color.Default} shape={shape} />,\n      }));\n    } else {\n      const { name, color, shape = 'circle' } = safeGet(metadata, series);\n      const iconShape =\n        isMixedSeries && series.type !== DOT_VARIANT\n          ? CHART_ICONS[series.type]\n          : shape;\n\n      return {\n        id: series.id,\n        color,\n        name,\n        icon: <XYLegendIcon color={color.Default} shape={iconShape} />,\n      };\n    }\n  });\n}\n\ninterface XYLegendProps {\n  series: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n}\n\nexport function XYLegend({ series, seriesToMetadata }: XYLegendProps) {\n  const dispatch = useTooltipReducer();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const setState = useSetState();\n  const isLoading = useChartLayoutLoading();\n  const scaleColorMap = useXYChartColorScales();\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const firstSeries = series[0];\n  const isCategoricalRectOnly =\n    isRectSeries(firstSeries) &&\n    series.every(isRectSeries) &&\n    !isRangeLegend(seriesToMetadata, firstSeries);\n\n  const isMixedSeries = useMemo(() => {\n    const typeSet = new Set(series.map((s) => s.type));\n    return typeSet.size >= 2;\n  }, [series]);\n\n  const legendItems = useMemo(\n    () =>\n      getLegendItems(\n        series,\n        seriesToMetadata,\n        isMixedSeries,\n        scaleColorMap,\n        isCategoricalRectOnly,\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [series, seriesToMetadata],\n  );\n\n  const legendActions = getXYLegendActions(series, seriesToMetadata);\n\n  const updateVisibleSeries = useCallback(\n    (visibleItems: LegendItem[]) => {\n      const visibleIds = new Set(visibleItems.map((item) => item.id));\n\n      dispatch({ type: 'RESET_TOOLTIP' })();\n      setState(reduceFilterSeries(visibleIds));\n    },\n    [setState, dispatch],\n  );\n\n  const updateHighlightedSeriesId = (legendItemId?: string) => {\n    setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={orientation}\n      truncationMode={truncationMode}\n      interactionsDisabled={isLoading}\n      onSeriesAction={legendActions}\n      onHover={(legendItem) => updateHighlightedSeriesId(legendItem?.id)}\n      onClick={updateVisibleSeries}\n    />\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\nimport { useCallback, useMemo } from 'react';\n\nimport { getXYLegendActions } from './utils/getXYLegendActions.js';\nimport {\n  AREA_CHART_ICON_SHAPE,\n  BAR_CHART_ICON_SHAPE,\n  LINE_CHART_ICON_SHAPE,\n  RECT_CHART_ICON_SHAPE,\n  XYLegendIcon,\n} from './XYLegendIcon.js';\nimport { useChartLayoutLoading } from '../../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../../core/components/chart-layout/utils/orientation.js';\nimport { ChartLegend } from '../../../../core/components/legend/categorical/ChartLegend.js';\nimport type { LegendItem } from '../../../../core/components/legend/categorical/types/legend.js';\nimport { usePinCoordinationActions } from '../../../../core/components/overlay-tooltip/usePinCoordinationActions.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { buildCategoricalItemsFromScale } from '../../../../core/utils/build-categorical-items-from-scale.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { reduceFilterSeries } from '../../../store/reducer-filter-series.js';\nimport { useSetState } from '../../../store/selectors.js';\nimport {\n  AREA_VARIANT,\n  type AreaSeriesWithDatapoints,\n  BAR_VARIANT,\n  type BarSeriesWithDatapoints,\n  DOT_VARIANT,\n  type DotSeriesWithDatapoints,\n  LINE_VARIANT,\n  type LineSeriesWithDatapoints,\n  RECT_VARIANT,\n  type RectSeriesWithDatapoints,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { isRangeLegend } from '../../../utils/is-range-legend.js';\nimport { isRectSeries } from '../../../utils/type-guards.js';\n\nconst CHART_ICONS = {\n  [LINE_VARIANT]: LINE_CHART_ICON_SHAPE,\n  [BAR_VARIANT]: BAR_CHART_ICON_SHAPE,\n  [RECT_VARIANT]: RECT_CHART_ICON_SHAPE,\n  [AREA_VARIANT]: AREA_CHART_ICON_SHAPE,\n} as const;\n\nfunction getLegendItems(\n  series: (\n    | DotSeriesWithDatapoints\n    | LineSeriesWithDatapoints\n    | BarSeriesWithDatapoints\n    | RectSeriesWithDatapoints\n    | AreaSeriesWithDatapoints\n  )[],\n  metadata: SeriesToMetadata,\n  isMixedSeries: boolean,\n  scaleColorMap: SeriesIdToColorScale,\n  isCategoricalRectOnly: boolean,\n) {\n  return series.flatMap((series) => {\n    if (series.type === RECT_VARIANT) {\n      if (isRangeLegend(metadata, series)) {\n        return [];\n      }\n      const scale = safeGet(scaleColorMap, series.id) as ScaleOrdinal<\n        string,\n        string\n      >;\n      const overrideItems = safeGet(metadata, series).categoricalColorOverrides;\n\n      const shape = isCategoricalRectOnly ? 'circle' : CHART_ICONS[series.type];\n\n      const items = buildCategoricalItemsFromScale(\n        scale,\n        overrideItems,\n        //We need to compare exactly the same id when an action is selected\n        //In RectSeries, categories are unique per series.\n        (category: string) => `${series.id}--${category}`,\n      );\n\n      return items.map((item: LegendItem) => ({\n        ...item,\n        icon: <XYLegendIcon color={item.color.Default} shape={shape} />,\n      }));\n    } else {\n      const { name, color, shape = 'circle' } = safeGet(metadata, series);\n      const iconShape =\n        isMixedSeries && series.type !== DOT_VARIANT\n          ? CHART_ICONS[series.type]\n          : shape;\n\n      return {\n        id: series.id,\n        color,\n        name,\n        icon: <XYLegendIcon color={color.Default} shape={iconShape} />,\n      };\n    }\n  });\n}\n\ninterface XYLegendProps {\n  series: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n}\n\nexport function XYLegend({ series, seriesToMetadata }: XYLegendProps) {\n  const { reset } = useTooltipActions();\n  const { dismissAnnotation } = usePinCoordinationActions();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const setState = useSetState();\n  const isLoading = useChartLayoutLoading();\n  const scaleColorMap = useXYChartColorScales();\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const firstSeries = series[0];\n  const isCategoricalRectOnly =\n    isRectSeries(firstSeries) &&\n    series.every(isRectSeries) &&\n    !isRangeLegend(seriesToMetadata, firstSeries);\n\n  const isMixedSeries = useMemo(() => {\n    const typeSet = new Set(series.map((s) => s.type));\n    return typeSet.size >= 2;\n  }, [series]);\n\n  const legendItems = useMemo(\n    () =>\n      getLegendItems(\n        series,\n        seriesToMetadata,\n        isMixedSeries,\n        scaleColorMap,\n        isCategoricalRectOnly,\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [series, seriesToMetadata],\n  );\n\n  const legendActions = getXYLegendActions(series, seriesToMetadata);\n\n  const updateVisibleSeries = useCallback(\n    (visibleItems: LegendItem[]) => {\n      const visibleIds = new Set(visibleItems.map((item) => item.id));\n\n      reset();\n      dismissAnnotation();\n      setState(reduceFilterSeries(visibleIds));\n    },\n    [setState, reset, dismissAnnotation],\n  );\n\n  const updateHighlightedSeriesId = (legendItemId?: string) => {\n    setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={orientation}\n      truncationMode={truncationMode}\n      interactionsDisabled={isLoading}\n      onSeriesAction={legendActions}\n      onHover={(legendItem) => updateHighlightedSeriesId(legendItem?.id)}\n      onClick={updateVisibleSeries}\n    />\n  );\n}\n"],
+  "mappings": "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",
   "names": ["series"]
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-11-2 {
+._1lwufqz0-3-12-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-11-2";
+var shapeIconWrapper = "_1lwufqz0-3-12-0";
 export {
   shapeIconWrapper
 };

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-11-2';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { every } from "lodash-es";
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { XYChartSynchronizedCrosshair } from "./XYChartSynchronizedCrosshair.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { InteractionsOverlay } from "../../../core/components/interactions-overlay/InteractionsOverlay.js";
@@ -27,10 +27,13 @@ import {
 import { SynchronizedSelectionArea } from "../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { useToolbarHandlerRef } from "../../../core/components/toolbar/hooks/useToolbarHandlerRef.js";
+import { ChartVariantContext } from "../../../core/context/ChartVariantContext.js";
 import { useEffectOnValueChange } from "../../../core/hooks/useEffectOnValueChange.js";
 import { zIndicesXYChartAreas } from "../../constants/xy-chart-z-index-areas.js";
 import { XYChartSelectionAreaRefContext } from "../../context/XYChartSelectionAreaRef.context.js";
+import { useSelectConfig } from "../../hooks/useSelectConfig.js";
 import { useSyncedXScaleByPriority } from "../../hooks/useSyncedXScaleByPriority.js";
+import { useXYChartCrosshairHidden } from "../../hooks/useXYChartCrosshairHidden.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartId } from "../../hooks/useXYChartId.js";
 const XYChartOverlay = () => {
@@ -60,9 +63,12 @@ const XYChartOverlay = () => {
   const chartId = useXYChartId();
   const syncedXScale = useSyncedXScaleByPriority();
   const { axesMetadata } = useXYChartData();
+  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);
   const { zoomOutEnabled } = useZoomState();
   const isZoomDisabled = !axesMetadata.isZoomEnabled;
   const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);
+  const isSelectDisabled = useSelectConfig()?.disabled === true;
+  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();
   useEffect(() => {
     if (every([
       selectState,
@@ -96,7 +102,8 @@ const XYChartOverlay = () => {
     {
       style: {
         zIndex: zIndicesXYChartAreas.overlays,
-        userSelect: selectState?.finished === false ? "none" : "auto"
+        userSelect: selectState?.finished === false ? "none" : "auto",
+        cursor: hideHorizontal && hideVertical ? "default" : crosshairConfig?.cursor
       },
       ref: overlay.overlayRef,
       mode,
@@ -118,6 +125,7 @@ const XYChartOverlay = () => {
       isZoomDisabled,
       isZoomXDisabled: isZoomDisabled,
       isPanDisabled,
+      isSelectDisabled,
       children: [
         (inBounds || pinned || selectState) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(XYChartOverlayTooltip, {}),

package/esm/charts/xy-chart/components/overlay/XYChartOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/overlay/XYChartOverlay.tsx"],
-  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { reduceExploreCancelHighlight } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartOverlayTooltip } from '../tooltip/XYChartOverlayTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { useEffectOnValueChange } from '../../../core/hooks/useEffectOnValueChange.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const overlay = useOverlay();\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  useSelector(({ inBounds, pinned }) => `${inBounds}-${pinned}`);\n  const { inBounds, pinned } = useTooltipSnapshot();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [!!selectState]);\n\n  useEffectOnValueChange(() => {\n    if (!pinned) {\n      setState(reduceExploreCancelHighlight);\n    }\n  }, [pinned, setState]);\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlay.overlayRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n    >\n      {(inBounds || pinned || selectState) && (\n        <>\n          <XYChartOverlayTooltip />\n          <XYChartCrosshair chartRef={overlay.overlayRef} />\n          {showHighlightedData && (\n            <>\n              <XYChartRectanglePoint />\n              <XYChartLinearPoint />\n            </>\n          )}\n        </>\n      )}\n      <XYChartSynchronizedCrosshair />\n      <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n        <XYChartToolbar onMouseEnter={resetTooltip} handlerRef={handlerRef} />\n        <XYChartSelectionArea />\n      </XYChartSelectionAreaRefContext.Provider>\n      {synchronizedSelection.selectedChartId &&\n        synchronizedSelection.selectedChartId !== chartId &&\n        syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useContext, useEffect, useRef, type FocusEvent } from 'react';\n\nimport { XYChartSynchronizedCrosshair } from './XYChartSynchronizedCrosshair.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { reduceExploreCancelHighlight } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\nimport { XYChartSelectionArea } from '../selection/XYChartSelectionArea.js';\nimport { XYChartToolbar } from '../toolbar/XYChartToolbar.js';\nimport { XYChartOverlayTooltip } from '../tooltip/XYChartOverlayTooltip.js';\nimport { XYChartCrosshair } from './explore/XYChartCrosshair.js';\nimport { XYChartLinearPoint } from './explore/XYChartLinearPoint.js';\nimport { XYChartRectanglePoint } from './explore/XYChartRectanglePoint.js';\nimport { useOverlayEvents } from './hooks/useOverlayEvents.js';\nimport { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport type { _SelectionRef } from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport { ChartVariantContext } from '../../../core/context/ChartVariantContext.js';\nimport { useEffectOnValueChange } from '../../../core/hooks/useEffectOnValueChange.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { XYChartSelectionAreaRefContext } from '../../context/XYChartSelectionAreaRef.context.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartCrosshairHidden } from '../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\n\nexport const XYChartOverlay = () => {\n  const setState = useSetState();\n  const handlerRef = useToolbarHandlerRef();\n  const overlay = useOverlay();\n  const selectionRef = useRef<_SelectionRef>(null);\n  const { width, height } = useGridPlotSize();\n  useSelector(({ inBounds, pinned }) => `${inBounds}-${pinned}`);\n  const { inBounds, pinned } = useTooltipSnapshot();\n  const {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  } = useOverlayEvents();\n  const mode = useInteractionModeState();\n  const selectState = useSelectState();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { axesMetadata } = useXYChartData();\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n  const { zoomOutEnabled } = useZoomState();\n  const isZoomDisabled = !axesMetadata.isZoomEnabled;\n  const isPanDisabled = !(axesMetadata.isPanEnabled && zoomOutEnabled);\n  const isSelectDisabled = useSelectConfig()?.disabled === true;\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelection?.disabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [!!selectState]);\n\n  useEffectOnValueChange(() => {\n    if (!pinned) {\n      setState(reduceExploreCancelHighlight);\n    }\n  }, [pinned, setState]);\n\n  const showHighlightedData =\n    selectState === undefined || selectState?.variant === 'select';\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesXYChartAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n        cursor:\n          hideHorizontal && hideVertical ? 'default' : crosshairConfig?.cursor,\n      }}\n      ref={overlay.overlayRef}\n      mode={mode}\n      pinned={pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      onModeChange={handleModeChange}\n      onReset={handleReset}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onHover={handleHover}\n      onFocus={handleFocus}\n      onTogglePin={({ pin, position }) => handleTogglePin(pin, position)}\n      onSelectStart={handleSelectStart}\n      onSelectChange={handleSelectChange}\n      onSelectEnd={(event) => handleSelectEnd(event, selectionRef)}\n      onZoomChange={handleZoomChange}\n      isZoomDisabled={isZoomDisabled}\n      isZoomXDisabled={isZoomDisabled}\n      isPanDisabled={isPanDisabled}\n      isSelectDisabled={isSelectDisabled}\n    >\n      {(inBounds || pinned || selectState) && (\n        <>\n          <XYChartOverlayTooltip />\n          <XYChartCrosshair chartRef={overlay.overlayRef} />\n          {showHighlightedData && (\n            <>\n              <XYChartRectanglePoint />\n              <XYChartLinearPoint />\n            </>\n          )}\n        </>\n      )}\n      <XYChartSynchronizedCrosshair />\n      <XYChartSelectionAreaRefContext.Provider value={selectionRef}>\n        <XYChartToolbar onMouseEnter={resetTooltip} handlerRef={handlerRef} />\n        <XYChartSelectionArea />\n      </XYChartSelectionAreaRefContext.Provider>\n      {synchronizedSelection.selectedChartId &&\n        synchronizedSelection.selectedChartId !== chartId &&\n        syncedXScale && <SynchronizedSelectionArea scale={syncedXScale} />}\n    </InteractionsOverlay>\n  );\n};\n\nXYChartOverlay['displayName'] = 'XYChartOverlay';\n"],
+  "mappings": "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",
   "names": ["inBounds", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js

@@ -15,10 +15,16 @@ const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
   const height = Math.max(point.height, MIN_BAR_HIGHLIGHT_SIZE_PX);
   const xExpansion = (width - point.width) / 2;
   const yExpansion = (height - point.height) / 2;
+  const rawX = point.x - xExpansion;
+  const clampedX = Math.max(0, rawX);
+  const clampedWidth = Math.max(
+    0,
+    Math.min(rawX + width, canvasWidth) - clampedX
+  );
   return {
-    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),
+    x: clampedX,
     y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),
-    width,
+    width: clampedWidth,
     height
   };
 };

package/esm/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { RectanglePoint } from './types.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\nimport { MIN_BAR_HIGHLIGHT_SIZE_PX } from '../../../constants/defaults.js';\nimport { BAR_ID } from '../../../types/xy-chart-internals.js';\n\ninterface HighlightedRectangleCanvasProps {\n  points: RectanglePoint[];\n}\n\nconst OUTER_OFFSET = 2;\nconst OUTER_SHRINK = 3;\nconst INNER_OFFSET = 3;\nconst INNER_SHRINK = 5;\nconst BORDER_WIDTH = 1;\n\nconst getMinSizeHighlightBar = (\n  point: RectanglePoint,\n  canvasWidth: number,\n  canvasHeight: number,\n) => {\n  const width = Math.max(point.width, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const height = Math.max(point.height, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const xExpansion = (width - point.width) / 2;\n  const yExpansion = (height - point.height) / 2;\n\n  return {\n    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),\n    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),\n    width,\n    height,\n  };\n};\n\nconst getCanvasCssSize = (ctx: CanvasRenderingContext2D) => {\n  const dpr = window.devicePixelRatio || 1;\n  return {\n    width: ctx.canvas.width / dpr,\n    height: ctx.canvas.height / dpr,\n  };\n};\n\nexport const HighlightedRectangleCanvas = ({\n  points,\n}: HighlightedRectangleCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const { width: canvasWidth, height: canvasHeight } =\n        getCanvasCssSize(ctx);\n\n      for (const point of points) {\n        const { x, y, width, height } =\n          point.id === BAR_ID\n            ? getMinSizeHighlightBar(point, canvasWidth, canvasHeight)\n            : point;\n\n        // Outer border\n        ctx.beginPath();\n        ctx.lineWidth = BORDER_WIDTH;\n        ctx.strokeStyle = getCanvasColor(Colors.Text.Neutral.Default);\n        ctx.rect(\n          x + OUTER_OFFSET,\n          y + OUTER_OFFSET,\n          Math.max(0, width - OUTER_SHRINK),\n          Math.max(0, height - OUTER_SHRINK),\n        );\n        ctx.stroke();\n        ctx.closePath();\n\n        // Calculate inner rectangle dimensions\n        const innerX = x + INNER_OFFSET;\n        const innerY = y + INNER_OFFSET;\n        const innerWidth = width - INNER_SHRINK;\n        const innerHeight = height - INNER_SHRINK;\n\n        // Only draw inner border if it has positive size\n        if (innerWidth > 0 && innerHeight > 0) {\n          ctx.beginPath();\n          ctx.lineWidth = BORDER_WIDTH;\n          ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n          ctx.strokeStyle = getCanvasColor(Colors.Background.Base.Default);\n          ctx.rect(innerX, innerY, innerWidth, innerHeight);\n          ctx.stroke();\n          ctx.globalAlpha = 1;\n          ctx.closePath();\n        }\n      }\n\n      return false;\n    },\n    [points],\n  );\n\n  useCanvas('Highlighted-rects', draw);\n\n  return null;\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AAGnB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AAMvB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,MAAM,yBAAyB,CAC7B,OACA,aACA,iBACG;AACH,QAAM,QAAQ,KAAK,IAAI,MAAM,OAAO,yBAAyB;AAC7D,QAAM,SAAS,KAAK,IAAI,MAAM,QAAQ,yBAAyB;AAC/D,QAAM,cAAc,QAAQ,MAAM,SAAS;AAC3C,QAAM,cAAc,SAAS,MAAM,UAAU;AAE7C,SAAO;AAAA,IACL,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,YAAY,cAAc,KAAK,CAAC;AAAA,IAClE,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,YAAY,eAAe,MAAM,CAAC;AAAA,IACpE;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB,CAAC,QAAkC;AAC1D,QAAM,MAAM,OAAO,oBAAoB;AACvC,SAAO;AAAA,IACL,OAAO,IAAI,OAAO,QAAQ;AAAA,IAC1B,QAAQ,IAAI,OAAO,SAAS;AAAA,EAC9B;AACF;AAEO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAC/C,iBAAiB,GAAG;AAEtB,iBAAW,SAAS,QAAQ;AAC1B,cAAM,EAAE,GAAG,GAAG,OAAO,OAAO,IAC1B,MAAM,OAAO,SACT,uBAAuB,OAAO,aAAa,YAAY,IACvD;AAGN,YAAI,UAAU;AACd,YAAI,YAAY;AAChB,YAAI,cAAc,eAAe,OAAO,KAAK,QAAQ,OAAO;AAC5D,YAAI;AAAA,UACF,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,KAAK,IAAI,GAAG,QAAQ,YAAY;AAAA,UAChC,KAAK,IAAI,GAAG,SAAS,YAAY;AAAA,QACnC;AACA,YAAI,OAAO;AACX,YAAI,UAAU;AAGd,cAAM,SAAS,IAAI;AACnB,cAAM,SAAS,IAAI;AACnB,cAAM,aAAa,QAAQ;AAC3B,cAAM,cAAc,SAAS;AAG7B,YAAI,aAAa,KAAK,cAAc,GAAG;AACrC,cAAI,UAAU;AACd,cAAI,YAAY;AAChB,cAAI,cAAc;AAClB,cAAI,cAAc,eAAe,OAAO,WAAW,KAAK,OAAO;AAC/D,cAAI,KAAK,QAAQ,QAAQ,YAAY,WAAW;AAChD,cAAI,OAAO;AACX,cAAI,cAAc;AAClB,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { RectanglePoint } from './types.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\nimport { MIN_BAR_HIGHLIGHT_SIZE_PX } from '../../../constants/defaults.js';\nimport { BAR_ID } from '../../../types/xy-chart-internals.js';\n\ninterface HighlightedRectangleCanvasProps {\n  points: RectanglePoint[];\n}\n\nconst OUTER_OFFSET = 2;\nconst OUTER_SHRINK = 3;\nconst INNER_OFFSET = 3;\nconst INNER_SHRINK = 5;\nconst BORDER_WIDTH = 1;\n\nconst getMinSizeHighlightBar = (\n  point: RectanglePoint,\n  canvasWidth: number,\n  canvasHeight: number,\n) => {\n  const width = Math.max(point.width, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const height = Math.max(point.height, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const xExpansion = (width - point.width) / 2;\n  const yExpansion = (height - point.height) / 2;\n\n  const rawX = point.x - xExpansion;\n  const clampedX = Math.max(0, rawX);\n  const clampedWidth = Math.max(\n    0,\n    Math.min(rawX + width, canvasWidth) - clampedX,\n  );\n\n  return {\n    x: clampedX,\n    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),\n    width: clampedWidth,\n    height,\n  };\n};\n\nconst getCanvasCssSize = (ctx: CanvasRenderingContext2D) => {\n  const dpr = window.devicePixelRatio || 1;\n  return {\n    width: ctx.canvas.width / dpr,\n    height: ctx.canvas.height / dpr,\n  };\n};\n\nexport const HighlightedRectangleCanvas = ({\n  points,\n}: HighlightedRectangleCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const { width: canvasWidth, height: canvasHeight } =\n        getCanvasCssSize(ctx);\n\n      for (const point of points) {\n        const { x, y, width, height } =\n          point.id === BAR_ID\n            ? getMinSizeHighlightBar(point, canvasWidth, canvasHeight)\n            : point;\n\n        // Outer border\n        ctx.beginPath();\n        ctx.lineWidth = BORDER_WIDTH;\n        ctx.strokeStyle = getCanvasColor(Colors.Text.Neutral.Default);\n        ctx.rect(\n          x + OUTER_OFFSET,\n          y + OUTER_OFFSET,\n          Math.max(0, width - OUTER_SHRINK),\n          Math.max(0, height - OUTER_SHRINK),\n        );\n        ctx.stroke();\n        ctx.closePath();\n\n        // Calculate inner rectangle dimensions\n        const innerX = x + INNER_OFFSET;\n        const innerY = y + INNER_OFFSET;\n        const innerWidth = width - INNER_SHRINK;\n        const innerHeight = height - INNER_SHRINK;\n\n        // Only draw inner border if it has positive size\n        if (innerWidth > 0 && innerHeight > 0) {\n          ctx.beginPath();\n          ctx.lineWidth = BORDER_WIDTH;\n          ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n          ctx.strokeStyle = getCanvasColor(Colors.Background.Base.Default);\n          ctx.rect(innerX, innerY, innerWidth, innerHeight);\n          ctx.stroke();\n          ctx.globalAlpha = 1;\n          ctx.closePath();\n        }\n      }\n\n      return false;\n    },\n    [points],\n  );\n\n  useCanvas('Highlighted-rects', draw);\n\n  return null;\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AAGnB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AAMvB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,MAAM,yBAAyB,CAC7B,OACA,aACA,iBACG;AACH,QAAM,QAAQ,KAAK,IAAI,MAAM,OAAO,yBAAyB;AAC7D,QAAM,SAAS,KAAK,IAAI,MAAM,QAAQ,yBAAyB;AAC/D,QAAM,cAAc,QAAQ,MAAM,SAAS;AAC3C,QAAM,cAAc,SAAS,MAAM,UAAU;AAE7C,QAAM,OAAO,MAAM,IAAI;AACvB,QAAM,WAAW,KAAK,IAAI,GAAG,IAAI;AACjC,QAAM,eAAe,KAAK;AAAA,IACxB;AAAA,IACA,KAAK,IAAI,OAAO,OAAO,WAAW,IAAI;AAAA,EACxC;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,YAAY,eAAe,MAAM,CAAC;AAAA,IACpE,OAAO;AAAA,IACP;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB,CAAC,QAAkC;AAC1D,QAAM,MAAM,OAAO,oBAAoB;AACvC,SAAO;AAAA,IACL,OAAO,IAAI,OAAO,QAAQ;AAAA,IAC1B,QAAQ,IAAI,OAAO,SAAS;AAAA,EAC9B;AACF;AAEO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAC/C,iBAAiB,GAAG;AAEtB,iBAAW,SAAS,QAAQ;AAC1B,cAAM,EAAE,GAAG,GAAG,OAAO,OAAO,IAC1B,MAAM,OAAO,SACT,uBAAuB,OAAO,aAAa,YAAY,IACvD;AAGN,YAAI,UAAU;AACd,YAAI,YAAY;AAChB,YAAI,cAAc,eAAe,OAAO,KAAK,QAAQ,OAAO;AAC5D,YAAI;AAAA,UACF,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,KAAK,IAAI,GAAG,QAAQ,YAAY;AAAA,UAChC,KAAK,IAAI,GAAG,SAAS,YAAY;AAAA,QACnC;AACA,YAAI,OAAO;AACX,YAAI,UAAU;AAGd,cAAM,SAAS,IAAI;AACnB,cAAM,SAAS,IAAI;AACnB,cAAM,aAAa,QAAQ;AAC3B,cAAM,cAAc,SAAS;AAG7B,YAAI,aAAa,KAAK,cAAc,GAAG;AACrC,cAAI,UAAU;AACd,cAAI,YAAY;AAChB,cAAI,cAAc;AAClB,cAAI,cAAc,eAAe,OAAO,WAAW,KAAK,OAAO;AAC/D,cAAI,KAAK,QAAQ,QAAQ,YAAY,WAAW;AAChD,cAAI,OAAO;AACX,cAAI,cAAc;AAClB,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-11-2 {
+._1bbe5uo0-3-12-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -18,6 +18,7 @@ import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
 import { useGetThresholds } from "../../../hooks/useGetThresholds.js";
 import { useVisibleAxesConfig } from "../../../hooks/useVisibleAxesConfig.js";
 import { useVisibleAxesScales } from "../../../hooks/useVisibleAxesScales.js";
+import { useXYChartCrosshairHidden } from "../../../hooks/useXYChartCrosshairHidden.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
 import { useFilteredSeriesIdsState } from "../../../store/selectors.js";
@@ -47,7 +48,9 @@ function XYChartCrosshairLines({
   chartBounds,
   isBottomLabelRotated,
   isTopLabelRotated,
-  widthWithBaseOffset
+  widthWithBaseOffset,
+  hideHorizontal,
+  hideVertical
 }) {
   useSelector(({ relativeX: relativeX2, relativeY: relativeY2 }) => `${relativeX2}-${relativeY2}`);
   const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();
@@ -98,8 +101,8 @@ function XYChartCrosshairLines({
   const rightOffset = labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right) ? thresholdOffset.right : 0;
   const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;
   const isBand = variant === "band";
-  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;
-  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;
+  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden && !hideHorizontal;
+  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden && !hideVertical;
   return /* @__PURE__ */ jsxs("svg", { className: clsx(plotLayout, crosshair), children: [
     showHorizontalCrosshair && /* @__PURE__ */ jsx(
       HorizontalCrosshair,
@@ -149,6 +152,7 @@ function XYChartCrosshair({
   useApplyCallbackOnScroll(pinned, dispatch({ type: "RESET_TOOLTIP" }));
   const isBottomLabelRotated = axesConfig["bottom"]?.tickLabelLayout === "vertical";
   const isTopLabelRotated = axesConfig["top"]?.tickLabelLayout === "vertical";
+  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();
   const hasVisibleSeriesOnThresholdAxis = (() => {
     if (!filteredSeriesIds) {
       return (_axisIds) => true;
@@ -184,7 +188,9 @@ function XYChartCrosshair({
       chartBounds,
       isBottomLabelRotated,
       isTopLabelRotated,
-      widthWithBaseOffset: width
+      widthWithBaseOffset: width,
+      hideHorizontal,
+      hideVertical
     }
   );
 }