@pushwoosh/kit-charts 0.0.3 → 0.0.5

package/ai-documentation.md

@@ -62,7 +62,8 @@ Deliberate differences from Highcharts:
    `ChartOptions<TChartMeta, TSeriesMeta, TPointMeta>`.
 2. Formatters take a typed context **argument**; there is no `this`.
 3. Formatters return a `ReactNode`, never an HTML string. There is no `useHTML`.
-4. `TooltipPoint` exposes `prev` and `next` neighbours directly.
+4. `TooltipPoint` exposes `prev` and `next` neighbours directly, and carries the
+   point's own `meta` as `pointMeta` beside the series' `meta`.
 5. Formatters see `ctx.chart.title` and `ctx.chart.meta`, not the option tree.
 6. No `credits` option.
 7. No `reflow`; resize is observed automatically.
@@ -338,6 +339,21 @@ the value wrapped in `valuePrefix`/`valueSuffix`. `formatter` replaces the body
 returns a `ReactNode`; `ctx.points[].prev`/`.next` carry the neighbouring points, so
 a delta needs no extra lookup. `shared: true` collects every series at the hovered x.
 
+`headerFormat` and `pointFormatter` are taken under their Highcharts names, so a
+config that already carries them needs no rewrite: `headerFormat: ''` drops the
+header, a template fills `{point.key}`, `{point.x}`, `{point.y}` and
+`{series.name}` (markup in it is dropped — the chrome is the library's), and
+`pointFormatter` is handed the point and returns a `ReactNode`. `formatter` and
+`table` both outrank them. Golden case: `area/header-format`.
+
+`ctx.points[].pointMeta` is the hovered point's own `meta` — the third type
+parameter of `ChartOptions<TChartMeta, TSeriesMeta, TPointMeta>`, the same object
+`onPointClick` reports. `meta` beside it stays the series'. A bar whose height is a
+rate and whose tooltip has to name the two counts behind it needs the per-point
+one; nothing else reaches it, because a formatter sees no option tree.
+
+Golden case: `tooltip/point-meta`.
+
 Golden cases: `tooltip/callout`, `tooltip/shared-formatter`.
 
 ## Styling
@@ -358,10 +374,34 @@ With `fillOpacity` on the body and `states.hover.fillOpacity` to deepen it, that
 is the funnel look: the series keeps its real colour, so the legend swatch and
 the tooltip dot stay readable, and only the bar is washed out.
 
+`states.hover.color` swaps the fill on hover instead of lightening it, for a body
+too pale for `brightness` to show on; it also wins over a per-point colour, since
+one colour on hover is the point of asking. `column` and `heatmap` read it.
+Golden case: `column/hover-color`.
+
 A data label whose text carries `\n` is drawn as stacked lines, styled by
 `style` for the first and `secondaryStyle` for the rest. It is one label: it
 moves, measures and hides as one.
 
+## Series opacity
+
+`series.opacity` fades a whole series layer — body, border and data labels — where
+`fillOpacity` reaches only the fill a renderer paints. A hover's
+`states.inactive.opacity` overrides it while it lasts. Golden case:
+`column/series-opacity`.
+
+## Areas
+
+`fillColor` paints the body under the line, where the fill is a token of its own
+rather than a wash of the series colour — `color` still keys the legend, the
+markers and the tooltip swatch. Left unset the body is the series colour at
+`fillOpacity`. Golden case: `area/fill-color`.
+
+Both live on `SeriesOptionsBase`, as every series option does, but a renderer
+reads only what it draws with: `fillColor` is read by `area` alone, `fillOpacity`
+by `area` and `column`. On a pie or a heatmap they are typed and inert — the same
+deal as `innerSize` on a line.
+
 ## The device pixel grid
 
 `useSize` floors the measured box, so the canvas is always a whole number of

package/core/Chart/Chart.d.ts

@@ -12,8 +12,8 @@ export interface ClickedPoint<TPointMeta = unknown> {
     color: string;
     meta: TPointMeta;
 }
-export interface ChartProps<TChartMeta = unknown, TSeriesMeta = unknown> {
-    options: ChartOptions<TChartMeta, TSeriesMeta>;
+export interface ChartProps<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
+    options: ChartOptions<TChartMeta, TSeriesMeta, TPointMeta>;
     renderers?: readonly AnySeriesRenderer[];
     isLoading?: boolean;
     empty?: ReactNode;
@@ -28,6 +28,6 @@ export interface ChartProps<TChartMeta = unknown, TSeriesMeta = unknown> {
      */
     onSeriesToggle?: (seriesIndex: number, visible: boolean, pointIndex?: number) => void;
     /** Called with the point nearest a click inside the plot; drill-down hangs off this. */
-    onPointClick?: (point: ClickedPoint, event: ReactMouseEvent<SVGSVGElement>) => void;
+    onPointClick?: (point: ClickedPoint<TPointMeta>, event: ReactMouseEvent<SVGSVGElement>) => void;
 }
-export declare function Chart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function Chart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/core/Chart/Chart.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Grid, XAxis, YAxis } from './Axes';
 import { Canvas, Centred, Container, PinnedAxes, ResetZoom, ScrollBox, SeriesLayer, TooltipCell, TooltipDivider, TooltipHeadCell, TooltipName, TooltipRow, TooltipSeriesCell, TooltipSeriesInner, TooltipSwatch, TooltipTable, TooltipTitle, TooltipValue, ZoomBand } from './Chart.styles';
@@ -10,6 +10,7 @@ import { Titles } from './Titles';
 import { Tooltip } from './Tooltip';
 import { useSize } from './useSize';
 import { MOTION_MS } from '../animation/motion';
+import { applyTooltipTemplate } from '../format/template';
 import { formatTime } from '../format/time';
 import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from '../layout/measure-text';
 import { buildChartModel, hiddenKey, isContinuous } from '../model/build-model';
@@ -32,18 +33,32 @@ const toCssSize = (value, fallback) => {
   }
   return typeof value === 'number' ? `${value}px` : value;
 };
