@pushwoosh/kit-charts 0.0.22 → 0.0.24

package/core/Chart/Chart.js

@@ -325,7 +325,8 @@ function ChartBody({
       anchor: {
         x: bounds.left + highest.anchor.x,
         y: bounds.top + highest.anchor.y
-      }
+      },
+      reach: highest.reach ?? 0
     });
   }, [model, hitsAt, options.tooltip, drag]);
   const handlePointerLeave = useCallback(() => setHover(null), []);
@@ -578,6 +579,13 @@ function ChartBody({
         }), model.axisless ? null : _jsx(XAxisLine, {
           plot: model.plot,
           axis: model.xAxis
+        }), model.series.map(series => {
+          const ctx = series.hidden ? null : contextFor(series);
+          const overlay = ctx ? series.renderer.renderOverlay?.(ctx) : null;
+          return overlay ? _jsx("g", {
+            "data-series-index": series.index,
+            children: overlay
+          }, `overlay-${series.index}`) : null;
         }), decorations('over'), drag ? _jsx(ZoomBand, {
           x: Math.min(drag.from, drag.to),
           y: model.plot.y,
@@ -627,6 +635,7 @@ function ChartBody({
       children: options.chart?.resetZoomText ?? 'Reset zoom'
     }) : null, hover && tooltipContent ? _jsx(Tooltip, {
       at: hover.anchor,
+      reach: hover.reach,
       pointer: hover.pointer,
       options: options.tooltip,
       children: tooltipContent

package/core/Chart/Chart.styles.d.ts

@@ -62,14 +62,16 @@ export interface TooltipBoxProps {
     $shadow: string;
 }
 export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, TooltipBoxProps, never>;
+/** Edge of the box the beak sits on, named after that edge. */
+export type TailSide = 'top' | 'right' | 'bottom' | 'left';
 export interface TailProps {
-    $left: number;
-    $size: number;
-    $color: string;
-    $below: boolean;
+    $offset: number;
+    $width: number;
+    $height: number;
+    $side: TailSide;
 }
-/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
-export declare const Tail: import("styled-components").StyledComponent<"span", any, TailProps, never>;
+/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
+export declare const Tail: import("styled-components").StyledComponent<"svg", any, TailProps, never>;
 export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipSwatch: import("styled-components").StyledComponent<"span", any, {

package/core/Chart/Chart.styles.js

@@ -127,25 +127,21 @@ export const TooltipBox = styled.div.withConfig({
 }) => $color, ({
   $whiteSpace
 }) => $whiteSpace);
-/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
-export const Tail = styled.span.withConfig({
+/** The side names the CSS edge the beak hangs off; the other axis carries its offset. */
+function tailAnchor({
+  $side,
+  $offset,
+  $width,
+  $height
+}) {
+  const along = $side === 'top' || $side === 'bottom' ? 'left' : 'top';
+  return `${$side}: -${$height}px; ${along}: ${$offset - $width / 2}px;`;
+}
+/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
+export const Tail = styled.svg.withConfig({
   displayName: "Tail",
   componentId: "sc-1pit1b9-9"
-})(["position:absolute;", " left:", ";width:0;height:0;border-right:", " solid transparent;border-left:", " solid transparent;", ""], ({
-  $below,
-  $size
-}) => $below ? `top: -${$size}px;` : `bottom: -${$size}px;`, ({
-  $left,
-  $size
-}) => `${$left - $size}px`, ({
-  $size
-}) => `${$size}px`, ({
-  $size
-}) => `${$size}px`, ({
-  $below,
-  $size,
-  $color
-}) => $below ? `border-bottom: ${$size}px solid ${$color};` : `border-top: ${$size}px solid ${$color};`);
+})(["position:absolute;", ";overflow:visible;"], tailAnchor);
 export const TooltipTitle = styled.div.withConfig({
   displayName: "TooltipTitle",
   componentId: "sc-1pit1b9-10"

package/core/Chart/Tooltip.d.ts

@@ -4,10 +4,12 @@ import { type TooltipOptions } from '../types/options';
 interface TooltipProps {
     /** Anchor the callout points at, in viewport coordinates. */
     at: Point;
+    /** How far the hovered mark reaches past the anchor, so the beak clears it. */
+    reach?: number;
     /** Pointer position, used when the tooltip follows the cursor instead. */
     pointer: Point;
     options: TooltipOptions | undefined;
     children: ReactNode;
 }
-export declare function Tooltip({ at, options, pointer, children, }: TooltipProps): ReactElement | null;
+export declare function Tooltip({ at, reach: markReach, options, pointer, children, }: TooltipProps): ReactElement | null;
 export {};

package/core/Chart/Tooltip.js

@@ -2,23 +2,93 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { DEFAULTS, Tail, TooltipBox } from './Chart.styles';
-import { TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL, VIEWPORT_MARGIN } from '../layout/metrics';
+import { TOOLTIP_ANCHOR_GAP, TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL_HEIGHT, TOOLTIP_TAIL_WIDTH, VIEWPORT_MARGIN } from '../layout/metrics';
 const SHADOW_COLOR = 'rgba(0, 0, 0, 0.12)';
 const DEFAULT_SHADOW = `0 2px 8px ${SHADOW_COLOR}`;
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+/** Keeps a box of `size` inside `viewport`, margins included. */
+function fit(value, size, viewport) {
+  return clamp(value, VIEWPORT_MARGIN, viewport - size - VIEWPORT_MARGIN);
+}
+/** Two slopes only: left open so the fill closes it without a stroke along the base. */
+function beakPath(side) {
+  const long = TOOLTIP_TAIL_WIDTH;
+  const deep = TOOLTIP_TAIL_HEIGHT;
+  const half = long / 2;
+  switch (side) {
+    case 'top':
+      return `M0 ${deep} L${half} 0 L${long} ${deep}`;
+    case 'left':
+      return `M${deep} 0 L0 ${half} L${deep} ${long}`;
+    case 'right':
+      return `M0 0 L${deep} ${half} L0 ${long}`;
+    default:
+      return `M0 0 L${half} ${deep} L${long} 0`;
+  }
+}
+/** The beak viewport: deep across the edge it leaves, long along it. */
+function beakBox(side) {
+  return side === 'left' || side === 'right' ? {
+    width: TOOLTIP_TAIL_HEIGHT,
+    height: TOOLTIP_TAIL_WIDTH
+  } : {
+    width: TOOLTIP_TAIL_WIDTH,
+    height: TOOLTIP_TAIL_HEIGHT
+  };
+}
+/** The 1px of box border the beak covers where it leaves the edge. */
+function beakSeam(side) {
+  const long = TOOLTIP_TAIL_WIDTH - 1;
+  const deep = TOOLTIP_TAIL_HEIGHT;
+  switch (side) {
+    case 'top':
+      return {
+        x: 0.5,
+        y: deep,
+        width: long,
+        height: 1
+      };
+    case 'left':
+      return {
+        x: deep,
+        y: 0.5,
+        width: 1,
+        height: long
+      };
+    case 'right':
+      return {
+        x: -1,
+        y: 0.5,
+        width: 1,
+        height: long
+      };
+    default:
+      return {
+        x: 0.5,
+        y: -1,
+        width: long,
+        height: 1
+      };
+  }
+}
 export function Tooltip({
   at,
+  reach: markReach = 0,
   options,
   pointer,
   children
 }) {
   const ref = useRef(null);
   const callout = (options?.shape ?? 'callout') === 'callout' && !options?.followPointer;
+  const radius = options?.borderRadius ?? TOOLTIP_RADIUS;
   const target = options?.followPointer ? pointer : at;
   const [placement, setPlacement] = useState({
     x: target.x + TOOLTIP_CURSOR_OFFSET,
     y: target.y + TOOLTIP_CURSOR_OFFSET,
-    tailX: null,
-    below: true
+    tail: null,
+    side: 'top'
   });
   useLayoutEffect(() => {
     const node = ref.current;
@@ -29,30 +99,49 @@ export function Tooltip({
       width,
       height
     } = node.getBoundingClientRect();
-    const limitX = value => Math.min(Math.max(VIEWPORT_MARGIN, value), Math.max(VIEWPORT_MARGIN, window.innerWidth - width - VIEWPORT_MARGIN));
+    const fitX = value => fit(value, width, window.innerWidth);
+    const fitY = value => fit(value, height, window.innerHeight);
     if (!callout) {
       const flipX = target.x + TOOLTIP_CURSOR_OFFSET + width > window.innerWidth - VIEWPORT_MARGIN;
       const flipY = target.y + TOOLTIP_CURSOR_OFFSET + height > window.innerHeight - VIEWPORT_MARGIN;
       setPlacement({
-        x: limitX(flipX ? target.x - TOOLTIP_CURSOR_OFFSET - width : target.x + TOOLTIP_CURSOR_OFFSET),
-        y: Math.max(VIEWPORT_MARGIN, flipY ? target.y - TOOLTIP_CURSOR_OFFSET - height : target.y + TOOLTIP_CURSOR_OFFSET),
-        tailX: null,
-        below: !flipY
+        x: fitX(flipX ? target.x - TOOLTIP_CURSOR_OFFSET - width : target.x + TOOLTIP_CURSOR_OFFSET),
+        y: fitY(flipY ? target.y - TOOLTIP_CURSOR_OFFSET - height : target.y + TOOLTIP_CURSOR_OFFSET),
+        tail: null,
+        side: flipY ? 'bottom' : 'top'
+      });
+      return;
+    }
+    // What the beak needs of an edge: its own half plus the rounded corner beside it.
+    const beakReach = TOOLTIP_TAIL_WIDTH / 2 + radius;
+    const standoff = TOOLTIP_TAIL_HEIGHT + TOOLTIP_ANCHOR_GAP + markReach;
+    const centred = target.x - width / 2;
+    const x = fitX(centred);
+    // Only the viewport can push the box off centre; if that pushed the anchor past
+    // the edge the beak reaches, the box stands beside the point instead of over it.
+    const beside = x !== centred && (target.x < x + beakReach || target.x > x + width - beakReach);
+    if (beside) {
+      const onLeft = target.x > x + width - beakReach;
+      const y = fitY(target.y - height / 2);
+      setPlacement({
+        x: fitX(onLeft ? target.x - standoff - width : target.x + standoff),
+        y,
+        tail: clamp(target.y - y, beakReach, height - beakReach),
+        side: onLeft ? 'right' : 'left'
       });
       return;
     }
-    // Sit above the point with the tail pointing down at it, and flip under the
+    // Sit above the point with the beak pointing down at it, and flip under the
     // point when there is no room. The box may be nudged sideways to stay on
-    // screen, so the tail keeps its own offset and still points at the anchor.
-    const below = target.y - height - TOOLTIP_TAIL < VIEWPORT_MARGIN;
-    const x = limitX(target.x - width / 2);
+    // screen, so the beak keeps its own offset and still points at the anchor.
+    const below = target.y - height - standoff < VIEWPORT_MARGIN;
     setPlacement({
       x,
-      y: below ? target.y + TOOLTIP_TAIL : target.y - height - TOOLTIP_TAIL,
-      tailX: Math.min(Math.max(TOOLTIP_TAIL * 2, target.x - x), Math.max(TOOLTIP_TAIL * 2, width - TOOLTIP_TAIL * 2)),
-      below
+      y: below ? target.y + standoff : target.y - height - standoff,
+      tail: clamp(target.x - x, beakReach, width - beakReach),
+      side: below ? 'top' : 'bottom'
     });
-  }, [target.x, target.y, callout, children]);
+  }, [target.x, target.y, markReach, callout, radius, children]);
   if (typeof document === 'undefined') {
     return null;
   }
@@ -61,26 +150,42 @@ export function Tooltip({
   // so the tabular tooltip is a light card unless the caller says otherwise.
   const tabular = Boolean(options?.table);
   const background = options?.backgroundColor ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
+  const borderColor = options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent');
   const color = options?.style?.color ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
+  const beak = beakBox(placement.side);
   return createPortal(_jsxs(TooltipBox, {
     ref: ref,
     role: "tooltip",
     "$x": placement.x,
     "$y": placement.y,
     "$padding": options?.padding ?? TOOLTIP_PADDING,
-    "$radius": options?.borderRadius ?? TOOLTIP_RADIUS,
-    "$borderColor": options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent'),
+    "$radius": radius,
+    "$borderColor": borderColor,
     "$background": background,
     "$color": color,
     "$fontFamily": options?.style?.fontFamily ?? DEFAULTS.fontFamily,
     "$fontSize": options?.style?.fontSize ?? DEFAULTS.fontSize,
     "$whiteSpace": options?.style?.whiteSpace ?? 'nowrap',
     "$shadow": shadow ? `${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 2}px ${shadow.width ?? 8}px ` + `${shadow.color ?? SHADOW_COLOR}` : DEFAULT_SHADOW,
-    children: [children, placement.tailX === null ? null : _jsx(Tail, {
-      "$left": placement.tailX,
-      "$size": TOOLTIP_TAIL,
-      "$color": background,
-      "$below": placement.below
+    children: [children, placement.tail === null ? null : _jsxs(Tail, {
+      "$offset": placement.tail,
+      "$width": TOOLTIP_TAIL_WIDTH,
+      "$height": TOOLTIP_TAIL_HEIGHT,
+      "$side": placement.side,
+      width: beak.width,
+      height: beak.height,
+      viewBox: `0 0 ${beak.width} ${beak.height}`,
+      "aria-hidden": true,
+      children: [_jsx("path", {
+        d: beakPath(placement.side),
+        fill: background,
+        stroke: borderColor,
+        strokeWidth: 1,
+        strokeLinejoin: "round"
+      }), _jsx("rect", {
+        ...beakSeam(placement.side),
+        fill: background
+      })]
     })]
   }), document.body);
 }

package/core/layout/metrics.d.ts

@@ -36,8 +36,11 @@ export declare const HINT_ICON_GAP = 6;
 export declare const HINT_PADDING = 12;
 /** Between the title block and the plot below it. */
 export declare const TITLE_BLOCK_GAP = 10;
-/** Tooltip beak: both its height and half its width. */
-export declare const TOOLTIP_TAIL = 7;
+/** Tooltip beak, as the design system draws it. */
+export declare const TOOLTIP_TAIL_WIDTH = 14;
+export declare const TOOLTIP_TAIL_HEIGHT = 4;
+/** Air between the beak tip and the edge of the mark it points at. */
+export declare const TOOLTIP_ANCHOR_GAP = 8;
 /** Tooltip to the cursor, when it follows the pointer instead of a point. */
 export declare const TOOLTIP_CURSOR_OFFSET = 12;
 /** Keep a floating element this far inside the viewport. */

package/core/layout/metrics.js

@@ -36,8 +36,11 @@ export const HINT_ICON_GAP = 6;
 export const HINT_PADDING = 12;
 /** Between the title block and the plot below it. */
 export const TITLE_BLOCK_GAP = 10;
-/** Tooltip beak: both its height and half its width. */
-export const TOOLTIP_TAIL = 7;
+/** Tooltip beak, as the design system draws it. */
+export const TOOLTIP_TAIL_WIDTH = 14;
+export const TOOLTIP_TAIL_HEIGHT = 4;
+/** Air between the beak tip and the edge of the mark it points at. */
+export const TOOLTIP_ANCHOR_GAP = 8;
 /** Tooltip to the cursor, when it follows the pointer instead of a point. */
 export const TOOLTIP_CURSOR_OFFSET = 12;
 /** Keep a floating element this far inside the viewport. */

package/core/types/renderer.d.ts

@@ -61,6 +61,8 @@ export interface PointHit {
     y: number | null;
     value: number | null;
     anchor: Point;
+    /** How far the hovered mark reaches past `anchor`; 0 when it draws none. */
+    reach?: number;
     distance: number;
 }
 export interface LegendItem {
@@ -95,6 +97,8 @@ export interface SeriesRenderer<TSeries extends SeriesOptionsBase = SeriesOption
     readonly animatesGeometry?: boolean;
     extendDomain(series: TSeries, acc: DomainAcc): DomainAcc;
     render(ctx: RenderContext<TSeries>): ReactNode;
+    /** Drawn above every series and the axis line — the hovered point marker lives here. */
+    renderOverlay?(ctx: RenderContext<TSeries>): ReactNode;
     hitTest(ctx: RenderContext<TSeries>, pointer: Point): PointHit[] | null;
     legendItems(series: TSeries, seriesIndex: number, colors: readonly string[]): LegendItem[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "directory": "dist"
   },
   "dependencies": {
-    "@pushwoosh/kit-constants": "^2.0.0"
+    "@pushwoosh/kit-constants": "^2.1.0"
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^3.1.0",

package/series/area/area.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toAreaPath, toLinePath } from '../../core/geometry/path';
-import { showsHoverMarker } from '../../core/options/normalize';
 import { includeZero } from '../shared/domain';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
-import { Markers } from '../shared/Markers';
+import { hoverMarkerFor, Markers } from '../shared/Markers';
 const DEFAULT_FILL_OPACITY = 0.75;
 export const area = {
   type: 'area',
@@ -21,10 +20,6 @@ export const area = {
     }
     const color = ctx.color;
     const lineWidth = ctx.series.lineWidth ?? 2;
-    const hoveredIndex = ctx.hovered?.pointIndex;
-    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
-      point
-    }) => point.index === hoveredIndex);
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toAreaPath(slots),
@@ -42,16 +37,10 @@ export const area = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
-        cx: hovered.px,
-        cy: hovered.py,
-        r: ctx.series.marker?.states?.hover?.radius ?? 4,
-        fill: color,
-        stroke: "#FFFFFF",
-        strokeWidth: 2
-      }) : null]
+      })]
     });
   },
