@dynatrace/strato-components 3.13.3 → 3.14.0

package/esm/charts/core/components/annotations/AnnotationsAtom.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
+import { Children, useMemo } from "react";
 import { wrapper } from "./AnnotationsAtom.sty.js";
 import { AnnotationsCanvasLayout } from "./components/canvas/AnnotationsCanvasLayout.js";
 import { CanvasSvgToImagesProvider } from "./components/canvas/providers/CanvasSvgToImages.Provider.js";
 import { AnnotationsOverlays } from "./components/overlays/AnnotationsOverlays.js";
 import {
+  DEFAULT_ANNOTATIONS_DIMENSIONS,
   DEFAULT_LABELS_WIDTH,
   TRACK_SEPARATOR_STROKE_WIDTH
 } from "./constants.js";
@@ -19,26 +20,49 @@ import { aggregateMarkersCoords } from "./utils/aggregate-markers-coords.js";
 import { computeLabelsPerTrack } from "./utils/compute-labels-per-track.js";
 import { extractVisibleTracks } from "./utils/extract-visible-tracks.js";
 import { getAnnotationsTracksHeight } from "./utils/get-annotations-tracks-height.js";
-const _AnnotationsAtom = (props) => {
+const _AnnotationsAtom = function AnnotationsAtom(props) {
   const {
     width,
     children,
     showLabels = true,
     labelsWidth = DEFAULT_LABELS_WIDTH,
-    outerBottomLine = false
+    outerBottomLine = false,
+    dimensions = DEFAULT_ANNOTATIONS_DIMENSIONS,
+    showMarkerContent = true
   } = props;
   const trackWidth = width - labelsWidth;
   const tracks = extractVisibleTracks(children);
   const tracksQuantity = Children.count(tracks);
-  const totalTracksHeight = getAnnotationsTracksHeight(tracksQuantity);
+  const totalTracksHeight = getAnnotationsTracksHeight(
+    tracksQuantity,
+    dimensions
+  );
   const {
     markersPerTrack,
     markerEventHandlers,
     trackEventHandlers,
     icons,
     tracksConfig
-  } = aggregateMarkersCoords(tracks, trackWidth);
-  const labelsPerTrack = computeLabelsPerTrack(tracks, labelsWidth);
+  } = aggregateMarkersCoords(tracks, trackWidth, dimensions);
+  const labelsPerTrack = showLabels ? computeLabelsPerTrack(tracks, labelsWidth) : void 0;
+  const annotationsConfigValue = useMemo(
+    () => ({
+      showLabels,
+      labelsWidth,
+      trackWidth,
+      outerBottomLine,
+      dimensions,
+      showMarkerContent
+    }),
+    [
+      showLabels,
+      labelsWidth,
+      trackWidth,
+      outerBottomLine,
+      dimensions,
+      showMarkerContent
+    ]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -46,43 +70,32 @@ const _AnnotationsAtom = (props) => {
       style: {
         height: totalTracksHeight
       },
-      children: /* @__PURE__ */ jsx(
-        AnnotationsConfigContext.Provider,
-        {
-          value: {
-            showLabels,
-            labelsWidth,
-            trackWidth,
-            outerBottomLine
-          },
-          children: /* @__PURE__ */ jsx(MarkersByTrackContext.Provider, { value: tracksConfig, children: /* @__PURE__ */ jsx(MarkerCoordinatesContext.Provider, { value: markersPerTrack, children: /* @__PURE__ */ jsx(MarkerEventHandlersContext.Provider, { value: markerEventHandlers, children: /* @__PURE__ */ jsx(TrackEventHandlersContext.Provider, { value: trackEventHandlers, children: /* @__PURE__ */ jsxs(CanvasSvgToImagesProvider, { icons, children: [
-            /* @__PURE__ */ jsx(
-              AnnotationsOverlays,
-              {
-                height: totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH,
-                labelsPerTrack
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              AnnotationsCanvasLayout,
-              {
-                width,
-                height: totalTracksHeight
-              }
-            )
-          ] }) }) }) }) })
-        }
-      )
+      children: /* @__PURE__ */ jsx(AnnotationsConfigContext.Provider, { value: annotationsConfigValue, children: /* @__PURE__ */ jsx(MarkersByTrackContext.Provider, { value: tracksConfig, children: /* @__PURE__ */ jsx(MarkerCoordinatesContext.Provider, { value: markersPerTrack, children: /* @__PURE__ */ jsx(MarkerEventHandlersContext.Provider, { value: markerEventHandlers, children: /* @__PURE__ */ jsx(TrackEventHandlersContext.Provider, { value: trackEventHandlers, children: /* @__PURE__ */ jsxs(CanvasSvgToImagesProvider, { icons, children: [
+        /* @__PURE__ */ jsx(
+          AnnotationsOverlays,
+          {
+            height: totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH,
+            labelsPerTrack
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnnotationsCanvasLayout,
+          {
+            width,
+            height: totalTracksHeight
+          }
+        )
+      ] }) }) }) }) }) })
     }
   );
 };
-const AnnotationsAtom = Object.assign(_AnnotationsAtom, {
+const AnnotationsAtom2 = Object.assign(_AnnotationsAtom, {
   TrackAtom,
   MarkerAtom
 });
-AnnotationsAtom.displayName = "AnnotationsAtom";
+AnnotationsAtom2.displayName = "AnnotationsAtom";
 export {
-  AnnotationsAtom,
+  AnnotationsAtom2 as AnnotationsAtom,
   _AnnotationsAtom
 };
 //# sourceMappingURL=AnnotationsAtom.js.map

package/esm/charts/core/components/annotations/AnnotationsAtom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, Children } from 'react';\n\nimport { wrapper } from './AnnotationsAtom.sty.js';\nimport { AnnotationsCanvasLayout } from './components/canvas/AnnotationsCanvasLayout.js';\nimport { CanvasSvgToImagesProvider } from './components/canvas/providers/CanvasSvgToImages.Provider.js';\nimport { AnnotationsOverlays } from './components/overlays/AnnotationsOverlays.js';\nimport {\n  DEFAULT_LABELS_WIDTH,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from './constants.js';\nimport { AnnotationsConfigContext } from './contexts/AnnotationsConfig.context.js';\nimport { MarkerCoordinatesContext } from './contexts/MarkerCoordinates.context.js';\nimport { MarkerEventHandlersContext } from './contexts/MarkerEventHandlers.context.js';\nimport { MarkersByTrackContext } from './contexts/MarkersByTrack.context.js';\nimport { TrackEventHandlersContext } from './contexts/TrackEventHandlers.context.js';\nimport { MarkerAtom } from './slots/MarkerAtom.js';\nimport { TrackAtom } from './slots/TrackAtom.js';\nimport { aggregateMarkersCoords } from './utils/aggregate-markers-coords.js';\nimport { computeLabelsPerTrack } from './utils/compute-labels-per-track.js';\nimport { extractVisibleTracks } from './utils/extract-visible-tracks.js';\nimport { getAnnotationsTracksHeight } from './utils/get-annotations-tracks-height.js';\n\n/**\n * Props for AnnotationsAtom, representing properties related to annotations.\n * @internal\n */\nexport interface AnnotationsAtomProps {\n  /** Width of the annotations' container. */\n  width: number;\n  /**\n   * Optional flag to determine whether to display labels.\n   * @defaultValue true\n   */\n  showLabels?: boolean;\n  /**\n   * Optional width for the labels if displayed.\n   * @defaultValue 'DEFAULT_LABELS_WIDTH' constant\n   */\n  labelsWidth?: number;\n  /**\n   * Draws a separator line below the bottom-most track. Used when the\n   * annotations area is not directly adjacent to the plot (e.g. an XY chart\n   * with a top axis) and the plot border cannot act as the separator.\n   * @defaultValue false\n   */\n  outerBottomLine?: boolean;\n}\n\n/**\n * The Annotations atomic component\n * @internal\n */\nexport const _AnnotationsAtom = (\n  props: PropsWithChildren<AnnotationsAtomProps>,\n) => {\n  const {\n    width,\n    children,\n    showLabels = true,\n    labelsWidth = DEFAULT_LABELS_WIDTH,\n    outerBottomLine = false,\n  } = props;\n\n  const trackWidth = width - labelsWidth;\n  const tracks = extractVisibleTracks(children);\n  const tracksQuantity = Children.count(tracks);\n  const totalTracksHeight = getAnnotationsTracksHeight(tracksQuantity);\n\n  const {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  } = aggregateMarkersCoords(tracks, trackWidth);\n\n  const labelsPerTrack = computeLabelsPerTrack(tracks, labelsWidth);\n\n  return (\n    <div\n      className={wrapper}\n      style={{\n        height: totalTracksHeight,\n      }}\n    >\n      <AnnotationsConfigContext.Provider\n        value={{\n          showLabels,\n          labelsWidth,\n          trackWidth,\n          outerBottomLine,\n        }}\n      >\n        <MarkersByTrackContext.Provider value={tracksConfig}>\n          <MarkerCoordinatesContext.Provider value={markersPerTrack}>\n            <MarkerEventHandlersContext.Provider value={markerEventHandlers}>\n              <TrackEventHandlersContext.Provider value={trackEventHandlers}>\n                <CanvasSvgToImagesProvider icons={icons}>\n                  <AnnotationsOverlays\n                    height={totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH}\n                    labelsPerTrack={labelsPerTrack}\n                  />\n                  <AnnotationsCanvasLayout\n                    width={width}\n                    height={totalTracksHeight}\n                  />\n                </CanvasSvgToImagesProvider>\n              </TrackEventHandlersContext.Provider>\n            </MarkerEventHandlersContext.Provider>\n          </MarkerCoordinatesContext.Provider>\n        </MarkersByTrackContext.Provider>\n      </AnnotationsConfigContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The Annotations atomic component\n * @internal\n **/\nexport const AnnotationsAtom = Object.assign(_AnnotationsAtom, {\n  TrackAtom,\n  MarkerAtom,\n});\n\n(\n  AnnotationsAtom as typeof AnnotationsAtom & { displayName: string }\n).displayName = 'AnnotationsAtom';\n"],
-  "mappings": "AAiGgB,SACE,KADF;AAjGhB,SAAiC,gBAAgB;AAEjD,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAgCpC,MAAM,mBAAmB,CAC9B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,IACd,kBAAkB;AAAA,EACpB,IAAI;AAEJ,QAAM,aAAa,QAAQ;AAC3B,QAAM,SAAS,qBAAqB,QAAQ;AAC5C,QAAM,iBAAiB,SAAS,MAAM,MAAM;AAC5C,QAAM,oBAAoB,2BAA2B,cAAc;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,QAAQ,UAAU;AAE7C,QAAM,iBAAiB,sBAAsB,QAAQ,WAAW;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA,QAAC,yBAAyB;AAAA,QAAzB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,iBACxC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,qBAC1C,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,oBACzC,+BAAC,6BAA0B,OACzB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ,oBAAoB;AAAA,gBAC5B;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,QAAQ;AAAA;AAAA,YACV;AAAA,aACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,kBAAkB;AAAA,EAC7D;AAAA,EACA;AACF,CAAC;AAGC,gBACA,cAAc;",
-  "names": []
+  "sourcesContent": ["import { type PropsWithChildren, Children, useMemo } from 'react';\n\nimport { wrapper } from './AnnotationsAtom.sty.js';\nimport { AnnotationsCanvasLayout } from './components/canvas/AnnotationsCanvasLayout.js';\nimport { CanvasSvgToImagesProvider } from './components/canvas/providers/CanvasSvgToImages.Provider.js';\nimport { AnnotationsOverlays } from './components/overlays/AnnotationsOverlays.js';\nimport {\n  DEFAULT_ANNOTATIONS_DIMENSIONS,\n  DEFAULT_LABELS_WIDTH,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n  type AnnotationsDimensions,\n} from './constants.js';\nimport { AnnotationsConfigContext } from './contexts/AnnotationsConfig.context.js';\nimport { MarkerCoordinatesContext } from './contexts/MarkerCoordinates.context.js';\nimport { MarkerEventHandlersContext } from './contexts/MarkerEventHandlers.context.js';\nimport { MarkersByTrackContext } from './contexts/MarkersByTrack.context.js';\nimport { TrackEventHandlersContext } from './contexts/TrackEventHandlers.context.js';\nimport { MarkerAtom } from './slots/MarkerAtom.js';\nimport { TrackAtom } from './slots/TrackAtom.js';\nimport { aggregateMarkersCoords } from './utils/aggregate-markers-coords.js';\nimport { computeLabelsPerTrack } from './utils/compute-labels-per-track.js';\nimport { extractVisibleTracks } from './utils/extract-visible-tracks.js';\nimport { getAnnotationsTracksHeight } from './utils/get-annotations-tracks-height.js';\n\n/**\n * Props for AnnotationsAtom, representing properties related to annotations.\n * @internal\n */\nexport interface AnnotationsAtomProps {\n  /** Width of the annotations' container. */\n  width: number;\n  /**\n   * Optional flag to determine whether to display labels.\n   * @defaultValue true\n   */\n  showLabels?: boolean;\n  /**\n   * Optional width for the labels if displayed.\n   * @defaultValue 'DEFAULT_LABELS_WIDTH' constant\n   */\n  labelsWidth?: number;\n  /**\n   * Draws a separator line below the bottom-most track. Used when the\n   * annotations area is not directly adjacent to the plot (e.g. an XY chart\n   * with a top axis) and the plot border cannot act as the separator.\n   * @defaultValue false\n   */\n  outerBottomLine?: boolean;\n  /**\n   * Internal rendering dimensions for normal or compact annotation layouts.\n   * @defaultValue 'DEFAULT_ANNOTATIONS_DIMENSIONS' constant\n   */\n  dimensions?: AnnotationsDimensions;\n  /**\n   * Optional flag to determine whether to display marker content.\n   * @defaultValue true\n   */\n  showMarkerContent?: boolean;\n}\n\n/**\n * The Annotations atomic component\n * @internal\n */\nexport const _AnnotationsAtom = function AnnotationsAtom(\n  props: PropsWithChildren<AnnotationsAtomProps>,\n) {\n  const {\n    width,\n    children,\n    showLabels = true,\n    labelsWidth = DEFAULT_LABELS_WIDTH,\n    outerBottomLine = false,\n    dimensions = DEFAULT_ANNOTATIONS_DIMENSIONS,\n    showMarkerContent = true,\n  } = props;\n\n  const trackWidth = width - labelsWidth;\n  const tracks = extractVisibleTracks(children);\n  const tracksQuantity = Children.count(tracks);\n  const totalTracksHeight = getAnnotationsTracksHeight(\n    tracksQuantity,\n    dimensions,\n  );\n\n  const {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  } = aggregateMarkersCoords(tracks, trackWidth, dimensions);\n\n  const labelsPerTrack = showLabels\n    ? computeLabelsPerTrack(tracks, labelsWidth)\n    : undefined;\n\n  const annotationsConfigValue = useMemo(\n    () => ({\n      showLabels,\n      labelsWidth,\n      trackWidth,\n      outerBottomLine,\n      dimensions,\n      showMarkerContent,\n    }),\n    [\n      showLabels,\n      labelsWidth,\n      trackWidth,\n      outerBottomLine,\n      dimensions,\n      showMarkerContent,\n    ],\n  );\n\n  return (\n    <div\n      className={wrapper}\n      style={{\n        height: totalTracksHeight,\n      }}\n    >\n      <AnnotationsConfigContext.Provider value={annotationsConfigValue}>\n        <MarkersByTrackContext.Provider value={tracksConfig}>\n          <MarkerCoordinatesContext.Provider value={markersPerTrack}>\n            <MarkerEventHandlersContext.Provider value={markerEventHandlers}>\n              <TrackEventHandlersContext.Provider value={trackEventHandlers}>\n                <CanvasSvgToImagesProvider icons={icons}>\n                  <AnnotationsOverlays\n                    height={totalTracksHeight - TRACK_SEPARATOR_STROKE_WIDTH}\n                    labelsPerTrack={labelsPerTrack}\n                  />\n                  <AnnotationsCanvasLayout\n                    width={width}\n                    height={totalTracksHeight}\n                  />\n                </CanvasSvgToImagesProvider>\n              </TrackEventHandlersContext.Provider>\n            </MarkerEventHandlersContext.Provider>\n          </MarkerCoordinatesContext.Provider>\n        </MarkersByTrackContext.Provider>\n      </AnnotationsConfigContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The Annotations atomic component\n * @internal\n **/\nexport const AnnotationsAtom = Object.assign(_AnnotationsAtom, {\n  TrackAtom,\n  MarkerAtom,\n});\n\n(\n  AnnotationsAtom as typeof AnnotationsAtom & { displayName: string }\n).displayName = 'AnnotationsAtom';\n"],
+  "mappings": "AAgIgB,SACE,KADF;AAhIhB,SAAiC,UAAU,eAAe;AAE1D,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AA0CpC,MAAM,mBAAmB,SAAS,gBACvC,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,aAAa,QAAQ;AAC3B,QAAM,SAAS,qBAAqB,QAAQ;AAC5C,QAAM,iBAAiB,SAAS,MAAM,MAAM;AAC5C,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,QAAQ,YAAY,UAAU;AAEzD,QAAM,iBAAiB,aACnB,sBAAsB,QAAQ,WAAW,IACzC;AAEJ,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,wBACxC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,iBACxC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,qBAC1C,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,oBACzC,+BAAC,6BAA0B,OACzB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,oBAAoB;AAAA,YAC5B;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,QAAQ;AAAA;AAAA,QACV;AAAA,SACF,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;AAMO,MAAMA,mBAAkB,OAAO,OAAO,kBAAkB;AAAA,EAC7D;AAAA,EACA;AACF,CAAC;AAGCA,iBACA,cAAc;",
+  "names": ["AnnotationsAtom"]
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-13-3";
+var wrapper = "_145zb630-3-14-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-13-3';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js

@@ -25,6 +25,8 @@ const AnnotationsRenderer = (props) => {
     textOverflow,
     truncateMode,
     outerBottomLine,
+    dimensions,
+    showMarkerContent = true,
     groupingDomain
   } = props;
   const overlay = useOverlay();
@@ -43,6 +45,8 @@ const AnnotationsRenderer = (props) => {
       labelsWidth: labelsOffset,
       showLabels,
       outerBottomLine,
+      dimensions,
+      showMarkerContent,
       children: groupedData.map((track, trackNumber) => {
         const hoveredKey = selection.pinnedGroup ? selection.hoverGroupListKey : void 0;
         const currentTrack = Array.from(track.markers.entries()).sort(
@@ -70,7 +74,7 @@ const AnnotationsRenderer = (props) => {
                   selection
                 );
                 const { x, width: width2 } = calculateMarkerDimension(marker, scale);
-                const markerContent = defineMarkerContent(markers);
+                const markerContent = showMarkerContent ? defineMarkerContent(markers) : void 0;
                 return /* @__PURE__ */ jsx(
                   MarkerAtom,
                   {

package/esm/charts/core/components/annotations/components/AnnotationsRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/components/AnnotationsRenderer.tsx"],
-  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useOverlay } from '../../overlay-tooltip/contexts/OverlayContext.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColors } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\nconst compareByHoverAwarePriority =\n  <T,>(isHovered: (item: T) => boolean, getPriority: (item: T) => number) =>\n  (a: T, b: T) => {\n    const priorityA = isHovered(a) ? Infinity : getPriority(a);\n    const priorityB = isHovered(b) ? Infinity : getPriority(b);\n    return priorityA - priorityB;\n  };\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  outerBottomLine?: boolean;\n  /**\n   * Optional explicit domain used for out-of-bounds filtering instead of\n   * `scale.domain()`. Pass this in integration contexts (e.g. TimeseriesChart)\n   * where the chart scale covers a wider range than the annotation markers.\n   * `scale` is always used for rendering positions and pixel-based\n   * visual-collision detection, regardless of whether this is provided.\n   */\n  groupingDomain?: Date[] | number[];\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n    outerBottomLine,\n    groupingDomain,\n  } = props;\n  const overlay = useOverlay();\n  const groupedData = useGroupedAnnotationsData(\n    tracks,\n    scale,\n    textOverflow,\n    groupingDomain,\n  );\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(overlay.overlayRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n      outerBottomLine={outerBottomLine}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const hoveredKey = selection.pinnedGroup\n          ? selection.hoverGroupListKey\n          : undefined;\n\n        const currentTrack = Array.from(track.markers.entries()).sort(\n          compareByHoverAwarePriority(\n            ([, group]) => group.some((g) => g.key === hoveredKey),\n            ([, group]) => Math.max(...group.map((g) => g.priority)),\n          ),\n        );\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return annotationsGroup\n                .toSorted(\n                  compareByHoverAwarePriority(\n                    (g) => hoveredKey === g.key,\n                    (g) => g.priority,\n                  ),\n                )\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const { color, symbolColor } = defineMarkerColors(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = defineMarkerContent(markers);\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      symbolColor={symbolColor}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
-  "mappings": "AA6HoB;AArHpB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AAEpC,MAAM,8BACJ,CAAK,WAAiC,gBACtC,CAAC,GAAM,MAAS;AACd,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,SAAO,YAAY;AACrB;AAyBK,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,WAAW;AAC3B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,QAAQ,UAAU;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,aAAa,UAAU,cACzB,UAAU,oBACV;AAEJ,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,UACvD;AAAA,YACE,CAAC,CAAC,EAAE,KAAK,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,UAAU;AAAA,YACrD,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,UACzD;AAAA,QACF;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,iBACJ;AAAA,gBACC;AAAA,kBACE,CAAC,MAAM,eAAe,EAAE;AAAA,kBACxB,CAAC,MAAM,EAAE;AAAA,gBACX;AAAA,cACF,EACC,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,EAAE,OAAO,YAAY,IAAI,mBAAmB,OAAO;AAEzD,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAAoB,OAAO;AAEjD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAhBK;AAAA,gBAiBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UA9CI;AAAA,QA+CP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
+  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useOverlay } from '../../overlay-tooltip/contexts/OverlayContext.js';\nimport { AnnotationsAtom } from '../AnnotationsAtom.js';\nimport type { AnnotationsDimensions } from '../constants.js';\nimport { useAnnotationsSelectionState } from '../hooks/store/selectors.js';\nimport { useGroupedAnnotationsData } from '../hooks/useGroupedAnnotationsData.js';\nimport { useMarkerEventHandlers } from '../hooks/useMarkerEventHandlers.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport type { AnnotationsTrackConfig } from '../types/annotations-track-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\nimport { calculateMarkerDimension } from '../utils/calculate-marker-dimension.js';\nimport { defineMarkerBrightnessState } from '../utils/define-marker-brightness-state.js';\nimport { defineMarkerColors } from '../utils/define-marker-color.js';\nimport { defineMarkerContent } from '../utils/define-marker-content.js';\n\nconst compareByHoverAwarePriority =\n  <T,>(isHovered: (item: T) => boolean, getPriority: (item: T) => number) =>\n  (a: T, b: T) => {\n    const priorityA = isHovered(a) ? Infinity : getPriority(a);\n    const priorityB = isHovered(b) ? Infinity : getPriority(b);\n    return priorityA - priorityB;\n  };\n\ntype AnnotationsRendererProps = {\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>;\n  width: number;\n  labelsOffset: number;\n  showLabels: boolean;\n  tracks: AnnotationsTrackConfig[];\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  outerBottomLine?: boolean;\n  dimensions?: AnnotationsDimensions;\n  showMarkerContent?: boolean;\n  /**\n   * Optional explicit domain used for out-of-bounds filtering instead of\n   * `scale.domain()`. Pass this in integration contexts (e.g. TimeseriesChart)\n   * where the chart scale covers a wider range than the annotation markers.\n   * `scale` is always used for rendering positions and pixel-based\n   * visual-collision detection, regardless of whether this is provided.\n   */\n  groupingDomain?: Date[] | number[];\n};\n\nexport const AnnotationsRenderer = (props: AnnotationsRendererProps) => {\n  const {\n    scale,\n    width,\n    labelsOffset,\n    showLabels,\n    tracks,\n    textOverflow,\n    truncateMode,\n    outerBottomLine,\n    dimensions,\n    showMarkerContent = true,\n    groupingDomain,\n  } = props;\n  const overlay = useOverlay();\n  const groupedData = useGroupedAnnotationsData(\n    tracks,\n    scale,\n    textOverflow,\n    groupingDomain,\n  );\n\n  const selection = useAnnotationsSelectionState();\n  const { handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =\n    useMarkerEventHandlers(overlay.overlayRef);\n\n  return (\n    <AnnotationsAtom\n      width={width}\n      labelsWidth={labelsOffset}\n      showLabels={showLabels}\n      outerBottomLine={outerBottomLine}\n      dimensions={dimensions}\n      showMarkerContent={showMarkerContent}\n    >\n      {groupedData.map((track, trackNumber) => {\n        const hoveredKey = selection.pinnedGroup\n          ? selection.hoverGroupListKey\n          : undefined;\n\n        const currentTrack = Array.from(track.markers.entries()).sort(\n          compareByHoverAwarePriority(\n            ([, group]) => group.some((g) => g.key === hoveredKey),\n            ([, group]) => Math.max(...group.map((g) => g.priority)),\n          ),\n        );\n\n        return (\n          <TrackAtom\n            label={track.label}\n            hidden={track.hidden}\n            key={trackNumber}\n          >\n            {currentTrack.map(([groupId, annotationsGroup]) => {\n              return annotationsGroup\n                .toSorted(\n                  compareByHoverAwarePriority(\n                    (g) => hoveredKey === g.key,\n                    (g) => g.priority,\n                  ),\n                )\n                .map(({ key: markerId, markers }) => {\n                  const [marker] = markers;\n\n                  const { color, symbolColor } = defineMarkerColors(markers);\n\n                  const state = defineMarkerBrightnessState(\n                    markerId,\n                    selection,\n                  );\n\n                  const { x, width } = calculateMarkerDimension(marker, scale);\n\n                  const markerContent = showMarkerContent\n                    ? defineMarkerContent(markers)\n                    : undefined;\n\n                  return (\n                    <MarkerAtom\n                      key={markerId}\n                      x={x}\n                      width={width}\n                      color={color}\n                      symbolColor={symbolColor}\n                      onMouseEnter={handleMouseEnter(\n                        markerId,\n                        groupId,\n                        annotationsGroup,\n                      )}\n                      onMouseMove={handleMouseMove}\n                      onMouseLeave={handleMouseLeave}\n                      onClick={handleClick(groupId, annotationsGroup)}\n                      content={markerContent}\n                      interactionState={state}\n                      textOverflow={textOverflow}\n                      truncateMode={truncateMode}\n                    />\n                  );\n                });\n            })}\n          </TrackAtom>\n        );\n      })}\n    </AnnotationsAtom>\n  );\n};\n\n(\n  AnnotationsRenderer as typeof AnnotationsRenderer & {\n    displayName: string;\n  }\n).displayName = 'AnnotationsContent';\n"],
+  "mappings": "AAsIoB;AA9HpB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAEhC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AAEpC,MAAM,8BACJ,CAAK,WAAiC,gBACtC,CAAC,GAAM,MAAS;AACd,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,QAAM,YAAY,UAAU,CAAC,IAAI,WAAW,YAAY,CAAC;AACzD,SAAO,YAAY;AACrB;AA2BK,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,WAAW;AAC3B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,6BAA6B;AAC/C,QAAM,EAAE,kBAAkB,iBAAiB,kBAAkB,YAAY,IACvE,uBAAuB,QAAQ,UAAU;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,sBAAY,IAAI,CAAC,OAAO,gBAAgB;AACvC,cAAM,aAAa,UAAU,cACzB,UAAU,oBACV;AAEJ,cAAM,eAAe,MAAM,KAAK,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,UACvD;AAAA,YACE,CAAC,CAAC,EAAE,KAAK,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,UAAU;AAAA,YACrD,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,UACzD;AAAA,QACF;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,QAAQ,MAAM;AAAA,YAGb,uBAAa,IAAI,CAAC,CAAC,SAAS,gBAAgB,MAAM;AACjD,qBAAO,iBACJ;AAAA,gBACC;AAAA,kBACE,CAAC,MAAM,eAAe,EAAE;AAAA,kBACxB,CAAC,MAAM,EAAE;AAAA,gBACX;AAAA,cACF,EACC,IAAI,CAAC,EAAE,KAAK,UAAU,QAAQ,MAAM;AACnC,sBAAM,CAAC,MAAM,IAAI;AAEjB,sBAAM,EAAE,OAAO,YAAY,IAAI,mBAAmB,OAAO;AAEzD,sBAAM,QAAQ;AAAA,kBACZ;AAAA,kBACA;AAAA,gBACF;AAEA,sBAAM,EAAE,GAAG,OAAAA,OAAM,IAAI,yBAAyB,QAAQ,KAAK;AAE3D,sBAAM,gBAAgB,oBAClB,oBAAoB,OAAO,IAC3B;AAEJ,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC;AAAA,oBACA,OAAOA;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA,cAAc;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBACA,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,SAAS,YAAY,SAAS,gBAAgB;AAAA,oBAC9C,SAAS;AAAA,oBACT,kBAAkB;AAAA,oBAClB;AAAA,oBACA;AAAA;AAAA,kBAhBK;AAAA,gBAiBP;AAAA,cAEJ,CAAC;AAAA,YACL,CAAC;AAAA;AAAA,UAhDI;AAAA,QAiDP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAGE,oBAGA,cAAc;",
   "names": ["width"]
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-13-3 {
+._1yc349j0-3-14-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-13-3";
+var canvasContainer = "_1yc349j0-3-14-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-13-3';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.js

@@ -6,9 +6,7 @@ import { RectClipPathCanvas } from "../../../../canvas/components/RectClipPathCa
 import {
   MARKER_STROKE_COLOR,
   MARKER_STROKE_WIDTH,
-  MINIMUM_MARKER_WIDTH,
-  PILL_MARKER_HEIGHT,
-  TRACK_HEIGHT
+  MINIMUM_MARKER_WIDTH
 } from "../../../constants.js";
 import { AnnotationsConfigContext } from "../../../contexts/AnnotationsConfig.context.js";
 import { cropMarker } from "../../../utils/crop-marker.js";
@@ -28,7 +26,9 @@ const AnnotationsMarkersDisplay = ({
   markers
 }) => {
   const theme = useCurrentTheme();
-  const { trackWidth } = useContext(AnnotationsConfigContext);
+  const { trackWidth, dimensions, showMarkerContent } = useContext(
+    AnnotationsConfigContext
+  );
   const { offsetX, trackIndex } = useTrackDisplay();
   return markers.map((props, markerKey) => {
     const {
@@ -46,9 +46,10 @@ const AnnotationsMarkersDisplay = ({
     if (outOfBounds) {
       return null;
     }
-    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : VALUE_MARKER_WIDTH;
+    const valueMarkerWidth = dimensions.markerStrokeInside ? VALUE_MARKER_WIDTH - MARKER_STROKE_WIDTH * 2 : VALUE_MARKER_WIDTH;
+    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : valueMarkerWidth;
     const width = Math.max(widthProp, markerMinWidth);
-    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex);
+    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex, dimensions);
     const brightness = getMarkerBrightnessPercentageBasedOnState(
       theme,
       interactionState
@@ -74,13 +75,16 @@ const AnnotationsMarkersDisplay = ({
       x: calculatedX,
       y: markerOffsetByTrack,
       width: calculatedMarkerWidth,
-      height: PILL_MARKER_HEIGHT,
+      height: dimensions.pillMarkerHeight,
       fillColor: getTokenComputedStyle(color),
       strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),
       opacity,
       brightness,
       symbolColor: symbolColor ? getTokenComputedStyle(symbolColor) : void 0,
-      children: sanitizedContent
+      bodyHeight: dimensions.valueMarkerBodyHeight,
+      triangleHeight: dimensions.valueMarkerTriangleHeight,
+      strokeInside: dimensions.markerStrokeInside,
+      children: showMarkerContent ? sanitizedContent : ""
     };
     return isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -90,7 +94,7 @@ const AnnotationsMarkersDisplay = ({
             x: offsetX - MARKER_STROKE_WIDTH * devicePixelRatio,
             y: markerOffsetByTrack - MARKER_STROKE_WIDTH * devicePixelRatio
           },
-          height: TRACK_HEIGHT,
+          height: dimensions.trackHeight,
           width: trackWidth + 2 * MARKER_STROKE_WIDTH * devicePixelRatio
         }
       ),

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/displays/AnnotationsMarkersDisplay.tsx"],
-  "sourcesContent": ["import { Fragment, type PropsWithChildren, useContext } from 'react';\n\nimport { useCurrentTheme } from '../../../../../../../core/hooks/useCurrentTheme.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { RectClipPathCanvas } from '../../../../canvas/components/RectClipPathCanvas.js';\nimport {\n  MARKER_STROKE_COLOR,\n  MARKER_STROKE_WIDTH,\n  MINIMUM_MARKER_WIDTH,\n  PILL_MARKER_HEIGHT,\n  TRACK_HEIGHT,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { type MarkerAtomProps } from '../../../types/marker.js';\nimport { cropMarker } from '../../../utils/crop-marker.js';\nimport { getMarkerOffsetByTrack } from '../../../utils/get-markers-offset-by-track.js';\nimport { useTrackDisplay } from '../hooks/use-track-display.js';\nimport { CanvasContextRestore } from '../renderers/CanvasContextRestore.js';\nimport { RangeMarkerRenderer } from '../renderers/RangeMarkerRenderer.js';\nimport { VALUE_MARKER_WIDTH } from '../renderers/value-marker-renderer/constants.js';\nimport {\n  ValueMarkerRenderer,\n  ValueMarkerRendererProps,\n} from '../renderers/value-marker-renderer/ValueMarkerRenderer.js';\nimport { calculateMarkerWidthAndContent } from '../utils/calculate-marker-width-and-content.js';\nimport { getMarkerBrightnessPercentageBasedOnState } from '../utils/get-marker-brightness-percentage-based-on-state.js';\n\nconst MARKER_DEFAULT_OPACITY = 0.85;\nconst MARKER_HOVER_OPACITY = 0.2;\n\nexport const AnnotationsMarkersDisplay = ({\n  markers,\n}: {\n  markers: MarkerAtomProps[];\n}) => {\n  const theme = useCurrentTheme();\n  const { trackWidth } = useContext(AnnotationsConfigContext);\n  const { offsetX, trackIndex } = useTrackDisplay();\n\n  return markers.map((props, markerKey) => {\n    const {\n      color,\n      content,\n      interactionState = 'default',\n      width: widthProp,\n      x,\n      textOverflow,\n      truncateMode,\n      symbolColor,\n    } = props;\n    const isRange = widthProp > 0;\n    const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;\n\n    if (outOfBounds) {\n      return null;\n    }\n\n    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : VALUE_MARKER_WIDTH;\n    const width = Math.max(widthProp, markerMinWidth);\n\n    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex);\n\n    const brightness = getMarkerBrightnessPercentageBasedOnState(\n      theme,\n      interactionState,\n    );\n\n    const opacity =\n      interactionState === 'inactive'\n        ? MARKER_HOVER_OPACITY\n        : MARKER_DEFAULT_OPACITY;\n\n    const { croppedX, croppedWidth } = cropMarker(x, width, trackWidth);\n\n    const {\n      sanitizedContent,\n      calculatedMarkerWidth,\n      valueMarkerOrientation,\n      calculatedX,\n    } = calculateMarkerWidthAndContent({\n      trackWidth,\n      trackLeftBoundary: offsetX,\n      content,\n      width: croppedWidth,\n      x: croppedX,\n      isRange,\n      textOverflow,\n      truncateMode,\n    });\n\n    const markerProps: PropsWithChildren<ValueMarkerRendererProps> = {\n      x: calculatedX,\n      y: markerOffsetByTrack,\n      width: calculatedMarkerWidth,\n      height: PILL_MARKER_HEIGHT,\n      fillColor: getTokenComputedStyle(color),\n      strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),\n      opacity: opacity,\n      brightness: brightness,\n      symbolColor: symbolColor ? getTokenComputedStyle(symbolColor) : undefined,\n      children: sanitizedContent,\n    };\n\n    return isRange ? (\n      <Fragment key={`${markerKey}_${x}`}>\n        <RectClipPathCanvas\n          position={{\n            x: offsetX - MARKER_STROKE_WIDTH * devicePixelRatio,\n            y: markerOffsetByTrack - MARKER_STROKE_WIDTH * devicePixelRatio,\n          }}\n          height={TRACK_HEIGHT}\n          width={trackWidth + 2 * MARKER_STROKE_WIDTH * devicePixelRatio}\n        />\n        <RangeMarkerRenderer {...markerProps} />\n        <CanvasContextRestore />\n      </Fragment>\n    ) : (\n      <Fragment key={`${markerKey}_${x}`}>\n        <ValueMarkerRenderer\n          {...markerProps}\n          orientation={valueMarkerOrientation}\n        />\n      </Fragment>\n    );\n  });\n};\n\nAnnotationsMarkersDisplay['displayName'] = 'AnnotationsMarkersDisplay';\n"],
-  "mappings": "AAwGM,SACE,KADF;AAxGN,SAAS,UAAkC,kBAAkB;AAE7D,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sCAAsC;AAC/C,SAAS,iDAAiD;AAE1D,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAEtB,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,MAEM;AACJ,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,EAAE,WAAW,IAAI,WAAW,wBAAwB;AAC1D,QAAM,EAAE,SAAS,WAAW,IAAI,gBAAgB;AAEhD,SAAO,QAAQ,IAAI,CAAC,OAAO,cAAc;AACvC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,UAAU,YAAY;AAC5B,UAAM,cAAc,UAAU,IAAI,aAAa,IAAI,IAAI,KAAK,IAAI;AAEhE,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,UAAU,uBAAuB;AACxD,UAAM,QAAQ,KAAK,IAAI,WAAW,cAAc;AAEhD,UAAM,sBAAsB,uBAAuB,UAAU;AAE7D,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,UACJ,qBAAqB,aACjB,uBACA;AAEN,UAAM,EAAE,UAAU,aAAa,IAAI,WAAW,GAAG,OAAO,UAAU;AAElE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,+BAA+B;AAAA,MACjC;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAA2D;AAAA,MAC/D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,sBAAsB,KAAK;AAAA,MACtC,aAAa,sBAAsB,mBAAmB;AAAA,MACtD;AAAA,MACA;AAAA,MACA,aAAa,cAAc,sBAAsB,WAAW,IAAI;AAAA,MAChE,UAAU;AAAA,IACZ;AAEA,WAAO,UACL,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,YACR,GAAG,UAAU,sBAAsB;AAAA,YACnC,GAAG,sBAAsB,sBAAsB;AAAA,UACjD;AAAA,UACA,QAAQ;AAAA,UACR,OAAO,aAAa,IAAI,sBAAsB;AAAA;AAAA,MAChD;AAAA,MACA,oBAAC,uBAAqB,GAAG,aAAa;AAAA,MACtC,oBAAC,wBAAqB;AAAA,SAVT,GAAG,SAAS,IAAI,CAAC,EAWhC,IAEA,oBAAC,YACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,aAAa;AAAA;AAAA,IACf,KAJa,GAAG,SAAS,IAAI,CAAC,EAKhC;AAAA,EAEJ,CAAC;AACH;AAEA,0BAA0B,aAAa,IAAI;",
+  "sourcesContent": ["import { Fragment, type PropsWithChildren, useContext } from 'react';\n\nimport { useCurrentTheme } from '../../../../../../../core/hooks/useCurrentTheme.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport { RectClipPathCanvas } from '../../../../canvas/components/RectClipPathCanvas.js';\nimport {\n  MARKER_STROKE_COLOR,\n  MARKER_STROKE_WIDTH,\n  MINIMUM_MARKER_WIDTH,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { type MarkerAtomProps } from '../../../types/marker.js';\nimport { cropMarker } from '../../../utils/crop-marker.js';\nimport { getMarkerOffsetByTrack } from '../../../utils/get-markers-offset-by-track.js';\nimport { useTrackDisplay } from '../hooks/use-track-display.js';\nimport { CanvasContextRestore } from '../renderers/CanvasContextRestore.js';\nimport { RangeMarkerRenderer } from '../renderers/RangeMarkerRenderer.js';\nimport { VALUE_MARKER_WIDTH } from '../renderers/value-marker-renderer/constants.js';\nimport {\n  ValueMarkerRenderer,\n  ValueMarkerRendererProps,\n} from '../renderers/value-marker-renderer/ValueMarkerRenderer.js';\nimport { calculateMarkerWidthAndContent } from '../utils/calculate-marker-width-and-content.js';\nimport { getMarkerBrightnessPercentageBasedOnState } from '../utils/get-marker-brightness-percentage-based-on-state.js';\n\nconst MARKER_DEFAULT_OPACITY = 0.85;\nconst MARKER_HOVER_OPACITY = 0.2;\n\nexport const AnnotationsMarkersDisplay = ({\n  markers,\n}: {\n  markers: MarkerAtomProps[];\n}) => {\n  const theme = useCurrentTheme();\n  const { trackWidth, dimensions, showMarkerContent } = useContext(\n    AnnotationsConfigContext,\n  );\n  const { offsetX, trackIndex } = useTrackDisplay();\n\n  return markers.map((props, markerKey) => {\n    const {\n      color,\n      content,\n      interactionState = 'default',\n      width: widthProp,\n      x,\n      textOverflow,\n      truncateMode,\n      symbolColor,\n    } = props;\n    const isRange = widthProp > 0;\n    const outOfBounds = isRange ? x + widthProp <= 0 : x < 0 || x > trackWidth;\n\n    if (outOfBounds) {\n      return null;\n    }\n\n    const valueMarkerWidth = dimensions.markerStrokeInside\n      ? VALUE_MARKER_WIDTH - MARKER_STROKE_WIDTH * 2\n      : VALUE_MARKER_WIDTH;\n    const markerMinWidth = isRange ? MINIMUM_MARKER_WIDTH : valueMarkerWidth;\n    const width = Math.max(widthProp, markerMinWidth);\n\n    const markerOffsetByTrack = getMarkerOffsetByTrack(trackIndex, dimensions);\n\n    const brightness = getMarkerBrightnessPercentageBasedOnState(\n      theme,\n      interactionState,\n    );\n\n    const opacity =\n      interactionState === 'inactive'\n        ? MARKER_HOVER_OPACITY\n        : MARKER_DEFAULT_OPACITY;\n\n    const { croppedX, croppedWidth } = cropMarker(x, width, trackWidth);\n\n    const {\n      sanitizedContent,\n      calculatedMarkerWidth,\n      valueMarkerOrientation,\n      calculatedX,\n    } = calculateMarkerWidthAndContent({\n      trackWidth,\n      trackLeftBoundary: offsetX,\n      content,\n      width: croppedWidth,\n      x: croppedX,\n      isRange,\n      textOverflow,\n      truncateMode,\n    });\n\n    const markerProps: PropsWithChildren<ValueMarkerRendererProps> = {\n      x: calculatedX,\n      y: markerOffsetByTrack,\n      width: calculatedMarkerWidth,\n      height: dimensions.pillMarkerHeight,\n      fillColor: getTokenComputedStyle(color),\n      strokeColor: getTokenComputedStyle(MARKER_STROKE_COLOR),\n      opacity: opacity,\n      brightness: brightness,\n      symbolColor: symbolColor ? getTokenComputedStyle(symbolColor) : undefined,\n      bodyHeight: dimensions.valueMarkerBodyHeight,\n      triangleHeight: dimensions.valueMarkerTriangleHeight,\n      strokeInside: dimensions.markerStrokeInside,\n      children: showMarkerContent ? sanitizedContent : '',\n    };\n\n    return isRange ? (\n      <Fragment key={`${markerKey}_${x}`}>\n        <RectClipPathCanvas\n          position={{\n            x: offsetX - MARKER_STROKE_WIDTH * devicePixelRatio,\n            y: markerOffsetByTrack - MARKER_STROKE_WIDTH * devicePixelRatio,\n          }}\n          height={dimensions.trackHeight}\n          width={trackWidth + 2 * MARKER_STROKE_WIDTH * devicePixelRatio}\n        />\n        <RangeMarkerRenderer {...markerProps} />\n        <CanvasContextRestore />\n      </Fragment>\n    ) : (\n      <Fragment key={`${markerKey}_${x}`}>\n        <ValueMarkerRenderer\n          {...markerProps}\n          orientation={valueMarkerOrientation}\n        />\n      </Fragment>\n    );\n  });\n};\n\nAnnotationsMarkersDisplay['displayName'] = 'AnnotationsMarkersDisplay';\n"],
+  "mappings": "AA8GM,SACE,KADF;AA9GN,SAAS,UAAkC,kBAAkB;AAE7D,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sCAAsC;AAC/C,SAAS,iDAAiD;AAE1D,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAEtB,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,MAEM;AACJ,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,EAAE,YAAY,YAAY,kBAAkB,IAAI;AAAA,IACpD;AAAA,EACF;AACA,QAAM,EAAE,SAAS,WAAW,IAAI,gBAAgB;AAEhD,SAAO,QAAQ,IAAI,CAAC,OAAO,cAAc;AACvC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,UAAU,YAAY;AAC5B,UAAM,cAAc,UAAU,IAAI,aAAa,IAAI,IAAI,KAAK,IAAI;AAEhE,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAEA,UAAM,mBAAmB,WAAW,qBAChC,qBAAqB,sBAAsB,IAC3C;AACJ,UAAM,iBAAiB,UAAU,uBAAuB;AACxD,UAAM,QAAQ,KAAK,IAAI,WAAW,cAAc;AAEhD,UAAM,sBAAsB,uBAAuB,YAAY,UAAU;AAEzE,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,UACJ,qBAAqB,aACjB,uBACA;AAEN,UAAM,EAAE,UAAU,aAAa,IAAI,WAAW,GAAG,OAAO,UAAU;AAElE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,+BAA+B;AAAA,MACjC;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAA2D;AAAA,MAC/D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ,WAAW;AAAA,MACnB,WAAW,sBAAsB,KAAK;AAAA,MACtC,aAAa,sBAAsB,mBAAmB;AAAA,MACtD;AAAA,MACA;AAAA,MACA,aAAa,cAAc,sBAAsB,WAAW,IAAI;AAAA,MAChE,YAAY,WAAW;AAAA,MACvB,gBAAgB,WAAW;AAAA,MAC3B,cAAc,WAAW;AAAA,MACzB,UAAU,oBAAoB,mBAAmB;AAAA,IACnD;AAEA,WAAO,UACL,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,YACR,GAAG,UAAU,sBAAsB;AAAA,YACnC,GAAG,sBAAsB,sBAAsB;AAAA,UACjD;AAAA,UACA,QAAQ,WAAW;AAAA,UACnB,OAAO,aAAa,IAAI,sBAAsB;AAAA;AAAA,MAChD;AAAA,MACA,oBAAC,uBAAqB,GAAG,aAAa;AAAA,MACtC,oBAAC,wBAAqB;AAAA,SAVT,GAAG,SAAS,IAAI,CAAC,EAWhC,IAEA,oBAAC,YACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,aAAa;AAAA;AAAA,IACf,KAJa,GAAG,SAAS,IAAI,CAAC,EAKhC;AAAA,EAEJ,CAAC;AACH;AAEA,0BAA0B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.js

@@ -12,7 +12,7 @@ import { getTrackSeparatorOffset } from "../../../utils/get-track-separator-offs
 import { TrackDisplayContext } from "../context/track-display.context.js";
 import { AnnotationsLabelRenderer } from "../renderers/AnnotationsLabelRenderer.js";
 import { AnnotationsLineRenderer } from "../renderers/AnnotationsLineRenderer.js";
-const getLabelYPosition = (index) => getTrackSeparatorOffset(index) + LABEL_OFFSET;
+const getLabelYPosition = (index, dimensions) => getTrackSeparatorOffset(index, dimensions) + LABEL_OFFSET;
 const AnnotationsTrackDisplay = (props) => {
   const {
     drawTopLine,
@@ -21,12 +21,12 @@ const AnnotationsTrackDisplay = (props) => {
     markers,
     trackIndex
   } = props;
-  const { labelsWidth, trackWidth, showLabels } = useContext(
+  const { labelsWidth, trackWidth, showLabels, dimensions } = useContext(
     AnnotationsConfigContext
   );
   const trackFinalXPosition = labelsWidth + trackWidth;
-  const topLineY = getTrackSeparatorOffset(trackIndex);
-  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1);
+  const topLineY = getTrackSeparatorOffset(trackIndex, dimensions);
+  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1, dimensions);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     drawTopLine && /* @__PURE__ */ jsx(
       AnnotationsLineRenderer,
@@ -42,7 +42,7 @@ const AnnotationsTrackDisplay = (props) => {
         {
           text: label,
           x: labelsWidth - MARKER_LABEL_PADDING,
-          y: getLabelYPosition(trackIndex),
+          y: getLabelYPosition(trackIndex, dimensions),
           maxWidth: labelsWidth - MARKER_LABEL_PADDING,
           ellipsis: true
         }

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.tsx"],
-  "sourcesContent": ["import { Fragment, useContext } from 'react';\n\nimport { AnnotationsMarkersDisplay } from './AnnotationsMarkersDisplay.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport {\n  LABEL_OFFSET,\n  MARKER_LABEL_PADDING,\n  TRACK_SEPARATOR_COLOR,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { MarkerAtomProps } from '../../../types/marker.js';\nimport { TrackAtomProps } from '../../../types/track.js';\nimport { getTrackSeparatorOffset } from '../../../utils/get-track-separator-offset.js';\nimport { TrackDisplayContext } from '../context/track-display.context.js';\nimport { AnnotationsLabelRenderer } from '../renderers/AnnotationsLabelRenderer.js';\nimport { AnnotationsLineRenderer } from '../renderers/AnnotationsLineRenderer.js';\n\ninterface AnnotationsTrackDisplayProps extends TrackAtomProps {\n  trackIndex: number;\n  drawTopLine?: boolean;\n  drawBottomLine?: boolean;\n  markers: MarkerAtomProps[];\n}\n\nconst getLabelYPosition = (index: number) =>\n  getTrackSeparatorOffset(index) + LABEL_OFFSET;\n\nexport const AnnotationsTrackDisplay = (\n  props: AnnotationsTrackDisplayProps,\n) => {\n  const {\n    drawTopLine,\n    drawBottomLine = true,\n    label,\n    markers,\n    trackIndex,\n  } = props;\n  const { labelsWidth, trackWidth, showLabels } = useContext(\n    AnnotationsConfigContext,\n  );\n\n  const trackFinalXPosition = labelsWidth + trackWidth;\n  const topLineY = getTrackSeparatorOffset(trackIndex);\n  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1);\n\n  return (\n    <>\n      {drawTopLine && (\n        <AnnotationsLineRenderer\n          source={{ x: labelsWidth, y: topLineY }}\n          destination={{ x: trackFinalXPosition, y: topLineY }}\n          strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n        />\n      )}\n\n      <Fragment>\n        {showLabels && label && (\n          <AnnotationsLabelRenderer\n            text={label}\n            x={labelsWidth - MARKER_LABEL_PADDING}\n            y={getLabelYPosition(trackIndex)}\n            maxWidth={labelsWidth - MARKER_LABEL_PADDING}\n            ellipsis\n          />\n        )}\n        <TrackDisplayContext.Provider\n          value={{\n            offsetX: labelsWidth,\n            trackIndex,\n          }}\n        >\n          <AnnotationsMarkersDisplay markers={markers} />\n        </TrackDisplayContext.Provider>\n        {drawBottomLine && (\n          <AnnotationsLineRenderer\n            source={{ x: labelsWidth, y: bottomLineY }}\n            destination={{\n              x: trackFinalXPosition,\n              y: bottomLineY,\n            }}\n            strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n          />\n        )}\n      </Fragment>\n    </>\n  );\n};\n\nAnnotationsTrackDisplay['displayName'] = 'AnnotationsTrackDisplay';\n"],
-  "mappings": "AA8CI,mBAEI,KAOF,YATF;AA9CJ,SAAS,YAAAA,WAAU,kBAAkB;AAErC,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAGzC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AASxC,MAAM,oBAAoB,CAAC,UACzB,wBAAwB,KAAK,IAAI;AAE5B,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,aAAa,YAAY,WAAW,IAAI;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,sBAAsB,cAAc;AAC1C,QAAM,WAAW,wBAAwB,UAAU;AACnD,QAAM,cAAc,wBAAwB,aAAa,CAAC;AAE1D,SACE,iCACG;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,GAAG,aAAa,GAAG,SAAS;AAAA,QACtC,aAAa,EAAE,GAAG,qBAAqB,GAAG,SAAS;AAAA,QACnD,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,IAC1D;AAAA,IAGF,qBAACA,WAAA,EACE;AAAA,oBAAc,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,GAAG,cAAc;AAAA,UACjB,GAAG,kBAAkB,UAAU;AAAA,UAC/B,UAAU,cAAc;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MAEF;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT;AAAA,UACF;AAAA,UAEA,8BAAC,6BAA0B,SAAkB;AAAA;AAAA,MAC/C;AAAA,MACC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,EAAE,GAAG,aAAa,GAAG,YAAY;AAAA,UACzC,aAAa;AAAA,YACX,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,MAC1D;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { Fragment, useContext } from 'react';\n\nimport { AnnotationsMarkersDisplay } from './AnnotationsMarkersDisplay.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport {\n  type AnnotationsDimensions,\n  LABEL_OFFSET,\n  MARKER_LABEL_PADDING,\n  TRACK_SEPARATOR_COLOR,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { MarkerAtomProps } from '../../../types/marker.js';\nimport { TrackAtomProps } from '../../../types/track.js';\nimport { getTrackSeparatorOffset } from '../../../utils/get-track-separator-offset.js';\nimport { TrackDisplayContext } from '../context/track-display.context.js';\nimport { AnnotationsLabelRenderer } from '../renderers/AnnotationsLabelRenderer.js';\nimport { AnnotationsLineRenderer } from '../renderers/AnnotationsLineRenderer.js';\n\ninterface AnnotationsTrackDisplayProps extends TrackAtomProps {\n  trackIndex: number;\n  drawTopLine?: boolean;\n  drawBottomLine?: boolean;\n  markers: MarkerAtomProps[];\n}\n\nconst getLabelYPosition = (index: number, dimensions: AnnotationsDimensions) =>\n  getTrackSeparatorOffset(index, dimensions) + LABEL_OFFSET;\n\nexport const AnnotationsTrackDisplay = (\n  props: AnnotationsTrackDisplayProps,\n) => {\n  const {\n    drawTopLine,\n    drawBottomLine = true,\n    label,\n    markers,\n    trackIndex,\n  } = props;\n  const { labelsWidth, trackWidth, showLabels, dimensions } = useContext(\n    AnnotationsConfigContext,\n  );\n\n  const trackFinalXPosition = labelsWidth + trackWidth;\n  const topLineY = getTrackSeparatorOffset(trackIndex, dimensions);\n  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1, dimensions);\n\n  return (\n    <>\n      {drawTopLine && (\n        <AnnotationsLineRenderer\n          source={{ x: labelsWidth, y: topLineY }}\n          destination={{ x: trackFinalXPosition, y: topLineY }}\n          strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n        />\n      )}\n\n      <Fragment>\n        {showLabels && label && (\n          <AnnotationsLabelRenderer\n            text={label}\n            x={labelsWidth - MARKER_LABEL_PADDING}\n            y={getLabelYPosition(trackIndex, dimensions)}\n            maxWidth={labelsWidth - MARKER_LABEL_PADDING}\n            ellipsis\n          />\n        )}\n        <TrackDisplayContext.Provider\n          value={{\n            offsetX: labelsWidth,\n            trackIndex,\n          }}\n        >\n          <AnnotationsMarkersDisplay markers={markers} />\n        </TrackDisplayContext.Provider>\n        {drawBottomLine && (\n          <AnnotationsLineRenderer\n            source={{ x: labelsWidth, y: bottomLineY }}\n            destination={{\n              x: trackFinalXPosition,\n              y: bottomLineY,\n            }}\n            strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n          />\n        )}\n      </Fragment>\n    </>\n  );\n};\n\nAnnotationsTrackDisplay['displayName'] = 'AnnotationsTrackDisplay';\n"],
+  "mappings": "AA+CI,mBAEI,KAOF,YATF;AA/CJ,SAAS,YAAAA,WAAU,kBAAkB;AAErC,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAGzC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AASxC,MAAM,oBAAoB,CAAC,OAAe,eACxC,wBAAwB,OAAO,UAAU,IAAI;AAExC,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,aAAa,YAAY,YAAY,WAAW,IAAI;AAAA,IAC1D;AAAA,EACF;AAEA,QAAM,sBAAsB,cAAc;AAC1C,QAAM,WAAW,wBAAwB,YAAY,UAAU;AAC/D,QAAM,cAAc,wBAAwB,aAAa,GAAG,UAAU;AAEtE,SACE,iCACG;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,GAAG,aAAa,GAAG,SAAS;AAAA,QACtC,aAAa,EAAE,GAAG,qBAAqB,GAAG,SAAS;AAAA,QACnD,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,IAC1D;AAAA,IAGF,qBAACA,WAAA,EACE;AAAA,oBAAc,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,GAAG,cAAc;AAAA,UACjB,GAAG,kBAAkB,YAAY,UAAU;AAAA,UAC3C,UAAU,cAAc;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MAEF;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT;AAAA,UACF;AAAA,UAEA,8BAAC,6BAA0B,SAAkB;AAAA;AAAA,MAC/C;AAAA,MACC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,EAAE,GAAG,aAAa,GAAG,YAAY;AAAA,UACzC,aAAa;AAAA,YACX,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,MAC1D;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
   "names": ["Fragment"]
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js

@@ -25,16 +25,18 @@ const RangeMarkerRenderer = (props) => {
     opacity = MARKER_OPACITY,
     brightness,
     strokeColor,
-    symbolColor
+    symbolColor,
+    strokeInside = false
   } = props;
   const iconImages = useAnnotationsIconImages();
   const draw = useCallback(
     (ctx) => {
       ctx.beginPath();
+      const strokeOffset = strokeInside ? MARKER_STROKE_WIDTH / 2 : 0;
       const rectX = x;
-      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;
+      const rectY = y + strokeOffset - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;
       const rectWidth = width;
-      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;
+      const rectHeight = strokeInside ? height - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET * 2 : height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;
       drawRoundRect(
         ctx,
         rectX,
@@ -74,7 +76,8 @@ const RangeMarkerRenderer = (props) => {
       strokeColor,
       children,
       iconImages,
-      symbolColor
+      symbolColor,
+      strokeInside
     ]
   );
   useCanvas("annotations-range-marker", draw);

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.tsx"],
-  "sourcesContent": ["import { isValidElement, type PropsWithChildren, useCallback } from 'react';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n    symbolColor,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const rectX = x;\n      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isValidElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
-  "mappings": "AAAA,SAAS,gBAAwC,mBAAmB;AAEpE,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,QAAQ;AACd,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,YAAY;AAClB,YAAM,aAAa,SAAS,sBAAsB,IAAI;AAEtD;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,eAAe,QAAQ,GAAG;AAC5B,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { isValidElement, type PropsWithChildren, useCallback } from 'react';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n    symbolColor,\n    strokeInside = false,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const strokeOffset = strokeInside ? MARKER_STROKE_WIDTH / 2 : 0;\n      const rectX = x;\n      const rectY =\n        y + strokeOffset - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = strokeInside\n        ? height - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET * 2\n        : height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isValidElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n      symbolColor,\n      strokeInside,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
+  "mappings": "AAAA,SAAS,gBAAwC,mBAAmB;AAEpE,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,eAAe,eAAe,sBAAsB,IAAI;AAC9D,YAAM,QAAQ;AACd,YAAM,QACJ,IAAI,eAAe,sBAAsB;AAC3C,YAAM,YAAY;AAClB,YAAM,aAAa,eACf,SAAS,sBAAsB,sBAAsB,IACrD,SAAS,sBAAsB,IAAI;AAEvC;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,eAAe,QAAQ,GAAG;AAC5B,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js

@@ -2,7 +2,11 @@ import {
   isValidElement,
   useCallback
 } from "react";
-import { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from "./constants.js";
+import {
+  CONTENT_OFFSET_Y,
+  DEFAULT_VALUE_MARKER_GEOMETRY,
+  VALUE_MARKER_WIDTH
+} from "./constants.js";
 import { calculateCenteredIcon } from "./utils/calculate-centered-icon.js";
 import { calculateCenteredText } from "./utils/calculate-centered-text.js";
 import { getMarkerGeometry } from "./utils/get-marker-geometry.js";
@@ -45,23 +49,41 @@ const ValueMarkerRenderer = (props) => {
     brightness,
     width: widthProp,
     orientation = "center",
-    symbolColor
+    symbolColor,
+    bodyHeight = DEFAULT_VALUE_MARKER_GEOMETRY.bodyHeight,
+    triangleHeight = DEFAULT_VALUE_MARKER_GEOMETRY.triangleHeight,
+    strokeInside = DEFAULT_VALUE_MARKER_GEOMETRY.strokeInside
   } = props;
-  const width = Math.max(widthProp, VALUE_MARKER_WIDTH);
+  const dimensions = {
+    bodyHeight,
+    triangleHeight,
+    strokeInside
+  };
+  const yOffset = strokeInside ? -MARKER_STROKE_WIDTH / 2 : MARKER_STROKE_WIDTH;
+  const minWidth = strokeInside ? VALUE_MARKER_WIDTH - MARKER_STROKE_WIDTH * 2 : VALUE_MARKER_WIDTH;
+  const width = Math.max(widthProp, minWidth);
   const geometry = getMarkerGeometry(
     orientation,
     x,
-    y - MARKER_STROKE_WIDTH,
-    isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width
+    y - yOffset,
+    isEmojiSymbol(children) ? minWidth : width,
+    dimensions
   );
   const iconImages = useAnnotationsIconImages();
   const draw = useCallback(
     (ctx) => {
       ctx.beginPath();
-      ctx.moveTo(geometry[0].x, geometry[0].y);
+      const [initialGeometry] = geometry;
+      if (!initialGeometry) {
+        return false;
+      }
+      ctx.moveTo(initialGeometry.x, initialGeometry.y);
       for (let i = 0; i < geometry.length; i += 2) {
         const vertex = geometry[i];
         const lineBisect = geometry[i + 1];
+        if (!vertex || !lineBisect) {
+          return false;
+        }
         ctx.arcTo(
           vertex.x - CANVAS_PIXEL_OFFSET,
           vertex.y - CANVAS_PIXEL_OFFSET,
@@ -82,7 +104,7 @@ const ValueMarkerRenderer = (props) => {
           ctx,
           children,
           x + retinaOffset,
-          isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,
+          isEmojiSymbol(children) ? minWidth : width,
           orientation,
           y,
           fillColor,
@@ -106,13 +128,16 @@ const ValueMarkerRenderer = (props) => {
       geometry,
       opacity,
       fillColor,
+      strokeColor,
       children,
       iconImages,
       x,
       y,
       brightness,
       width,
-      symbolColor
+      minWidth,
+      symbolColor,
+      orientation
     ]
   );
   useCanvas("annotations-value-marker", draw);