@dynatrace/strato-components 3.8.0 → 3.10.0

package/esm/charts/tree-map/utils/get-node-opacity.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-opacity.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { DEFAULT_FILL_OPACITY } from '../../core/constants.js';\nimport { getOpacity } from '../../core/utils/getOpacity.js';\nimport type {\n  HighlightingMap,\n  InternalTreeMapNode,\n} from '../types/internal.js';\n\nexport const getNodeOpacity = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n  highlightingMap: HighlightingMap,\n  highlightedItem?: LegendItem,\n): number => {\n  const hasHighlightedItem = highlightedItem !== undefined;\n\n  if (!hasHighlightedItem) {\n    return DEFAULT_FILL_OPACITY;\n  }\n\n  const isHighlighted = highlightingMap[entry.data.id].has(\n    highlightedItem.name,\n  );\n\n  return getOpacity(isHighlighted);\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { DEFAULT_FILL_OPACITY } from '../../core/constants.js';\nimport { getOpacity } from '../../core/utils/getOpacity.js';\nimport type {\n  HighlightingMap,\n  InternalTreeMapNode,\n} from '../types/internal.js';\n\nexport const getNodeOpacity = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n  highlightingMap: HighlightingMap,\n  highlightedItem?: LegendItem,\n): number => {\n  const hasHighlightedItem = highlightedItem !== undefined;\n\n  if (!hasHighlightedItem) {\n    return DEFAULT_FILL_OPACITY;\n  }\n\n  const isHighlighted = highlightingMap[entry.data.id].has(\n    highlightedItem.name,\n  );\n\n  return getOpacity(isHighlighted);\n};\n"],
   "mappings": "AAGA,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAMpB,MAAM,iBAAiB,CAC5B,OACA,iBACA,oBACW;AACX,QAAM,qBAAqB,oBAAoB;AAE/C,MAAI,CAAC,oBAAoB;AACvB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,gBAAgB,MAAM,KAAK,EAAE,EAAE;AAAA,IACnD,gBAAgB;AAAA,EAClB;AAEA,SAAO,WAAW,aAAa;AACjC;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-node-position.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-position.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodePosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x: number; y: number } => ({ x: entry.x0, y: entry.y0 });\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodePosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x: number; y: number } => ({ x: entry.x0, y: entry.y0 });\n"],
   "mappings": "AAIO,MAAM,kBAAkB,CAC7B,WAC8B,EAAE,GAAG,MAAM,IAAI,GAAG,MAAM,GAAG;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-tooltip-data.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport { nodePadding } from './node-padding.js';\nimport { shouldDrawLeafNode } from './should-draw-leaf-node.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getTooltipData = (\n  leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  relativePosition: { x: number; y: number },\n  hasParentLabels: boolean = false,\n) => {\n  const nodes = hasParentLabels ? [...leafNodes, ...clusterNodes] : leafNodes;\n\n  return nodes.find((node) => {\n    const padding = nodePadding(node, hasParentLabels);\n    const showLeafTooltip = shouldDrawLeafNode(node);\n\n    if (!showLeafTooltip && hasParentLabels) {\n      return null;\n    }\n\n    return (\n      node.x0 - padding <= relativePosition.x &&\n      node.x1 + padding >= relativePosition.x &&\n      node.y0 - padding <= relativePosition.y &&\n      node.y1 + padding >= relativePosition.y\n    );\n  });\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport { nodePadding } from './node-padding.js';\nimport { shouldDrawLeafNode } from './should-draw-leaf-node.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getTooltipData = (\n  leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  relativePosition: { x: number; y: number },\n  hasParentLabels: boolean = false,\n) => {\n  const nodes = hasParentLabels ? [...leafNodes, ...clusterNodes] : leafNodes;\n\n  return nodes.find((node) => {\n    const padding = nodePadding(node, hasParentLabels);\n    const showLeafTooltip = shouldDrawLeafNode(node);\n\n    if (!showLeafTooltip && hasParentLabels) {\n      return null;\n    }\n\n    return (\n      node.x0 - padding <= relativePosition.x &&\n      node.x1 + padding >= relativePosition.x &&\n      node.y0 - padding <= relativePosition.y &&\n      node.y1 + padding >= relativePosition.y\n    );\n  });\n};\n"],
   "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAG5B,MAAM,iBAAiB,CAC5B,WACA,cACA,kBACA,kBAA2B,UACxB;AACH,QAAM,QAAQ,kBAAkB,CAAC,GAAG,WAAW,GAAG,YAAY,IAAI;AAElE,SAAO,MAAM,KAAK,CAAC,SAAS;AAC1B,UAAM,UAAU,YAAY,MAAM,eAAe;AACjD,UAAM,kBAAkB,mBAAmB,IAAI;AAE/C,QAAI,CAAC,mBAAmB,iBAAiB;AACvC,aAAO;AAAA,IACT;AAEA,WACE,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB;AAAA,EAE1C,CAAC;AACH;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-tooltip-item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-tooltip-item.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_AGGREGATED_LABEL } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getTooltipItemId = (\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n) => {\n  const isCluster = content?.data.children?.length;\n  const parentName = content?.parent?.data.name;\n  const nodeName = content?.data.name;\n  const nodeValue = content?.data.value;\n\n  const isAggregatedNode = nodeName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedChild =\n    content?.data.children?.[0].name === DEFAULT_AGGREGATED_LABEL;\n  const isChildOfAggregatedCluster = parentName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedCluster = isAggregatedNode && isAggregatedChild;\n\n  if (isChildOfAggregatedCluster || isAggregatedCluster) {\n    return `other-cluster-${nodeValue}`;\n  }\n  if (isAggregatedNode) {\n    return `other-${parentName}-${nodeValue}`;\n  }\n  if (isCluster) {\n    return `cluster-${nodeName}-${nodeValue}`;\n  }\n  return `${parentName}-${nodeName}-${nodeValue}`;\n};\n\nexport const getTooltipItem = (\n  formatter: Formatter,\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n  unit?: string | Unit,\n) => ({\n  id: getTooltipItemId(content),\n  name: content?.data.name ?? '-',\n  values: [formatter(content?.data.value ?? 0, unit)],\n});\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_AGGREGATED_LABEL } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getTooltipItemId = (\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n) => {\n  const isCluster = content?.data.children?.length;\n  const parentName = content?.parent?.data.name;\n  const nodeName = content?.data.name;\n  const nodeValue = content?.data.value;\n\n  const isAggregatedNode = nodeName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedChild =\n    content?.data.children?.[0].name === DEFAULT_AGGREGATED_LABEL;\n  const isChildOfAggregatedCluster = parentName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedCluster = isAggregatedNode && isAggregatedChild;\n\n  if (isChildOfAggregatedCluster || isAggregatedCluster) {\n    return `other-cluster-${nodeValue}`;\n  }\n  if (isAggregatedNode) {\n    return `other-${parentName}-${nodeValue}`;\n  }\n  if (isCluster) {\n    return `cluster-${nodeName}-${nodeValue}`;\n  }\n  return `${parentName}-${nodeName}-${nodeValue}`;\n};\n\nexport const getTooltipItem = (\n  formatter: Formatter,\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n  unit?: string | Unit,\n) => ({\n  id: getTooltipItemId(content),\n  name: content?.data.name ?? '-',\n  values: [formatter(content?.data.value ?? 0, unit)],\n});\n"],
   "mappings": "AAKA,SAAS,gCAAgC;AAGzC,MAAM,mBAAmB,CACvB,YACG;AACH,QAAM,YAAY,SAAS,KAAK,UAAU;AAC1C,QAAM,aAAa,SAAS,QAAQ,KAAK;AACzC,QAAM,WAAW,SAAS,KAAK;AAC/B,QAAM,YAAY,SAAS,KAAK;AAEhC,QAAM,mBAAmB,aAAa;AACtC,QAAM,oBACJ,SAAS,KAAK,WAAW,CAAC,EAAE,SAAS;AACvC,QAAM,6BAA6B,eAAe;AAClD,QAAM,sBAAsB,oBAAoB;AAEhD,MAAI,8BAA8B,qBAAqB;AACrD,WAAO,iBAAiB,SAAS;AAAA,EACnC;AACA,MAAI,kBAAkB;AACpB,WAAO,SAAS,UAAU,IAAI,SAAS;AAAA,EACzC;AACA,MAAI,WAAW;AACb,WAAO,WAAW,QAAQ,IAAI,SAAS;AAAA,EACzC;AACA,SAAO,GAAG,UAAU,IAAI,QAAQ,IAAI,SAAS;AAC/C;AAEO,MAAM,iBAAiB,CAC5B,WACA,SACA,UACI;AAAA,EACJ,IAAI,iBAAiB,OAAO;AAAA,EAC5B,MAAM,SAAS,KAAK,QAAQ;AAAA,EAC5B,QAAQ,CAAC,UAAU,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;AACpD;",
   "names": []
 }