+  renderOverlay: ctx => hoverMarkerFor(ctx),
   hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
   legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'square')
 };

package/series/line/line.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toLinePath } from '../../core/geometry/path';
-import { showsHoverMarker } from '../../core/options/normalize';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
-import { Markers } from '../shared/Markers';
+import { hoverMarkerFor, Markers } from '../shared/Markers';
 export const line = {
   type: 'line',
   scales: {
@@ -18,10 +17,6 @@ export const line = {
       return null;
     }
     const color = ctx.color;
-    const hoveredIndex = ctx.hovered?.pointIndex;
-    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
-      point
-    }) => point.index === hoveredIndex);
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toLinePath(slots),
@@ -34,16 +29,10 @@ export const line = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
-        cx: hovered.px,
-        cy: hovered.py,
-        r: ctx.series.marker?.states?.hover?.radius ?? 4,
-        fill: color,
-        stroke: "#FFFFFF",
-        strokeWidth: 2
-      }) : null]
+      })]
     });
   },
+  renderOverlay: ctx => hoverMarkerFor(ctx),
   hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
   legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'line')
 };

package/series/shared/Markers.d.ts

@@ -1,6 +1,11 @@
 import { type ReactNode } from 'react';
 import { type Projected } from '../../core/geometry/path';
 import { type MarkerOptions } from '../../core/types/options';