-function defaultTooltip(ctx, formatX, formatValue) {
+function tooltipHeader(ctx, headerFormat, formatX) {
+  if (headerFormat === undefined) {
+    return formatX(ctx.x);
+  }
+  return applyTooltipTemplate(headerFormat, {
+    x: ctx.x,
+    y: ctx.points[0]?.y ?? null,
+    seriesName: ctx.points[0]?.seriesName ?? ''
+  });
+}
+function defaultTooltip(ctx, tooltip, formatX, formatValue) {
+  const header = tooltipHeader(ctx, tooltip?.headerFormat, formatX);
+  const pointFormatter = tooltip?.pointFormatter;
   return _jsxs("div", {
-    children: [_jsx(TooltipTitle, {
-      children: formatX(ctx.x)
-    }), ctx.points.map(point => _jsxs(TooltipRow, {
-      children: [_jsx(TooltipSwatch, {
-        "$color": point.color
-      }), _jsx(TooltipName, {
-        children: point.seriesName
-      }), _jsx(TooltipValue, {
-        children: formatValue(point.value ?? point.y)
-      })]
+    children: [header ? _jsx(TooltipTitle, {
+      children: header
+    }) : null, ctx.points.map(point => _jsx(TooltipRow, {
+      children: pointFormatter ? pointFormatter(point) : _jsxs(_Fragment, {
+        children: [_jsx(TooltipSwatch, {
+          "$color": point.color
+        }), _jsx(TooltipName, {
+          children: point.seriesName
+        }), _jsx(TooltipValue, {
+          children: formatValue(point.value ?? point.y)
+        })]
+      })
     }, `${point.seriesIndex}-${point.index}`))]
   });
 }
@@ -409,6 +424,7 @@ function ChartBody({
         value: hit.value,
         index: hit.pointIndex,
         meta: series?.options.meta,
+        pointMeta: neighbours[hit.pointIndex]?.meta,
         prev: previous ? {
           x: previous.x,
           y: previous.y,
@@ -434,8 +450,8 @@ function ChartBody({
       return formatter(ctx);
     }
     const table = options.tooltip?.table;
-    return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, formatX, formatValue);
-  }, [hover, model, options.title?.text, options.meta, options.tooltip?.formatter, options.tooltip?.table, formatX, formatValue]);
+    return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, options.tooltip, formatX, formatValue);
+  }, [hover, model, options.title?.text, options.meta, options.tooltip, formatX, formatValue]);
   const hasData = model?.series.some(series => series.points.some(point => point.y !== null)) ?? false;
   const plotBorderWidth = options.chart?.plotBorderWidth ?? 0;
   const scrolls = canvas.width > size.width || canvas.height > size.height;
@@ -536,6 +552,7 @@ function ChartBody({
             "$collapse": series.renderer.exit === 'collapse',
             "$selfAnimated": series.renderer.animatesGeometry === true,
             "$inactive": inactiveOpacity(series),
+            "$opacity": series.options.opacity,
             "$motionMs": motionOf(series),
             "$cursor": series.options.cursor ?? 'default',
             "aria-hidden": series.hidden,

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

@@ -33,6 +33,8 @@ export declare const SeriesLayer: import("styled-components").StyledComponent<"g
     $selfAnimated: boolean;
     /** Opacity while another series is hovered, from `states.inactive`. */
     $inactive?: number;
+    /** `series.opacity`: the whole series faded, border and labels included. */
+    $opacity?: number;
     /** `series.animation`; the chart clock unless this series asked for its own. */
     $motionMs: number;
     $cursor: string;

package/core/Chart/Chart.styles.js

@@ -56,12 +56,13 @@ export const SeriesLayer = styled.g.withConfig({
   componentId: "sc-1pit1b9-4"
 })(["opacity:", ";pointer-events:", ";cursor:", ";transition:opacity ", "ms ", ";", " @media (prefers-reduced-motion:reduce){transition:none;path,rect,circle,text{transition:none;}}"], ({
   $hidden,
-  $inactive
+  $inactive,
+  $opacity
 }) => {
   if ($hidden) {
     return 0;
   }
-  return $inactive ?? 1;
+  return $inactive ?? $opacity ?? 1;
 }, ({
   $hidden
 }) => $hidden ? 'none' : 'auto', ({

package/core/format/template.d.ts

@@ -0,0 +1,10 @@
+export interface TemplateContext {
+    x: number | string;
+    y: number | null;
+    seriesName: string;
+}
+/**
+ * Fills a Highcharts header template. Markup in it is dropped rather than rendered:
+ * the chrome around a tooltip is the library's, and a `<span>` in a config is styling.
+ */
+export declare function applyTooltipTemplate(format: string, ctx: TemplateContext): string;

package/core/format/template.js

@@ -0,0 +1,30 @@
+import { formatTime } from './time';
+import { fillTokens } from './tokens';
+const substitute = (name, ctx) => {
+  switch (name) {
+    case 'point.key':
+    case 'point.x':
+      return String(ctx.x);
+    case 'point.y':
+      return ctx.y === null ? '' : String(ctx.y);
+    case 'series.name':
+      return ctx.seriesName;
+    default:
+      return undefined;
+  }
+};
+/**
+ * Fills a Highcharts header template. Markup in it is dropped rather than rendered:
+ * the chrome around a tooltip is the library's, and a `<span>` in a config is styling.
+ */
+export function applyTooltipTemplate(format, ctx) {
+  const stripped = format.replace(/<br\s*\/?>/gi, ' ').replace(/<[^>]*>/g, '');
+  return fillTokens(stripped, (name, pattern) => {
+    const value = substitute(name, ctx);
+    if (value === undefined) {
+      return undefined;
+    }
+    const dates = name === 'point.key' || name === 'point.x';
+    return pattern && dates && typeof ctx.x === 'number' ? formatTime(pattern, ctx.x) : value;
+  }).trim();
+}

package/core/format/time.js

@@ -1,3 +1,4 @@
+import { fillTokens } from './tokens';
 const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -29,10 +30,10 @@ export function formatTime(pattern, timestamp) {
   });
 }
 export function applyValueFormat(format, value) {
-  return format.replace(/\{value(?::([^}]*))?\}/g, (_match, pattern) => {
-    if (pattern && typeof value === 'number') {
-      return formatTime(pattern, value);
+  return fillTokens(format, (name, pattern) => {
+    if (name !== 'value') {
+      return undefined;
     }
-    return String(value);
+    return pattern && typeof value === 'number' ? formatTime(pattern, value) : String(value);
   });
 }

package/core/format/tokens.d.ts

@@ -0,0 +1,3 @@
+export type TokenResolver = (name: string, pattern: string | undefined) => string | undefined;
+/** Fills `{name}` and `{name:pattern}` placeholders; an unresolved one is left as it stands. */
+export declare function fillTokens(format: string, resolve: TokenResolver): string;

package/core/format/tokens.js

@@ -0,0 +1,5 @@
+const TOKEN = /\{([a-z][a-z.]*)(?::([^}]*))?\}/gi;
+/** Fills `{name}` and `{name:pattern}` placeholders; an unresolved one is left as it stands. */
+export function fillTokens(format, resolve) {
+  return format.replace(TOKEN, (match, name, pattern) => resolve(name, pattern) ?? match);
+}

package/core/types/formatter.d.ts

@@ -35,7 +35,7 @@ export interface TooltipNeighbour {
     y: number | null;
     index: number;
 }
-export interface TooltipPoint<TSeriesMeta = unknown> {
+export interface TooltipPoint<TSeriesMeta = unknown, TPointMeta = unknown> {
     seriesIndex: number;
     seriesName: string;
     color: string;
@@ -44,16 +44,18 @@ export interface TooltipPoint<TSeriesMeta = unknown> {
     value: number | null;
     index: number;
     meta: TSeriesMeta | undefined;
+    /** The hovered point's own `meta` — what `onPointClick` reports, at hover time. */
+    pointMeta: TPointMeta | undefined;
     prev: TooltipNeighbour | undefined;
     next: TooltipNeighbour | undefined;
 }
-export interface TooltipContext<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipContext<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     x: number | string;
-    points: readonly TooltipPoint<TSeriesMeta>[];
+    points: readonly TooltipPoint<TSeriesMeta, TPointMeta>[];
     chart: {
         title: string | undefined;
         meta: TChartMeta | undefined;
     };
 }
-export type TooltipFormatter<TChartMeta = unknown, TSeriesMeta = unknown> = (ctx: TooltipContext<TChartMeta, TSeriesMeta>) => ReactNode;
-export type TooltipCellFormatter<TSeriesMeta = unknown> = (point: TooltipPoint<TSeriesMeta>) => ReactNode;
+export type TooltipFormatter<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> = (ctx: TooltipContext<TChartMeta, TSeriesMeta, TPointMeta>) => ReactNode;
+export type TooltipCellFormatter<TSeriesMeta = unknown, TPointMeta = unknown> = (point: TooltipPoint<TSeriesMeta, TPointMeta>) => ReactNode;

package/core/types/options.d.ts

@@ -175,36 +175,40 @@ export interface LegendOptions<TSeriesMeta = unknown> {
     symbolPadding?: number;
     labelFormatter?: LegendLabelFormatter<TSeriesMeta>;
 }
-export interface TooltipTableColumn<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipTableColumn<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     /**
      * A function is resolved per hover, and one that returns `null` drops the whole
      * column: that is how a "vs the previous point" column names the date it
      * compares against and disappears on the first point, where there is none.
      */
-    title?: string | TooltipFormatter<TChartMeta, TSeriesMeta>;
+    title?: string | TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     align?: 'left' | 'right';
-    cell: TooltipCellFormatter<TSeriesMeta>;
+    cell: TooltipCellFormatter<TSeriesMeta, TPointMeta>;
 }
 /**
  * Lays the tooltip out as a table: a header line, a heading row, and one row per
  * series with its swatch. Use it when a point carries more than one figure —
  * a count and its share of the whole — and a single line would run them together.
  */
-export interface TooltipTableOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipTableOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     /** The line above the table. Defaults to the formatted x. */
-    header?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    header?: TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     /** Heading over the series-name column. */
     seriesTitle?: string;
-    columns: readonly TooltipTableColumn<TChartMeta, TSeriesMeta>[];
+    columns: readonly TooltipTableColumn<TChartMeta, TSeriesMeta, TPointMeta>[];
 }
-export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     enabled?: boolean;
     shared?: boolean;
-    table?: TooltipTableOptions<TChartMeta, TSeriesMeta>;
+    table?: TooltipTableOptions<TChartMeta, TSeriesMeta, TPointMeta>;
     /** `callout` anchors a beaked bubble to the point; `box` floats near the cursor. */
     shape?: 'callout' | 'box';
     followPointer?: boolean;
-    formatter?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    formatter?: TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
+    /** Highcharts' header template: `''` drops the header, `{point.key}` and friends fill. */
+    headerFormat?: string;
+    /** One row per point, in place of the default swatch, name and value. */
+    pointFormatter?: TooltipCellFormatter<TSeriesMeta, TPointMeta>;
     dateFormat?: string;
     valuePrefix?: string;
     valueSuffix?: string;
@@ -255,6 +259,8 @@ export interface SeriesStatesOptions {
         brightness?: number;
         /** Deepens a translucent body on hover, where brightening a pale fill does nothing. */
         fillOpacity?: number;
+        /** The colour to swap to, for a hover that is not a brighter shade of the same one. */
+        color?: string;
     };
     inactive?: {
         opacity?: number;
@@ -298,6 +304,10 @@ export interface SeriesOptionsBase<TSeriesMeta = unknown, TPointMeta = unknown>
      */
     borderPosition?: 'all' | 'top';
     fillOpacity?: number;
+    /** The body's own colour, where the fill is not a wash of the series colour. */
+    fillColor?: string;
+    /** Fades the whole series — body, border and labels — unlike `fillOpacity`. */
+    opacity?: number;
     pointPadding?: number;
     groupPadding?: number;
     minPointLength?: number;
@@ -321,7 +331,7 @@ export interface ChartOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPoin
     yAxis?: AxisOptions | readonly AxisOptions[];
     colorAxis?: ColorAxisOptions;
     legend?: LegendOptions<TSeriesMeta>;
-    tooltip?: TooltipOptions<TChartMeta, TSeriesMeta>;
+    tooltip?: TooltipOptions<TChartMeta, TSeriesMeta, TPointMeta>;
     plotOptions?: PlotOptions<TSeriesMeta, TPointMeta>;
     series?: readonly SeriesOptionsBase<TSeriesMeta, TPointMeta>[];
     colors?: readonly string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {

package/presets/AreaChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function AreaChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function AreaChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/ColumnChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function ColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function ColumnChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/LineChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function LineChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function LineChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/PieChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function PieChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function PieChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/StackedColumnChart.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
 import { type Stacking } from '../core/types/options';
-export interface StackedColumnChartProps<TChartMeta = unknown, TSeriesMeta = unknown> extends ChartProps<TChartMeta, TSeriesMeta> {
+export interface StackedColumnChartProps<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> extends ChartProps<TChartMeta, TSeriesMeta, TPointMeta> {
     stacking?: Stacking;
 }
-export declare function StackedColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: StackedColumnChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function StackedColumnChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: StackedColumnChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/series/area/area.js

@@ -27,7 +27,7 @@ export const area = {
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toAreaPath(slots),
-        fill: color,
+        fill: ctx.series.fillColor ?? color,
         fillOpacity: ctx.series.fillOpacity ?? DEFAULT_FILL_OPACITY,
         stroke: "none"
       }), lineWidth ? _jsx("path", {

package/series/column/column.js

@@ -2,11 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { pointKey } from '../../core/data/points';
 import { drawable, projectSeries } from '../../core/geometry/path';
 import { TEXT_BASELINE_SHIFT, VALUE_LABEL_GAP } from '../../core/layout/metrics';
-import { brighten } from '../shared/color';
+import { resolveHoverFill } from '../shared/color';
 import { DataLabels } from '../shared/DataLabels';
 import { includeZero } from '../shared/domain';
 import { seriesLegend } from '../shared/legend';
-const DEFAULT_HOVER_BRIGHTNESS = 0.1;
 const SLOT_FALLBACK = {
   width: 10,
   offset: 0
@@ -46,7 +45,7 @@ const fillOf = (ctx, bar, hovered) => {
   if (!hovered) {
     return base;
   }
-  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
+  return resolveHoverFill(base, ctx.series.states);
 };
 /**
  * A translucent body under a solid rule is the funnel look: the series keeps its

package/series/heatmap/heatmap.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { pointKey } from '../../core/data/points';
 import { TEXT_BASELINE_SHIFT, VALUE_LABEL_GAP } from '../../core/layout/metrics';
-import { brighten } from '../shared/color';
+import { resolveHoverFill } from '../shared/color';
 import { DataLabels } from '../shared/DataLabels';
-const DEFAULT_HOVER_BRIGHTNESS = 0.1;
 /** Width of one column: a unit step on the x axis, or the whole plot if there is none. */
 function columnWidth(ctx) {
   const scale = ctx.scales.x;
@@ -79,7 +78,7 @@ const fillOf = (ctx, cell, hovered) => {
   if (!hovered) {
     return base;
   }
-  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
+  return resolveHoverFill(base, ctx.series.states);
 };
 const labelX = (ctx, cell) => {
   const padding = ctx.series.dataLabels?.padding ?? VALUE_LABEL_GAP;

package/series/shared/color.d.ts

@@ -1 +1,7 @@
+import { type SeriesStatesOptions } from '../../core/types/options';
 export declare function brighten(color: string, amount: number): string;
+/**
+ * An explicit hover colour wins over brightening, and over a per-point colour:
+ * asking for one colour on hover means one colour, not one per point.
+ */
+export declare function resolveHoverFill(base: string, states: SeriesStatesOptions | undefined): string;

package/series/shared/color.js

@@ -1,3 +1,4 @@
+const DEFAULT_HOVER_BRIGHTNESS = 0.1;
 const clamp = value => Math.min(255, Math.max(0, Math.round(value)));
 const parseHex = color => {
   const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
@@ -16,4 +17,12 @@ export function brighten(color, amount) {
   const ratio = Math.abs(amount);
   const [r, g, b] = rgb.map(channel => clamp(channel + (target - channel) * ratio));
   return `#${[r, g, b].map(channel => channel.toString(16).padStart(2, '0')).join('')}`;
+}
+/**
+ * An explicit hover colour wins over brightening, and over a per-point colour:
+ * asking for one colour on hover means one colour, not one per point.
+ */
+export function resolveHoverFill(base, states) {
+  const hover = states?.hover;
+  return hover?.color ?? brighten(base, hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
 }