package/esm/charts/tree-map/utils/node-padding.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/node-padding.ts"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\n\nimport {\n  NODE_LEAF_PADDING,\n  NODE_CLUSTER_PADDING,\n  NODE_WITH_RECT_CLUSTER_PADDING,\n  NODE_WITH_RECT_PADDING_TOP,\n  ROOT_NODE_WITH_LABELS_OUTER_PADDING,\n  NODE_WITH_RECT_OUTER_PADDING,\n} from '../constants.js';\nimport { type InternalTreeMapNode } from '../types/internal.js';\n\nexport function nodePadding<TTreeNode>(\n  node: HierarchyRectangularNode<TTreeNode>,\n  hasParentLabel: boolean,\n): number {\n  if (node.height === 0) {\n    return NODE_LEAF_PADDING;\n  }\n\n  if (hasParentLabel) {\n    return node.depth > 0\n      ? NODE_CLUSTER_PADDING\n      : NODE_WITH_RECT_CLUSTER_PADDING;\n  }\n\n  return NODE_CLUSTER_PADDING;\n}\n\nexport const nodePaddingTop = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_PADDING_TOP\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n\nexport const nodePaddingOuter = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_OUTER_PADDING\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport {\n  NODE_LEAF_PADDING,\n  NODE_CLUSTER_PADDING,\n  NODE_WITH_RECT_CLUSTER_PADDING,\n  NODE_WITH_RECT_PADDING_TOP,\n  ROOT_NODE_WITH_LABELS_OUTER_PADDING,\n  NODE_WITH_RECT_OUTER_PADDING,\n} from '../constants.js';\nimport { type InternalTreeMapNode } from '../types/internal.js';\n\nexport function nodePadding<TTreeNode>(\n  node: HierarchyRectangularNode<TTreeNode>,\n  hasParentLabel: boolean,\n): number {\n  if (node.height === 0) {\n    return NODE_LEAF_PADDING;\n  }\n\n  if (hasParentLabel) {\n    return node.depth > 0\n      ? NODE_CLUSTER_PADDING\n      : NODE_WITH_RECT_CLUSTER_PADDING;\n  }\n\n  return NODE_CLUSTER_PADDING;\n}\n\nexport const nodePaddingTop = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_PADDING_TOP\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n\nexport const nodePaddingOuter = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_OUTER_PADDING\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n"],
   "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,YACd,MACA,gBACQ;AACR,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB;AAClB,WAAO,KAAK,QAAQ,IAChB,uBACA;AAAA,EACN;AAEA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACW;AACX,SAAO,KAAK,QAAQ,IAChB,6BACA;AACN;AAEO,MAAM,mBAAmB,CAC9B,SACW;AACX,SAAO,KAAK,QAAQ,IAChB,+BACA;AACN;",
   "names": []
 }

package/esm/charts/tree-map/utils/should-draw-leaf-node.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/should-draw-leaf-node.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport {\n  RECT_STROKE_WIDTH,\n  MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN,\n  MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN,\n} from '../constants.js';\nimport type { LeafNode } from '../types/guards/node-guards.js';\n\nexport const shouldDrawLeafNode = (\n  leaf: HierarchyRectangularNode<LeafNode>,\n) => {\n  const { y0 = 0, y1 = 0, x0 = 0, x1 = 0 } = leaf.parent ?? {};\n\n  const nodeHeight = Math.abs(y1 - y0);\n  const nodeWidth = Math.abs(x1 - x0);\n\n  const fitHeight =\n    nodeHeight + RECT_STROKE_WIDTH >= MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN;\n\n  const fitWidth =\n    nodeWidth + RECT_STROKE_WIDTH >= MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN;\n\n  return fitHeight && fitWidth;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport {\n  RECT_STROKE_WIDTH,\n  MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN,\n  MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN,\n} from '../constants.js';\nimport type { LeafNode } from '../types/guards/node-guards.js';\n\nexport const shouldDrawLeafNode = (\n  leaf: HierarchyRectangularNode<LeafNode>,\n) => {\n  const { y0 = 0, y1 = 0, x0 = 0, x1 = 0 } = leaf.parent ?? {};\n\n  const nodeHeight = Math.abs(y1 - y0);\n  const nodeWidth = Math.abs(x1 - x0);\n\n  const fitHeight =\n    nodeHeight + RECT_STROKE_WIDTH >= MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN;\n\n  const fitWidth =\n    nodeWidth + RECT_STROKE_WIDTH >= MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN;\n\n  return fitHeight && fitWidth;\n};\n"],
   "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAAqB,CAChC,SACG;AACH,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,KAAK,UAAU,CAAC;AAE3D,QAAM,aAAa,KAAK,IAAI,KAAK,EAAE;AACnC,QAAM,YAAY,KAAK,IAAI,KAAK,EAAE;AAElC,QAAM,YACJ,aAAa,qBAAqB;AAEpC,QAAM,WACJ,YAAY,qBAAqB;AAEnC,SAAO,aAAa;AACtB;",
   "names": []
 }