+import { type RenderContext } from '../../core/types/renderer';
+/** How far the hover mark reaches past its point, so a tooltip can clear it. */
+export declare const hoverReachOf: (marker: MarkerOptions | undefined) => number;
+/** The hovered point of a series, or nothing when it has none. */
+export declare function hoverMarkerFor(ctx: RenderContext): ReactNode;
 export interface MarkersProps {
     marker: MarkerOptions | undefined;
     projected: readonly Projected[];

package/series/shared/Markers.js

@@ -1,6 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { showsMarkers } from '../../core/options/normalize';
+import { drawable, projectSeries } from '../../core/geometry/path';
+import { DEFAULT_SURFACE_COLOR } from '../../core/model/palette';
+import { showsHoverMarker, showsMarkers } from '../../core/options/normalize';
+/** Hovered point per the design system: a ring in the series colour on the surface. */
+const HOVER_RADIUS = 2.5;
+const HOVER_RING_WIDTH = 2;
 const markerRadius = marker => marker?.radius ?? (marker?.width ? marker.width / 2 : 3);
+/** How far the hover mark reaches past its point, so a tooltip can clear it. */
+export const hoverReachOf = marker => (marker?.states?.hover?.radius ?? HOVER_RADIUS) + HOVER_RING_WIDTH / 2;
+/** The hovered point of a series, or nothing when it has none. */
+export function hoverMarkerFor(ctx) {
+  const {
+    marker
+  } = ctx.series;
+  const hoveredIndex = ctx.hovered?.pointIndex;
+  if (hoveredIndex === undefined || !showsHoverMarker(marker)) {
+    return null;
+  }
+  const at = drawable(projectSeries(ctx)).find(({
+    point
+  }) => point.index === hoveredIndex);
+  return at ? _jsx("circle", {
+    cx: at.px,
+    cy: at.py,
+    r: marker?.states?.hover?.radius ?? HOVER_RADIUS,
+    fill: DEFAULT_SURFACE_COLOR,
+    stroke: ctx.color,
+    strokeWidth: HOVER_RING_WIDTH
+  }) : null;
+}
 export function Markers({
   marker,
   projected,

package/series/shared/hit.js

@@ -1,5 +1,7 @@
+import { hoverReachOf } from './Markers';
 import { pointKey } from '../../core/data/points';
 import { drawable, projectSeries } from '../../core/geometry/path';
+import { showsHoverMarker } from '../../core/options/normalize';
 const HIT_RADIUS = 40;
 export function nearestByX(ctx, pointer, radius = HIT_RADIUS) {
   const projected = drawable(projectSeries(ctx));
@@ -28,6 +30,7 @@ export function nearestByX(ctx, pointer, radius = HIT_RADIUS) {
       x: best.px,
       y: best.py
     },
+    reach: showsHoverMarker(ctx.series.marker) ? hoverReachOf(ctx.series.marker) : 0,
     distance: bestDistance
   }];
 }