package/esm/charts/tree-map/utils/split-nodes-by-depth.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/split-nodes-by-depth.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const splitNodesByDepth = (\n  nodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n) => {\n  const splitNodes: {\n    clusters: HierarchyRectangularNode<ClusterNode>[];\n    leafs: HierarchyRectangularNode<LeafNode>[];\n  } = { clusters: [], leafs: [] };\n\n  return nodes.reduce((acc, node) => {\n    if (node.depth === 1) {\n      acc.clusters.push(node as HierarchyRectangularNode<ClusterNode>);\n    }\n    if (node.depth > 1) {\n      acc.leafs.push(node as HierarchyRectangularNode<LeafNode>);\n    }\n    return acc;\n  }, splitNodes);\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const splitNodesByDepth = (\n  nodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n) => {\n  const splitNodes: {\n    clusters: HierarchyRectangularNode<ClusterNode>[];\n    leafs: HierarchyRectangularNode<LeafNode>[];\n  } = { clusters: [], leafs: [] };\n\n  return nodes.reduce((acc, node) => {\n    if (node.depth === 1) {\n      acc.clusters.push(node as HierarchyRectangularNode<ClusterNode>);\n    }\n    if (node.depth > 1) {\n      acc.leafs.push(node as HierarchyRectangularNode<LeafNode>);\n    }\n    return acc;\n  }, splitNodes);\n};\n"],
   "mappings": "AAKO,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,aAGF,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC,EAAE;AAE9B,SAAO,MAAM,OAAO,CAAC,KAAK,SAAS;AACjC,QAAI,KAAK,UAAU,GAAG;AACpB,UAAI,SAAS,KAAK,IAA6C;AAAA,IACjE;AACA,QAAI,KAAK,QAAQ,GAAG;AAClB,UAAI,MAAM,KAAK,IAA0C;AAAA,IAC3D;AACA,WAAO;AAAA,EACT,GAAG,UAAU;AACf;",
   "names": []
 }

package/esm/charts/xy-chart/XYChart.js

@@ -11,10 +11,7 @@ import { BarLabelLayout } from "./components/displays/BarDisplay/BarLabelLayout.
 import { XYChartGridLayout } from "./components/layout/XYChartGridLayout.js";
 import { XYChartOverlay } from "./components/overlay/XYChartOverlay.js";
 import { XYChartThresholdArea } from "./components/thresholds/XYChartThresholdArea.js";
-import {
-  ANNOTATIONS_PADDING_BOTTOM,
-  XY_CHART_ARIA_LABEL
-} from "./constants/defaults.js";
+import { XY_CHART_ARIA_LABEL } from "./constants/defaults.js";
 import { XYChartSelectConfigContext } from "./context/XYChartSelectConfig.context.js";
 import { XYChartTooltipContext } from "./context/XYChartTooltip.context.js";
 import { useVisibleAxesConfig } from "./hooks/useVisibleAxesConfig.js";
@@ -69,9 +66,7 @@ const XYChart = forwardRef(
       annotationsConfig?.fixedTracks,
       hiddenTracks.length
     );
-    const hasVisibleAnnotationTracks = tracksQuantity - hiddenTracks.length > 0;
-    const annotationsPadding = hasVisibleAnnotationTracks ? ANNOTATIONS_PADDING_BOTTOM : 0;
-    const annotationsAreaHeight = annotationsVisibleArea + annotationsPadding;
+    const annotationsAreaHeight = annotationsVisibleArea;
     const showAnnotations = shouldShowAnnotations(
       chartGridHeight,
       tracksQuantity

package/esm/charts/xy-chart/XYChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/xy-chart/XYChart.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { BarLabelLayout } from './components/displays/BarDisplay/BarLabelLayout.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport {\n  ANNOTATIONS_PADDING_BOTTOM,\n  XY_CHART_ARIA_LABEL,\n} from './constants/defaults.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { XYChartTooltipContext } from './context/XYChartTooltip.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const hasVisibleAnnotationTracks = tracksQuantity - hiddenTracks.length > 0;\n    const annotationsPadding = hasVisibleAnnotationTracks\n      ? ANNOTATIONS_PADDING_BOTTOM\n      : 0;\n    const annotationsAreaHeight = annotationsVisibleArea + annotationsPadding;\n\n    const showAnnotations = shouldShowAnnotations(\n      chartGridHeight,\n      tracksQuantity,\n    );\n\n    const showAxes = shouldShowAxes(chartGridHeight);\n\n    const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;\n    const computedGridTemplateRows = showAxes\n      ? gridTemplateRows(\n          bottomAxisMaxSize,\n          topAxisMaxSize,\n          gridAnnotationsHeight,\n        )\n      : '0px 0px 1fr 1px';\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={computedGridTemplateRows}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  {showAxes && <XYChartTopAxisArea />}\n                  {showAxes && <XYChartBottomAxisArea />}\n                  {showAxes && <XYChartLeftAxisArea />}\n                  {showAxes && <XYChartRightAxisArea />}\n\n                  {showAnnotations && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <BarLabelLayout />\n                    <XYChartAxisBorder />\n                    {showAnnotations && <XYChartAnnotationsIndicators />}\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { BarLabelLayout } from './components/displays/BarDisplay/BarLabelLayout.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport { XY_CHART_ARIA_LABEL } from './constants/defaults.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { XYChartTooltipContext } from './context/XYChartTooltip.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const annotationsAreaHeight = annotationsVisibleArea;\n\n    const showAnnotations = shouldShowAnnotations(\n      chartGridHeight,\n      tracksQuantity,\n    );\n\n    const showAxes = shouldShowAxes(chartGridHeight);\n\n    const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;\n    const computedGridTemplateRows = showAxes\n      ? gridTemplateRows(\n          bottomAxisMaxSize,\n          topAxisMaxSize,\n          gridAnnotationsHeight,\n        )\n      : '0px 0px 1fr 1px';\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={computedGridTemplateRows}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  {showAxes && <XYChartTopAxisArea />}\n                  {showAxes && <XYChartBottomAxisArea />}\n                  {showAxes && <XYChartLeftAxisArea />}\n                  {showAxes && <XYChartRightAxisArea />}\n\n                  {showAnnotations && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <BarLabelLayout />\n                    <XYChartAxisBorder />\n                    {showAnnotations && <XYChartAnnotationsIndicators />}\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js

@@ -10,7 +10,7 @@ import {
 } from "../../../core/components/annotations/constants.js";
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
-import { ANNOTATIONS_PADDING_BOTTOM } from "../../constants/defaults.js";
+import { useVisibleAxesScales } from "../../hooks/useVisibleAxesScales.js";
 import { useXYChartAnnotationsConfig } from "../../hooks/useXYChartAnnotationsConfig.js";
 import { useXYChartAnnotationsData } from "../../hooks/useXYChartAnnotationsData.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
@@ -25,6 +25,7 @@ const XYChartAnnotationsArea = () => {
   const annotationsData = useXYChartAnnotationsData();
   const setState = useSetState();
   const { width } = useGridPlotSize();
+  const { top: topAxisScale } = useVisibleAxesScales();
   const { axes } = useXYChartData();
   const [behaviorTrackingProps] = useBehavioralTrackingProps(
     annotationsConfig ?? {}
@@ -41,7 +42,12 @@ const XYChartAnnotationsArea = () => {
   if (isUndefined(annotationsConfig) || isUndefined(annotationsData)) {
     return null;
   }
-  const { xAxisId, showLabels = false, annotationsActions } = annotationsConfig;
+  const {
+    xAxisId,
+    showLabels = false,
+    annotationsActions,
+    textOverflow = DEFAULT_INTEGRATION_TEXT_OVERFLOW
+  } = annotationsConfig;
   const axis = axes.find(({ id }) => id === xAxisId);
   if (axis === void 0) {
     return null;
@@ -53,42 +59,36 @@ const XYChartAnnotationsArea = () => {
     axisType: axis.type,
     axisScale: scale
   }) ? AnnotationsTimeDisplay : AnnotationsNumericalDisplay;
-  return /* @__PURE__ */ jsx(
-    ChartGrid.GridArea,
-    {
-      paddingBottom: ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelsOffset = availableWidth - width;
-        const annotationsCommonConfig = {
-          tracks: serializedAnnotationsData,
-          showLabels,
-          labelsOffset,
-          width: availableWidth,
-          markerGroupHover: handleUpdateIndicators,
-          textOverflow: DEFAULT_INTEGRATION_TEXT_OVERFLOW,
-          truncateMode: "middle",
-          tooltipConfig: annotationsConfig.tooltip,
-          ...behaviorTrackingProps
-        };
-        return /* @__PURE__ */ jsx(
-          AnnotationsScrollWrapper,
+  return /* @__PURE__ */ jsx(ChartGrid.GridArea, { gridArea: AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelsOffset = availableWidth - width;
+    const annotationsCommonConfig = {
+      tracks: serializedAnnotationsData,
+      showLabels,
+      outerBottomLine: !isUndefined(topAxisScale),
+      labelsOffset,
+      width: availableWidth,
+      markerGroupHover: handleUpdateIndicators,
+      textOverflow,
+      truncateMode: "middle",
+      tooltipConfig: annotationsConfig.tooltip,
+      ...behaviorTrackingProps
+    };
+    return /* @__PURE__ */ jsx(
+      AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ jsx(
+          DisplayComponent,
           {
-            height: availableHeight,
-            width: availableWidth + SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ jsx(
-              DisplayComponent,
-              {
-                scale,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                ...annotationsCommonConfig
-              }
-            )
+            scale,
+            annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
+            ...annotationsCommonConfig
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };
 export {
   XYChartAnnotationsArea

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/annotations/XYChartAnnotationsArea.tsx"],
-  "sourcesContent": ["import { ScaleLinear } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsNumericalDisplay } from '../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_INTEGRATION_TEXT_OVERFLOW,\n  SCROLLBAR_THRESHOLD,\n} from '../../../core/components/annotations/constants.js';\nimport { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { TextOverflowOptions } from '../../../core/components/annotations/types/marker.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport type { DateScales } from '../../../core/types/scales.js';\nimport { ANNOTATIONS_PADDING_BOTTOM } from '../../constants/defaults.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from '../../hooks/useXYChartAnnotationsData.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { isTimeScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartAnnotationsArea = () => {\n  const scales = useXYChartScales();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const annotationsData = useXYChartAnnotationsData();\n  const setState = useSetState();\n  const { width } = useGridPlotSize();\n  /* Using axes from data provider instead of config ones as some axes might disappear when filtering\n   * This could leave the annotations space empty and this expected to avoid suddenly moving areas around.\n   */\n  const { axes } = useXYChartData();\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(\n    annotationsConfig ?? {},\n  );\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  if (isUndefined(annotationsConfig) || isUndefined(annotationsData)) {\n    return null;\n  }\n\n  const { xAxisId, showLabels = false, annotationsActions } = annotationsConfig;\n  const axis = axes.find(({ id }) => id === xAxisId);\n\n  if (axis === undefined) {\n    return null;\n  }\n\n  const scale = getCurrentScale(scales, xAxisId) as ScaleLinear<\n    number,\n    number\n  > &\n    DateScales;\n\n  const trackNames = Array.from(annotationsData.keys());\n\n  const serializedAnnotationsData = trackNames\n    .map((name) => annotationsData.get(name))\n    .filter((track) => !isUndefined(track));\n\n  const DisplayComponent = isTimeScale({\n    axisType: axis.type,\n    axisScale: scale,\n  })\n    ? AnnotationsTimeDisplay\n    : AnnotationsNumericalDisplay;\n\n  return (\n    <ChartGrid.GridArea\n      paddingBottom={ANNOTATIONS_PADDING_BOTTOM}\n      gridArea={AREAS.annotations}\n    >\n      {({ availableWidth, availableHeight }) => {\n        const labelsOffset = availableWidth - width;\n        const annotationsCommonConfig = {\n          tracks: serializedAnnotationsData,\n          showLabels,\n          labelsOffset,\n          width: availableWidth,\n          markerGroupHover: handleUpdateIndicators,\n          textOverflow:\n            DEFAULT_INTEGRATION_TEXT_OVERFLOW as TextOverflowOptions,\n          truncateMode: 'middle' as const,\n          tooltipConfig: annotationsConfig.tooltip,\n          ...behaviorTrackingProps,\n        };\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <DisplayComponent\n              scale={scale}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              {...annotationsCommonConfig}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
-  "mappings": "AA0GY;AAzGZ,SAAS,mBAAmB;AAE5B,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAIP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,yBAAyB,MAAM;AAC1C,QAAM,SAAS,iBAAiB;AAChC,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAIlC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,qBAAqB,IAAI;AAAA,IAC9B,qBAAqB,CAAC;AAAA,EACxB;AAEA,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,eAAe,GAAG;AAClE,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,aAAa,OAAO,mBAAmB,IAAI;AAC5D,QAAM,OAAO,KAAK,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO;AAEjD,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,gBAAgB,QAAQ,OAAO;AAM7C,QAAM,aAAa,MAAM,KAAK,gBAAgB,KAAK,CAAC;AAEpD,QAAM,4BAA4B,WAC/B,IAAI,CAAC,SAAS,gBAAgB,IAAI,IAAI,CAAC,EACvC,OAAO,CAAC,UAAU,CAAC,YAAY,KAAK,CAAC;AAExC,QAAM,mBAAmB,YAAY;AAAA,IACnC,UAAU,KAAK;AAAA,IACf,WAAW;AAAA,EACb,CAAC,IACG,yBACA;AAEJ,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC,eAAe;AAAA,MACf,UAAU,MAAM;AAAA,MAEf,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,cAAM,eAAe,iBAAiB;AACtC,cAAM,0BAA0B;AAAA,UAC9B,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,cACE;AAAA,UACF,cAAc;AAAA,UACd,eAAe,kBAAkB;AAAA,UACjC,GAAG;AAAA,QACL;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR,OAAO,iBAAiB;AAAA,YAExB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,gBACjD,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { ScaleLinear } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsNumericalDisplay } from '../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_INTEGRATION_TEXT_OVERFLOW,\n  SCROLLBAR_THRESHOLD,\n} from '../../../core/components/annotations/constants.js';\nimport { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport type { DateScales } from '../../../core/types/scales.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from '../../hooks/useXYChartAnnotationsData.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { isTimeScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartAnnotationsArea = () => {\n  const scales = useXYChartScales();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const annotationsData = useXYChartAnnotationsData();\n  const setState = useSetState();\n  const { width } = useGridPlotSize();\n  const { top: topAxisScale } = useVisibleAxesScales();\n  /* Using axes from data provider instead of config ones as some axes might disappear when filtering\n   * This could leave the annotations space empty and this expected to avoid suddenly moving areas around.\n   */\n  const { axes } = useXYChartData();\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(\n    annotationsConfig ?? {},\n  );\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  if (isUndefined(annotationsConfig) || isUndefined(annotationsData)) {\n    return null;\n  }\n\n  const {\n    xAxisId,\n    showLabels = false,\n    annotationsActions,\n    textOverflow = DEFAULT_INTEGRATION_TEXT_OVERFLOW,\n  } = annotationsConfig;\n  const axis = axes.find(({ id }) => id === xAxisId);\n\n  if (axis === undefined) {\n    return null;\n  }\n\n  const scale = getCurrentScale(scales, xAxisId) as ScaleLinear<\n    number,\n    number\n  > &\n    DateScales;\n\n  const trackNames = Array.from(annotationsData.keys());\n\n  const serializedAnnotationsData = trackNames\n    .map((name) => annotationsData.get(name))\n    .filter((track) => !isUndefined(track));\n\n  const DisplayComponent = isTimeScale({\n    axisType: axis.type,\n    axisScale: scale,\n  })\n    ? AnnotationsTimeDisplay\n    : AnnotationsNumericalDisplay;\n\n  return (\n    <ChartGrid.GridArea gridArea={AREAS.annotations}>\n      {({ availableWidth, availableHeight }) => {\n        const labelsOffset = availableWidth - width;\n        const annotationsCommonConfig = {\n          tracks: serializedAnnotationsData,\n          showLabels,\n          outerBottomLine: !isUndefined(topAxisScale),\n          labelsOffset,\n          width: availableWidth,\n          markerGroupHover: handleUpdateIndicators,\n          textOverflow,\n          truncateMode: 'middle' as const,\n          tooltipConfig: annotationsConfig.tooltip,\n          ...behaviorTrackingProps,\n        };\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <DisplayComponent\n              scale={scale}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              {...annotationsCommonConfig}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
+  "mappings": "AA4GY;AA3GZ,SAAS,mBAAmB;AAE5B,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,4BAA4B;AACrC,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,yBAAyB,MAAM;AAC1C,QAAM,SAAS,iBAAiB;AAChC,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,KAAK,aAAa,IAAI,qBAAqB;AAInD,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,qBAAqB,IAAI;AAAA,IAC9B,qBAAqB,CAAC;AAAA,EACxB;AAEA,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,eAAe,GAAG;AAClE,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AACJ,QAAM,OAAO,KAAK,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO;AAEjD,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,gBAAgB,QAAQ,OAAO;AAM7C,QAAM,aAAa,MAAM,KAAK,gBAAgB,KAAK,CAAC;AAEpD,QAAM,4BAA4B,WAC/B,IAAI,CAAC,SAAS,gBAAgB,IAAI,IAAI,CAAC,EACvC,OAAO,CAAC,UAAU,CAAC,YAAY,KAAK,CAAC;AAExC,QAAM,mBAAmB,YAAY;AAAA,IACnC,UAAU,KAAK;AAAA,IACf,WAAW;AAAA,EACb,CAAC,IACG,yBACA;AAEJ,SACE,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,aACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,UAAM,eAAe,iBAAiB;AACtC,UAAM,0BAA0B;AAAA,MAC9B,QAAQ;AAAA,MACR;AAAA,MACA,iBAAiB,CAAC,YAAY,YAAY;AAAA,MAC1C;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA,cAAc;AAAA,MACd,eAAe,kBAAkB;AAAA,MACjC,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,iBAAiB;AAAA,QAExB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,YACjD,GAAG;AAAA;AAAA,QACN;AAAA;AAAA,IACF;AAAA,EAEJ,GACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.js

@@ -19,6 +19,7 @@ const serializeAnnotationsMarkerFromXYChartData = (data, markerConfig) => {
     hidden: evaluateOptionalAttribute(markerConfig.hidden, data, false),
     priority: evaluateOptionalAttribute(markerConfig.priority, data, 0),
     color: markerConfig.colorAccessor ? getDatumValue(data, markerConfig.colorAccessor) : void 0,
+    symbolColor: markerConfig.symbolColorAccessor ? getDatumValue(data, markerConfig.symbolColorAccessor) : void 0,
     title: markerConfig.titleAccessor ? getDatumValue(data, markerConfig.titleAccessor) : void 0,
     description: markerConfig.descriptionAccessor ? getDatumValue(data, markerConfig.descriptionAccessor) : void 0,
     indicatorsDisplay: evaluateOptionalAttribute(

package/esm/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.ts"],
-  "sourcesContent": ["import {\n  AnnotationsIntegrationMarkerConfig,\n  AnnotationsIntegrationTrackConfig,\n  IndicatorData,\n} from '../../../../core/components/annotations/components/indicators/types.js';\nimport {\n  buildIndicator,\n  isAlwaysHidden,\n  isAlwaysShown,\n} from '../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js';\nimport { DEFAULT_MARKER_COLOR } from '../../../../core/components/annotations/constants.js';\nimport { AnnotationsTrackConfig } from '../../../../core/components/annotations/types/annotations-track-props.js';\nimport { SelectionState } from '../../../../core/components/annotations/types/state.js';\nimport { getMinMaxAsNumber } from '../../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { populateMissingMarkerProps } from '../../../../core/components/annotations/utils/populate-missing-marker-props.js';\nimport { populateMissingTrackProps } from '../../../../core/components/annotations/utils/populate-missing-track-props.js';\nimport { serializeMarkerRange } from '../../../../core/components/annotations/utils/serialize-marker-range.js';\nimport { getDatumValue } from '../../../processing-strategies/utils/access-datapoint/get-datapoints.js';\nimport { XYChartAnnotationsMarkerProps } from '../../../slots/Annotations/Marker.js';\nimport { XYChartAnnotationsTrackProps } from '../../../slots/Annotations/Track.js';\nimport { XYChartData } from '../../../types/xy-chart.js';\nimport { evaluateOptionalAttribute } from '../../../utils/evaluate-with-data.js';\n\nconst serializeAnnotationsMarkerFromXYChartData = (\n  data: XYChartData,\n  markerConfig: XYChartAnnotationsMarkerProps,\n): AnnotationsIntegrationMarkerConfig => {\n  const response = {\n    ...data,\n    start: getDatumValue(data, markerConfig.startAccessor),\n    end: getDatumValue(data, markerConfig.endAccessor),\n    symbol: evaluateOptionalAttribute(markerConfig.symbol, data, undefined),\n    hidden: evaluateOptionalAttribute(markerConfig.hidden, data, false),\n    priority: evaluateOptionalAttribute(markerConfig.priority, data, 0),\n    color: markerConfig.colorAccessor\n      ? (getDatumValue(data, markerConfig.colorAccessor) as string)\n      : undefined,\n    title: markerConfig.titleAccessor\n      ? (getDatumValue(data, markerConfig.titleAccessor) as string)\n      : undefined,\n    description: markerConfig.descriptionAccessor\n      ? (getDatumValue(data, markerConfig.descriptionAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      markerConfig.indicatorsDisplay,\n      data,\n      undefined,\n    ),\n  };\n\n  return response as AnnotationsIntegrationMarkerConfig;\n};\n\nconst serializeAnnotationsTrackFromXYChartData = (\n  data: XYChartData,\n  trackConfig: XYChartAnnotationsTrackProps,\n): AnnotationsIntegrationTrackConfig => {\n  return {\n    hidden: evaluateOptionalAttribute(trackConfig.hidden, data, false),\n    symbol: evaluateOptionalAttribute(trackConfig.symbol, data, undefined),\n    color: trackConfig.colorAccessor\n      ? (getDatumValue(data, trackConfig.colorAccessor) as string)\n      : undefined,\n    label: trackConfig.labelAccessor\n      ? (getDatumValue(data, trackConfig.labelAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      trackConfig.indicatorsDisplay,\n      data,\n      'auto',\n    ),\n    markers: [],\n  };\n};\n\nexport const getIndicatorsFromAnnotations = (\n  data: XYChartData[],\n  tracksConfig: XYChartAnnotationsTrackProps,\n  markersConfig: XYChartAnnotationsMarkerProps,\n  selection: SelectionState,\n) => {\n  const alwaysVisible: IndicatorData[] = [];\n  const selectable: Map<string, IndicatorData> = new Map();\n  const trackIdTroughAccesor = tracksConfig.trackIdAccessor;\n  const hiddenTracks = new Set<string>();\n  const annotationsByTrack: Map<string, AnnotationsTrackConfig> = data.reduce(\n    (trackMap, datum) => {\n      const trackId = getDatumValue(datum, trackIdTroughAccesor) as string;\n      const annotationsTrack: AnnotationsIntegrationTrackConfig = trackMap.has(\n        trackId,\n      )\n        ? trackMap.get(trackId)\n        : populateMissingTrackProps(\n            serializeAnnotationsTrackFromXYChartData(datum, tracksConfig),\n          );\n      if (annotationsTrack?.hidden) {\n        hiddenTracks.add(trackId);\n      }\n\n      const marker = serializeAnnotationsMarkerFromXYChartData(\n        datum,\n        markersConfig,\n      );\n\n      const populatedMarker: AnnotationsIntegrationMarkerConfig =\n        populateMissingMarkerProps(marker, annotationsTrack);\n\n      annotationsTrack.markers.push(populatedMarker);\n      trackMap.set(trackId, annotationsTrack);\n\n      const { color: trackColor, indicatorsDisplay: trackIndicatorDisplay } =\n        annotationsTrack;\n      const {\n        color: markerColor,\n        start: markerStartRaw,\n        end: markerEndRaw,\n        indicatorsDisplay: markerIndicatorDisplay,\n        priority,\n      } = populatedMarker;\n\n      const { min: markerStart, max: markerEnd } = getMinMaxAsNumber(\n        markerStartRaw,\n        markerEndRaw,\n      );\n\n      if (!isAlwaysHidden(markerIndicatorDisplay, trackIndicatorDisplay)) {\n        const trackIndex = Array.from(trackMap.keys()).findIndex(\n          (name) => name === trackId,\n        );\n        const markerId = serializeMarkerRange(\n          { ...populatedMarker, start: markerStart, end: markerEnd },\n          trackIndex,\n        );\n        const color = markerColor ?? trackColor ?? DEFAULT_MARKER_COLOR;\n        const indicator = buildIndicator(\n          color,\n          selection,\n          markerId,\n          markerStart,\n          markerEnd,\n          priority,\n        );\n\n        if (isAlwaysShown(markerIndicatorDisplay, trackIndicatorDisplay)) {\n          alwaysVisible.push(indicator);\n        } else {\n          selectable.set(markerId, indicator);\n        }\n      }\n      return trackMap;\n    },\n    new Map(),\n  );\n  return {\n    indicators: { alwaysVisible, selectable },\n    annotationsByTrack,\n    hiddenTracks,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AnnotationsIntegrationMarkerConfig,\n  AnnotationsIntegrationTrackConfig,\n  IndicatorData,\n} from '../../../../core/components/annotations/components/indicators/types.js';\nimport {\n  buildIndicator,\n  isAlwaysHidden,\n  isAlwaysShown,\n} from '../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js';\nimport { DEFAULT_MARKER_COLOR } from '../../../../core/components/annotations/constants.js';\nimport { AnnotationsTrackConfig } from '../../../../core/components/annotations/types/annotations-track-props.js';\nimport { SelectionState } from '../../../../core/components/annotations/types/state.js';\nimport { getMinMaxAsNumber } from '../../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { populateMissingMarkerProps } from '../../../../core/components/annotations/utils/populate-missing-marker-props.js';\nimport { populateMissingTrackProps } from '../../../../core/components/annotations/utils/populate-missing-track-props.js';\nimport { serializeMarkerRange } from '../../../../core/components/annotations/utils/serialize-marker-range.js';\nimport { getDatumValue } from '../../../processing-strategies/utils/access-datapoint/get-datapoints.js';\nimport { XYChartAnnotationsMarkerProps } from '../../../slots/Annotations/Marker.js';\nimport { XYChartAnnotationsTrackProps } from '../../../slots/Annotations/Track.js';\nimport { XYChartData } from '../../../types/xy-chart.js';\nimport { evaluateOptionalAttribute } from '../../../utils/evaluate-with-data.js';\n\nconst serializeAnnotationsMarkerFromXYChartData = (\n  data: XYChartData,\n  markerConfig: XYChartAnnotationsMarkerProps,\n): AnnotationsIntegrationMarkerConfig => {\n  const response = {\n    ...data,\n    start: getDatumValue(data, markerConfig.startAccessor),\n    end: getDatumValue(data, markerConfig.endAccessor),\n    symbol: evaluateOptionalAttribute(markerConfig.symbol, data, undefined),\n    hidden: evaluateOptionalAttribute(markerConfig.hidden, data, false),\n    priority: evaluateOptionalAttribute(markerConfig.priority, data, 0),\n    color: markerConfig.colorAccessor\n      ? (getDatumValue(data, markerConfig.colorAccessor) as string)\n      : undefined,\n    symbolColor: markerConfig.symbolColorAccessor\n      ? (getDatumValue(data, markerConfig.symbolColorAccessor) as string)\n      : undefined,\n    title: markerConfig.titleAccessor\n      ? (getDatumValue(data, markerConfig.titleAccessor) as string)\n      : undefined,\n    description: markerConfig.descriptionAccessor\n      ? (getDatumValue(data, markerConfig.descriptionAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      markerConfig.indicatorsDisplay,\n      data,\n      undefined,\n    ),\n  };\n\n  return response as AnnotationsIntegrationMarkerConfig;\n};\n\nconst serializeAnnotationsTrackFromXYChartData = (\n  data: XYChartData,\n  trackConfig: XYChartAnnotationsTrackProps,\n): AnnotationsIntegrationTrackConfig => {\n  return {\n    hidden: evaluateOptionalAttribute(trackConfig.hidden, data, false),\n    symbol: evaluateOptionalAttribute(trackConfig.symbol, data, undefined),\n    color: trackConfig.colorAccessor\n      ? (getDatumValue(data, trackConfig.colorAccessor) as string)\n      : undefined,\n    label: trackConfig.labelAccessor\n      ? (getDatumValue(data, trackConfig.labelAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      trackConfig.indicatorsDisplay,\n      data,\n      'auto',\n    ),\n    markers: [],\n  };\n};\n\nexport const getIndicatorsFromAnnotations = (\n  data: XYChartData[],\n  tracksConfig: XYChartAnnotationsTrackProps,\n  markersConfig: XYChartAnnotationsMarkerProps,\n  selection: SelectionState,\n) => {\n  const alwaysVisible: IndicatorData[] = [];\n  const selectable: Map<string, IndicatorData> = new Map();\n  const trackIdTroughAccesor = tracksConfig.trackIdAccessor;\n  const hiddenTracks = new Set<string>();\n  const annotationsByTrack: Map<string, AnnotationsTrackConfig> = data.reduce(\n    (trackMap, datum) => {\n      const trackId = getDatumValue(datum, trackIdTroughAccesor) as string;\n      const annotationsTrack: AnnotationsIntegrationTrackConfig = trackMap.has(\n        trackId,\n      )\n        ? trackMap.get(trackId)\n        : populateMissingTrackProps(\n            serializeAnnotationsTrackFromXYChartData(datum, tracksConfig),\n          );\n      if (annotationsTrack?.hidden) {\n        hiddenTracks.add(trackId);\n      }\n\n      const marker = serializeAnnotationsMarkerFromXYChartData(\n        datum,\n        markersConfig,\n      );\n\n      const populatedMarker: AnnotationsIntegrationMarkerConfig =\n        populateMissingMarkerProps(marker, annotationsTrack);\n\n      annotationsTrack.markers.push(populatedMarker);\n      trackMap.set(trackId, annotationsTrack);\n\n      const { color: trackColor, indicatorsDisplay: trackIndicatorDisplay } =\n        annotationsTrack;\n      const {\n        color: markerColor,\n        start: markerStartRaw,\n        end: markerEndRaw,\n        indicatorsDisplay: markerIndicatorDisplay,\n        priority,\n      } = populatedMarker;\n\n      const { min: markerStart, max: markerEnd } = getMinMaxAsNumber(\n        markerStartRaw,\n        markerEndRaw,\n      );\n\n      if (!isAlwaysHidden(markerIndicatorDisplay, trackIndicatorDisplay)) {\n        const trackIndex = Array.from(trackMap.keys()).findIndex(\n          (name) => name === trackId,\n        );\n        const markerId = serializeMarkerRange(\n          { ...populatedMarker, start: markerStart, end: markerEnd },\n          trackIndex,\n        );\n        const color = markerColor ?? trackColor ?? DEFAULT_MARKER_COLOR;\n        const indicator = buildIndicator(\n          color,\n          selection,\n          markerId,\n          markerStart,\n          markerEnd,\n          priority,\n        );\n\n        if (isAlwaysShown(markerIndicatorDisplay, trackIndicatorDisplay)) {\n          alwaysVisible.push(indicator);\n        } else {\n          selectable.set(markerId, indicator);\n        }\n      }\n      return trackMap;\n    },\n    new Map(),\n  );\n  return {\n    indicators: { alwaysVisible, selectable },\n    annotationsByTrack,\n    hiddenTracks,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-8-0 {
+._bidc430-3-10-0 {
   position: relative;
 }

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-8-0";
+var axisContainerStyle = "_bidc430-3-10-0";
 export {
   axisContainerStyle
 };

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-8-0';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-10-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-8-0 {
-  direction: var(--_z2zz8y0-3-8-0);
+._z2zz8y2-3-10-0 {
+  direction: var(--_z2zz8y0-3-10-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-8-0);
+  width: var(--_z2zz8y1-3-10-0);
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-8-0)";
-var tickStyle = "_z2zz8y2-3-8-0";
-var widthContainer = "var(--_z2zz8y1-3-8-0)";
+var directionValue = "var(--_z2zz8y0-3-10-0)";
+var tickStyle = "_z2zz8y2-3-10-0";
+var widthContainer = "var(--_z2zz8y1-3-10-0)";
 export {
   directionValue,
   tickStyle,

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-8-0)';\nexport var tickStyle = '_z2zz8y2-3-8-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-8-0)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-10-0)';\nexport var tickStyle = '_z2zz8y2-3-10-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-10-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/TickWithTruncationForeignObject.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { isSafari } from "../../../../core/utils/user-agent-utils.js";
 import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
-import { isSafari } from "../../../core/utils/is-browser-safari.js";
 function TickWithTruncationForeignObject({
   x,
   y,

package/esm/charts/xy-chart/components/axes/TickWithTruncationForeignObject.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/TickWithTruncationForeignObject.tsx"],
-  "sourcesContent": ["import { type CSSProperties } from 'react';\n\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { isSafari } from '../../../core/utils/is-browser-safari.js';\n\ninterface TickWithTruncationForeignObjectProps {\n  x: number;\n  y: number;\n  style: CSSProperties;\n  height: number | string;\n  width: number | string;\n  tickClassName: string | undefined;\n  tickInlineStyle: CSSProperties;\n  formattedValue: string;\n  displayValue: string | undefined;\n  showTooltip: boolean;\n}\n\nexport function TickWithTruncationForeignObject({\n  x,\n  y,\n  style,\n  height,\n  width,\n  tickClassName,\n  tickInlineStyle,\n  formattedValue,\n  displayValue,\n  showTooltip,\n}: Readonly<TickWithTruncationForeignObjectProps>) {\n  return (\n    <foreignObject x={x} y={y} style={style} height={height} width={width}>\n      {isSafari() ? (\n        <div\n          className={tickClassName}\n          style={tickInlineStyle}\n          title={formattedValue}\n        >\n          {displayValue}\n        </div>\n      ) : (\n        <Tooltip disabled={showTooltip} text={formattedValue}>\n          <div className={tickClassName} style={tickInlineStyle}>\n            {displayValue}\n          </div>\n        </Tooltip>\n      )}\n    </foreignObject>\n  );\n}\n"],
-  "mappings": "AAiCQ;AA/BR,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAelB,SAAS,gCAAgC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,SACE,oBAAC,mBAAc,GAAM,GAAM,OAAc,QAAgB,OACtD,mBAAS,IACR;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,MAEN;AAAA;AAAA,EACH,IAEA,oBAAC,WAAQ,UAAU,aAAa,MAAM,gBACpC,8BAAC,SAAI,WAAW,eAAe,OAAO,iBACnC,wBACH,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import { type CSSProperties } from 'react';\n\nimport { isSafari } from '../../../../core/utils/user-agent-utils.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\n\ninterface TickWithTruncationForeignObjectProps {\n  x: number;\n  y: number;\n  style: CSSProperties;\n  height: number | string;\n  width: number | string;\n  tickClassName: string | undefined;\n  tickInlineStyle: CSSProperties;\n  formattedValue: string;\n  displayValue: string | undefined;\n  showTooltip: boolean;\n}\n\nexport function TickWithTruncationForeignObject({\n  x,\n  y,\n  style,\n  height,\n  width,\n  tickClassName,\n  tickInlineStyle,\n  formattedValue,\n  displayValue,\n  showTooltip,\n}: Readonly<TickWithTruncationForeignObjectProps>) {\n  return (\n    <foreignObject x={x} y={y} style={style} height={height} width={width}>\n      {isSafari() ? (\n        <div\n          className={tickClassName}\n          style={tickInlineStyle}\n          title={formattedValue}\n        >\n          {displayValue}\n        </div>\n      ) : (\n        <Tooltip disabled={showTooltip} text={formattedValue}>\n          <div className={tickClassName} style={tickInlineStyle}>\n            {displayValue}\n          </div>\n        </Tooltip>\n      )}\n    </foreignObject>\n  );\n}\n"],
+  "mappings": "AAiCQ;AA/BR,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAejB,SAAS,gCAAgC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,SACE,oBAAC,mBAAc,GAAM,GAAM,OAAc,QAAgB,OACtD,mBAAS,IACR;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,MAEN;AAAA;AAAA,EACH,IAEA,oBAAC,WAAQ,UAAU,aAAa,MAAM,gBACpC,8BAAC,SAAI,WAAW,eAAe,OAAO,iBACnC,wBACH,GACF,GAEJ;AAEJ;",
   "names": []
 }

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

@@ -12,6 +12,7 @@ import {
 } from "../../../utils/get-scale.js";
 import { relAccessor } from "../../../utils/value-representation.js";
 import {
+  colorAccessor,
   heightAccessor,
   widthAccessor,
   xAccessor,
@@ -52,7 +53,7 @@ function BarDisplay({
       canvasHeight: height,
       canvasWidth: width,
       opacity: () => DEFAULT_FILL_OPACITY,
-      color: () => color.Default,
+      color: colorAccessor(color, datapointMetadataMap),
       x: xAccessor(
         xScale,
         datapointMetadataMap,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarDisplay.tsx"],
-  "sourcesContent": ["import { BarCanvas } from '../../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport type {\n  BarMetadata,\n  BarSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { type BarDatapoint } from '../../../types/xy-chart.js';\nimport {\n  getCurrentScale,\n  getDimensionScale,\n} from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport {\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from '../bar-accessors.js';\n\ninterface BarDisplayProps {\n  axisIdToScales: AxisIdToScales;\n  series: BarSeriesWithDatapoints;\n  metadata: BarMetadata;\n}\n\n// `BarDisplay` registers paint operations against the shared chart <Canvas>\n// via context and returns null. The HTML bar labels are rendered in a sibling\n// layer by `BarLabelLayout` because children of <canvas> are fallback content,\n// not visible DOM siblings \u2014 see ./BarLabelLayout.tsx for the chart-level\n// wrapper that pairs with this display.\n\nexport function isXBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.x0 !== undefined;\n}\n\nexport function isYBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.y0 !== undefined;\n}\n\nexport function BarDisplay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<BarDisplayProps>) {\n  const { height, width } = useGridPlotSize();\n\n  const xScale = getCurrentScale(\n    axisIdToScales,\n    series.xAxisId,\n    isXBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    series.yAxisId,\n    isYBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);\n  const { color } = metadata;\n\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata } = useBarData();\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  return (\n    <BarCanvas<BarDatapoint>\n      key={series.id}\n      data={series.data}\n      canvasHeight={height}\n      canvasWidth={width}\n      opacity={() => DEFAULT_FILL_OPACITY}\n      color={() => color.Default}\n      x={xAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        series.id,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      y={yAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        series.id,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      width={widthAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      height={heightAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      enableDotOverflow\n      overlayPadding={POINT_OVERLAY_PADDING}\n    />\n  );\n}\n\nBarDisplay['displayName'] = 'BarDisplay';\n"],
-  "mappings": "AAwEI;AAxEJ,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAM/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAE1C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AACrE,QAAM,EAAE,iBAAiB,IAAI,WAAW;AAExC,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS,MAAM;AAAA,MACf,OAAO,MAAM,MAAM;AAAA,MACnB,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,mBAAiB;AAAA,MACjB,gBAAgB;AAAA;AAAA,IAjCX,OAAO;AAAA,EAkCd;AAEJ;AAEA,WAAW,aAAa,IAAI;",
+  "sourcesContent": ["import { BarCanvas } from '../../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport type {\n  BarMetadata,\n  BarSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { type BarDatapoint } from '../../../types/xy-chart.js';\nimport {\n  getCurrentScale,\n  getDimensionScale,\n} from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport {\n  colorAccessor,\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from '../bar-accessors.js';\n\ninterface BarDisplayProps {\n  axisIdToScales: AxisIdToScales;\n  series: BarSeriesWithDatapoints;\n  metadata: BarMetadata;\n}\n\n// `BarDisplay` registers paint operations against the shared chart <Canvas>\n// via context and returns null. The HTML bar labels are rendered in a sibling\n// layer by `BarLabelLayout` because children of <canvas> are fallback content,\n// not visible DOM siblings \u2014 see ./BarLabelLayout.tsx for the chart-level\n// wrapper that pairs with this display.\n\nexport function isXBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.x0 !== undefined;\n}\n\nexport function isYBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.y0 !== undefined;\n}\n\nexport function BarDisplay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<BarDisplayProps>) {\n  const { height, width } = useGridPlotSize();\n\n  const xScale = getCurrentScale(\n    axisIdToScales,\n    series.xAxisId,\n    isXBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    series.yAxisId,\n    isYBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);\n  const { color } = metadata;\n\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata } = useBarData();\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  return (\n    <BarCanvas<BarDatapoint>\n      key={series.id}\n      data={series.data}\n      canvasHeight={height}\n      canvasWidth={width}\n      opacity={() => DEFAULT_FILL_OPACITY}\n      color={colorAccessor(color, datapointMetadataMap)}\n      x={xAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        series.id,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      y={yAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        series.id,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      width={widthAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      height={heightAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      enableDotOverflow\n      overlayPadding={POINT_OVERLAY_PADDING}\n    />\n  );\n}\n\nBarDisplay['displayName'] = 'BarDisplay';\n"],
+  "mappings": "AAyEI;AAzEJ,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAM/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAE1C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AACrE,QAAM,EAAE,iBAAiB,IAAI,WAAW;AAExC,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS,MAAM;AAAA,MACf,OAAO,cAAc,OAAO,oBAAoB;AAAA,MAChD,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,mBAAiB;AAAA,MACjB,gBAAgB;AAAA;AAAA,IAjCX,OAAO;AAAA,EAkCd;AAEJ;AAEA,WAAW,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-8-0 {
+._b76tm80-3-10-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-8-0 {
+._b76tm81-3-10-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;
 }
-._b76tm82-3-8-0 {
+._b76tm82-3-10-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

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

@@ -94,9 +94,8 @@ function BarLabelOverlay({
     dimensionYScale,
     relAccessor(yAxis, axisIdToScaleDomain)
   );
-  const fillHex = getCanvasColor(metadata.color.Default);
-  const insideColor = getColorByContrast(fillHex);
   const outsideColor = Colors.Text.Neutral.Default;
+  const seriesFillHex = getCanvasColor(metadata.color.Default);
   const data = filterToScaleDomain(
     series.data,
     isVertical ? xScale : yScale,
@@ -114,6 +113,9 @@ function BarLabelOverlay({
     const h = hFn(datum);
     const barWidth = Math.abs(w);
     const barHeight = Math.abs(h);
+    const { colorOverride } = datapointMetadataMap.get(datum) ?? {};
+    const fillHex = colorOverride ? getCanvasColor(colorOverride) : seriesFillHex;
+    const insideColor = getColorByContrast(fillHex);
     return /* @__PURE__ */ jsx(Fragment, { children: isVertical ? /* @__PURE__ */ jsx(
       VerticalBarLabel,
       {