@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,97 @@ All notable changes to `@sckyzo/cosmos-charts` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.2.0...@sckyzo/cosmos-charts@0.3.0) (2026-10-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **charts:** removed from @sckyzo/cosmos-charts:
+    - the `apexOptions` prop of every wrapper, and the `ChartRawOptions`,
+      `ChartBaseProps` and `ChartAccessibility` types. Draw what a wrapper
+      has no prop for with Recharts elements passed as `children`.
+    - `useChartTheme` and `useDarkMode`. Colours are CSS variables now
+      (`var(--color-brand-500)`, `var(--color-status-warn)`...), which
+      follow the theme, the accent and the text size with no hook.
+    - `escapeHtml`, `tooltipHtml` and the `TooltipContent` and `TooltipRow`
+      types. Legends and tooltips are React text, so nothing needs escaping.
+    - the `apexcharts` and `react-apexcharts` dependencies.
+* **charts:** StrokedGauge no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** SemiCircleGauge no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** GradientRadial no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** RadialBarChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** RadarChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** DonutChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** RealtimeChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** BoxPlotChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** ScatterChart and BubbleChart no longer take `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** RangeBarChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** MixedChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** BarChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** TreemapChart no longer takes `apexOptions`. Pass Recharts elements as `children` instead.
+* **charts:** HeatmapChart no longer takes `apexOptions`. It is not a Recharts chart, so it takes no `children` either.
+* **charts:** LineAreaChart and Sparkline no longer take `apexOptions`. Pass Recharts elements as `children` instead (a ReferenceLine, a Brush, an extra axis), and add `recharts` at the version of @sckyzo/cosmos-charts.
+* **charts:** SparklineGroup and SparklineGroupItem are removed. Replace `<SparklineGroup items={…} />` with a grid of `<KpiCard chart={<Sparkline … />} />` from @sckyzo/cosmos-react.
+
+### Features
+
+* **charts:** add a bar variant to Sparkline ([3f9ab37](https://github.com/SckyzO/cosmos/commit/3f9ab37a6ba55849f6973725a8eb89794776a805))
+* **charts:** add a target mark to SemiCircleGauge ([ac92ab1](https://github.com/SckyzO/cosmos/commit/ac92ab1e94cb1fa4902fc782847ced50d32cbde1))
+* **charts:** add area series and stacked columns to MixedChart ([2550350](https://github.com/SckyzO/cosmos/commit/2550350249a1aab45fb1dcb46fb1f18d1f2c1059))
+* **charts:** add BumpChart ([ca297f9](https://github.com/SckyzO/cosmos/commit/ca297f904d3da04f1500baa7d95b3cf976d0fb14))
+* **charts:** add CalendarChart ([ded7649](https://github.com/SckyzO/cosmos/commit/ded76493111095f6a722b5f4aac823f64d216209))
+* **charts:** add FunnelChart ([0468d4b](https://github.com/SckyzO/cosmos/commit/0468d4bc291b5ca16c411fa641ba975fa733b20b))
+* **charts:** add line, stacked and marker options to LineAreaChart ([d5fc612](https://github.com/SckyzO/cosmos/commit/d5fc612e374d40afd247a4924917b80f4409c72d))
+* **charts:** add per-value bar colors to BarChart ([b802e2a](https://github.com/SckyzO/cosmos/commit/b802e2adefd01f64c5b31dc62079c55338eb06f8))
+* **charts:** add pie, center text and legend values to DonutChart ([0c2bef8](https://github.com/SckyzO/cosmos/commit/0c2bef83f5319f97d03f9d9f5fd2d8224104aac9))
+* **charts:** add reference lines and bands to BarChart ([c63c73e](https://github.com/SckyzO/cosmos/commit/c63c73e60abd3806659191117da0d28e73dc4732))
+* **charts:** add reference lines and bands to BoxPlotChart ([b95e0e4](https://github.com/SckyzO/cosmos/commit/b95e0e45f62034b4c0b4fb9516162e0c15405fb8))
+* **charts:** add reference lines and bands to LineAreaChart ([1a32189](https://github.com/SckyzO/cosmos/commit/1a32189bb1ee932c28b6ac1194726ef4f00749b9))
+* **charts:** add reference lines and bands to MixedChart ([a09cbfb](https://github.com/SckyzO/cosmos/commit/a09cbfbf9957cf3661667f649fa072e8906cb47c))
+* **charts:** add reference lines and bands to RangeBarChart ([f4e1991](https://github.com/SckyzO/cosmos/commit/f4e19919ad234c8a3bd72b0d6e18d9e694592aa4))
+* **charts:** add reference lines and bands to the scatter charts ([7fc14b5](https://github.com/SckyzO/cosmos/commit/7fc14b5e5f105821ed5846b842ce89760fc35a79))
+* **charts:** add the shared reference lines and bands ([efc7f59](https://github.com/SckyzO/cosmos/commit/efc7f596c7ee3b1dd1dce715f48e846f241dd845))
+* **charts:** add WaterfallChart ([d120940](https://github.com/SckyzO/cosmos/commit/d12094002f1d45e2cc78b70a310c11724c7f69f9))
+* **charts:** add WorldMap ([513869f](https://github.com/SckyzO/cosmos/commit/513869f4886bb9e93e929618c9918187d1d72dbd))
+* **charts:** scale the chart text with the text size setting ([a64e6ee](https://github.com/SckyzO/cosmos/commit/a64e6ee8bb6ffbcfac15232de6d81d4fd6f625b9))
+* **charts:** separate the bars of a group with a line in the card color ([06240b5](https://github.com/SckyzO/cosmos/commit/06240b56b88295eddf943e70cc1661427cb45448))
+* **charts:** trim long category labels of the BarChart ([ca586d6](https://github.com/SckyzO/cosmos/commit/ca586d64207b5023dde432d7ea46a80c2fe39e22))
+
+
+### Bug Fixes
+
+* **charts:** draw the dark bubbles more opaque ([545fa8d](https://github.com/SckyzO/cosmos/commit/545fa8dfad944028317c3777f4983a540b107402))
+* **charts:** drop the dead space under the cartesian charts ([31b3cae](https://github.com/SckyzO/cosmos/commit/31b3cae0cc1442bc2ae2e8ca21eb67d9c1431e76))
+* **charts:** keep the lowest heatmap step off the dark card ([3aec9a8](https://github.com/SckyzO/cosmos/commit/3aec9a8f7bcd7adaae554a4bf81e5518f5377f0f))
+* **charts:** measure the axes again once a web font has loaded ([ba48949](https://github.com/SckyzO/cosmos/commit/ba48949c3a493dd32067b19f0ac8c608d9f60739))
+* **charts:** size the radar when its series follow an empty start ([b26e5fc](https://github.com/SckyzO/cosmos/commit/b26e5fc163e37b83bf9604d9e6e276dedca536de))
+* **charts:** walk horizontal bar charts with the arrow keys ([6855ae0](https://github.com/SckyzO/cosmos/commit/6855ae0f21738a89419fa229a5a57949ce40a4e5))
+
+
+### Miscellaneous Chores
+
+* **charts:** remove ApexCharts ([c7d871c](https://github.com/SckyzO/cosmos/commit/c7d871ca4794a9e09f8958485121b45bd0fca8da))
+
+
+### Code Refactoring
+
+* **charts:** move BarChart to Recharts ([b6cb7ad](https://github.com/SckyzO/cosmos/commit/b6cb7ad1ceab1b786f25931937bb1877ae91d40f))
+* **charts:** move BoxPlotChart to Recharts ([11ff878](https://github.com/SckyzO/cosmos/commit/11ff8783a8c808c90553613f1a96647207817820))
+* **charts:** move DonutChart to Recharts ([00fedf4](https://github.com/SckyzO/cosmos/commit/00fedf436a0c9ed90237c63eedc30fe9fcb9c8da))
+* **charts:** move GradientRadial to Recharts ([05d99d0](https://github.com/SckyzO/cosmos/commit/05d99d0c99f7eda6898450ffcd00e4a575bc9683))
+* **charts:** move HeatmapChart off ApexCharts ([3c2725e](https://github.com/SckyzO/cosmos/commit/3c2725e540f57bffaecb0889858f9e8eed71a41c))
+* **charts:** move LineAreaChart and Sparkline to Recharts ([6ca825d](https://github.com/SckyzO/cosmos/commit/6ca825d2afffb3253d2425aced15ce8e2cfe11e0))
+* **charts:** move MixedChart to Recharts ([d4696a9](https://github.com/SckyzO/cosmos/commit/d4696a972c3f81d7778a1993b831f587e6f23f2e))
+* **charts:** move RadarChart to Recharts ([0686555](https://github.com/SckyzO/cosmos/commit/0686555634bb3ffb69b49fc2584b9c0debfb36aa))
+* **charts:** move RadialBarChart to Recharts ([078abac](https://github.com/SckyzO/cosmos/commit/078abacde860eb7c89fc49442e47374e6569331c))
+* **charts:** move RangeBarChart to Recharts ([b36a035](https://github.com/SckyzO/cosmos/commit/b36a03598143f24b0e6ca084030064713ab41ee6))
+* **charts:** move RealtimeChart to Recharts ([c474509](https://github.com/SckyzO/cosmos/commit/c474509b2bb1420039a0980572e1d6d38ed12e9e))
+* **charts:** move ScatterChart and BubbleChart to Recharts ([03e472f](https://github.com/SckyzO/cosmos/commit/03e472f39c31db2c7582a139e9352a3a7629e947))
+* **charts:** move SemiCircleGauge to Recharts ([4962287](https://github.com/SckyzO/cosmos/commit/4962287b2c73a6fab8a1ed6c3194959d4e6de6e1))
+* **charts:** move StrokedGauge to Recharts ([58eebd3](https://github.com/SckyzO/cosmos/commit/58eebd3f893655d16f9932f1d37b05824b92809d))
+* **charts:** move TreemapChart to Recharts ([a34ac2c](https://github.com/SckyzO/cosmos/commit/a34ac2c43905d10f84b59b71adb66cf21585e912))
+* **charts:** remove SparklineGroup ([c045228](https://github.com/SckyzO/cosmos/commit/c045228c4c7187b5061dbca601961fc66a91d253))
+
 ## [0.2.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.1.1...@sckyzo/cosmos-charts@0.2.0) (2026-10-21)
 
 

package/README.md

@@ -2,9 +2,11 @@
 
 [![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-charts)](https://www.npmjs.com/package/@sckyzo/cosmos-charts)
 
-Cosmos charts — opinionated [ApexCharts](https://apexcharts.com/) wrappers themed for the Cosmos design system.
+Cosmos charts — opinionated chart wrappers themed for the Cosmos design system, drawn with [Recharts](https://recharts.github.io/).
 
-Kept in a dedicated subpackage so that `@sckyzo/cosmos-react` consumers who don't render charts don't ship the ApexCharts bundle.
+Kept in a dedicated subpackage so that `@sckyzo/cosmos-react` consumers who don't render charts don't ship a chart library.
+
+Each chart is a module of its own and the package declares no side effects, so a bundler ships the charts you import and leaves the others out: `import { DonutChart } from '@sckyzo/cosmos-charts'` brings the donut, not the line or bar charts. `recharts` is a dependency of the package, installed with it. So are `d3-geo` and `topojson-client`, which only `WorldMap` loads: a bundler leaves them out unless you import it.
 
 ## Install
 
@@ -13,10 +15,32 @@ pnpm add @sckyzo/cosmos-charts
 pnpm add react react-dom   # peers, react 19+
 ```
 
+## How the charts are drawn
+
+Every chart is drawn with Recharts, except `HeatmapChart` and `FunnelChart`, drawn in HTML and SVG (Recharts has no heatmap, and its bars cannot be joined by a flow), and `WorldMap`, an SVG of its own (Recharts has no map). The rules every chart follows:
+
+- **Colors are CSS variables** handed straight to the SVG, with a hex fallback: a theme, accent or text size switch on `<html>` repaints the chart with no observer and no redraw. `@sckyzo/cosmos-theme` always emits what the charts read (`--color-brand-500`, the status and semantic colors, `--color-chart-2` to `--color-chart-8`).
+- **The default palette** is the accent, then seven hues. Each accent lists its own seven in the theme CSS, skipping the hues that look like it (the teal accent has no teal series), and none of the first four reads as a status. `colors` overrides it.
+- **Text** is 12px at the normal text size and follows the text size setting; the font is inherited, and the axes make room for their labels again once a web font has loaded.
+- **The tooltip and the legend are React**: a series name, a category or a title with markup shows as written. The legend keeps the series order, and an item is a button that hides and shows its series (Enter and Space work).
+- **`children`** takes Recharts elements drawn inside the chart, after the ones it builds, for what a chart has no prop for.
+
+```tsx
+import { ReferenceLine } from 'recharts';
+
+<LineAreaChart series={series} categories={hours} yTitle="CPU usage (%)">
+  <ReferenceLine y={80} stroke="var(--color-status-warn)" strokeDasharray="6 4" />
+</LineAreaChart>;
+```
+
+`children` reads the chart's data and axes, so a `y` is in the units of the series. Add `recharts` to your app at the version this package depends on (`3.10.1`): two copies of Recharts do not share a chart's context, and the elements would not find it. Pass CSS variables for colors (`var(--color-status-warn)`) and they follow the theme.
+
+Animation is short (500 ms) and off under `prefers-reduced-motion`. A chart fills the width it is given and never widens its parent (`width` caps it).
+
 ## Use
 
 ```tsx
-import { LineAreaChart, RealtimeChart, useChartTheme } from '@sckyzo/cosmos-charts';
+import { LineAreaChart } from '@sckyzo/cosmos-charts';
 
 <LineAreaChart
   series={[{ name: 'CPU', data: [12, 19, 23, 31, 22, 18, 25] }]}
@@ -24,29 +48,90 @@ import { LineAreaChart, RealtimeChart, useChartTheme } from '@sckyzo/cosmos-char
 />;
 ```
 
-The included `useChartTheme()` hook adapts ApexCharts grid + axis tokens and the brand color to the current Cosmos theme and accent: it subscribes to the theme class (`dark` and `deep-blue` render dark charts) and `data-accent` on `<html>`, and reads `--color-brand-500` and the gray scale from the CSS. `COSMOS_BRAND` is the default blue; use `useChartTheme().brand` to follow the accent. `brandScale` is a sequential scale of five brand steps, low to high (pale to deep in light themes, dark to bright in dark ones), and `surface` the card background; `HeatmapChart` uses both.
+The default palette is eight categorical colors, the accent first and then hues apart from each other (cyan, violet, pink, slate, orange, teal, lime): green, amber and red are kept out of the first four places so that series never read as statuses, and treemap tiles take their color from their name. A chart whose series are statuses passes the status colors as `colors`: `['var(--color-success-500)', 'var(--color-warning-500)', 'var(--color-error-500)']`, or `--color-status-warn` and `--color-status-crit` for the monitoring statuses. Without the theme CSS, the charts fall back to the hex values of `COSMOS_PALETTE`; `COSMOS_BRAND` is the default blue, and `readableOn(color)` picks the white or black text that reads on a `#rrggbb` color.
+
+Most charts take `colors`, which overrides the Cosmos palette, and `formatValue`, which formats the values in their labels and tooltips (a unit, a precision). `formatValue` can be any function: a new one on every render redraws nothing. The gauges (`GradientRadial`, `SemiCircleGauge`, `StrokedGauge`) also take `min` and `max` (default 0 and 100), a `color` for the arc (the accent by default; on `GradientRadial` the color the arc starts from), and show a percent unless given a `formatValue`. A gauge is an image named by its label and value (`ariaLabel` replaces the label in the name). `SemiCircleGauge` keeps the accent unless given `warnAt` or `critAt`, in the units of the value, which color its arc by status: the theme's success color below `warnAt`, its warning color from `warnAt` and its critical color from `critAt` (`color` replaces either). It also takes `showRange`, which writes `min` and `max` under the ends of its arc, and its `height` (a number of pixels, 120 by default) is the most it takes: the arc is as wide as its box allows, up to that height. It draws a mark across its arc at `target` (a value on the scale of `min` and `max`, stopped at an end when out of range), and the target joins its name after the value (`Load: 67%, target 80%`).
+
+The charts with a horizontal and a vertical axis (`LineAreaChart`, `BarChart`, `MixedChart`, `HeatmapChart`, `BoxPlotChart`, `RangeBarChart`, `RealtimeChart`, `ScatterChart`, `BubbleChart` and `WaterfallChart`) take `xTitle`, drawn under the horizontal axis, and `yTitle`, drawn beside the vertical one, as plain text: a horizontal `BarChart` puts its values on the horizontal axis. `MixedChart` also takes `yRightTitle` for its second axis. Its series are `column`, `line` or `area` (a filled line, behind the columns), and `stackedColumns` piles the columns on each other, apart on each axis. `RealtimeChart` only has an x axis with `showTimeAxis`.
+
+`LineAreaChart`, `BarChart`, `MixedChart`, `ScatterChart`, `BubbleChart`, `BoxPlotChart` and `RangeBarChart` take `referenceLines` and `referenceBands`: `{ value, label?, intent?, dashed? }` draws a line across the plot at a value of the value axis, `{ from, to, label?, intent? }` shades the plot between two values, behind the series. The value axis is the vertical one, the horizontal one on horizontal bars and boxes, and the time axis of `RangeBarChart` (the values are timestamps in milliseconds); `MixedChart` reads its left axis, or its right one when no series is on the left. `intent` (`neutral`, the default, `warning`, `danger` or `success`) picks the color from the theme, so a theme switch repaints it; a label is plain text that follows the text size. A mark outside the data makes the axis reach it. For a diagonal line, a vertical one or anything else, `children` takes a Recharts `ReferenceLine`.
+
+`LineAreaChart` draws an area under each line; `variant="line"` draws the lines alone, `stacked` piles the series on each other, `markers` puts a dot on every point, and a series can take `style: 'dashed'` or `'step'` (a line that jumps from one value to the next) in place of the smooth curve.
+
+`BarChart` colors each bar from its value with `colorByValue(value, index)` (a threshold, a ranking; `undefined` keeps the series color), gives each category a color of the palette with `distributed`, and draws the bars below zero in `negativeColor`; that is the order of precedence, and the tooltip chip of a bar follows the bar.
+
+`Sparkline` draws an `area` (default), a `line` or `bar` columns; the bar scale starts at zero (the lower of 0 and the lowest value, unless `min` is set) and the values below zero hang under a dashed zero line in the danger color. It takes `label` and `formatValue` for its tooltip, and `min` and `max` to pin its scale: it fits its own data otherwise, so sparklines read against each other (the rows of a table) share the same two. In a KPI tile, pass it to the `chart` slot of `KpiCard` (`@sckyzo/cosmos-react`): `<KpiCard label="Requests/s" value="2.3k" chart={<Sparkline data={data} />} />`. The two packages do not depend on each other, so the chart is yours to pass.
+
+`RealtimeChart` takes `min` and `max` for its y axis (0 and 100 by default), `showTimeAxis` to label the x axis with the time of each sample, and `warnLabel` and `critLabel` to rename the threshold labels.
+
+`TreemapChart` writes the value of each tile under its name when given `showValues`, and draws its group headers in the card's colors. Its tiles take the text color that reads on them (white or black). `children` are drawn over the tiles, in the chart's own SVG space.
+
+`HeatmapChart` is a grid of rounded cells, not a Recharts chart, so it takes no `children`. Its default scale is five steps of the accent mixed over the card, each told apart from the next and the lowest still a cell of its own on a dark card; `colors` replaces the steps and `ranges` sets thresholds with their own colors (a value on a bound shared by two ranges takes the later one). The grid is one tab stop: the arrow keys move between cells and show the tooltip of the cell they land on, Home and End go to the ends of the row, Ctrl+Home and Ctrl+End to the ends of the grid. Each cell is named `row, column: value` for screen readers.
+
+`CalendarChart` is a day-by-day heatmap built on the same grid, so it takes no `children` either. `data` is `{ day: 'YYYY-MM-DD', value }[]` (a day listed twice adds up, a day with no entry is empty), `from` and `to` bound the days shown. The `calendar` layout draws one block per year, with the months named above their first full week and Mon / Wed / Fri beside the rows; `range` draws one continuous grid, with larger cells when it is short. Weeks start on Monday, or on Sunday with `weekStart={0}`; `locale` names the months, weekdays and dates. Days are read and drawn in UTC. The scale is the neutral track for a day with nothing, then four steps of the accent (the dark themes use lower shares and a light accent for the top one) splitting `(0, max]` evenly, with a "Less … More" key under the grid, right-aligned with it (`lessLabel` and `moreLabel` replace the words). A grid wider than its box scrolls inside it, the weekday names staying in view. The title and the total are the host's. Keyboard as `HeatmapChart`, one tab stop per year block.
+
+`BumpChart` draws how a ranking changes over periods: `series` is `{ name, data: { x, rank }[] }[]`, 1 is the top, and the periods are every `x` once in the order they first appear. A series that enters late has no point before it enters, and ties are allowed (tied series are drawn apart around their rank). Each name is written at both ends of its line with its color, so there is no legend; on a narrow chart (under 560px) only the right-hand names stay, cut short, and where the periods get too close for the discs the points become dots. `points` is `rank` (default, a disc with the rank in it) or `dot`. A pointer over a line, a point or a name, or the arrows Up and Down on the keyboard (Escape lets go), gives that series a thicker line and fades the others. The tooltip, which Left and Right walk period by period, gives the period, the rank and the change from the previous period in words (`unchanged vs May`, `up 2 vs Apr`, `down 1 vs Mar`, `new entry`), never by color alone. `formatValue` formats the rank in the tooltip, and `children` takes Recharts elements, where a `y` is a rank.
+
+`FunnelChart` draws one centred bar per stage, as wide as its value against the largest stage (the first, unless a stage grows), joined to the next by a translucent flow. The stages keep the order given and are never sorted: a stage larger than the one before it is allowed, and shows a rate over 100%. The names sit on the left; on the right, the value, a chip with the rate from the previous stage (`65.4%`, `100%` for the first) and, beside it, the rate from the first (`20.5% of Visits`); `showConversion={false}` leaves the values alone. The accent fades from the first stage to the last, and `colors` gives one color per stage instead. `formatValue` formats the values, percentages always have one decimal. In a box under 520px wide each name and value go on one line above their bar, and the rate from the first stage stays in the tooltip. Like `HeatmapChart` it is HTML and SVG, not a Recharts chart, so it takes no `children`: the flow joins two bars at their own edges, which a Recharts bar can't be drawn to do. It is one tab stop: the arrow keys, Home and End walk the stages and show the tooltip of the one they land on. Stages that are all at 0 draw `emptyMessage`.
+
+`WaterfallChart` walks a running total through gains and losses: `data` is `{ label, value?, kind? }[]`. A step (the default `kind`) carries a signed `value` and floats between the total before and after it; a `subtotal` is drawn from 0 to the running total at that point (never the sum since the last cut); a `total` is drawn the same way, and a `value` on it sets the running total to it, which is how an opening balance, or a known balance mid-walk, is written. A step without a `value` counts as 0. Increases take the theme's success color, decreases its error color and totals the accent (subtotals the same, lighter); `colors: { positive, negative, total }` overrides them. The color is never alone: the value above a bar and the tooltip carry the sign (`+310k`, `−265k`, with a real minus; `formatValue` gets the magnitude) and the kind in words (Increase, Decrease, Subtotal, Total), and the tooltip of a step adds the running total after it. `showLabels` forces the values above the bars on or off (by default they show with 12 bars or fewer in a chart at least 480px wide), `showConnectors` (default on) draws the dashed line from the top of a bar to the next one. Below 480px the category names tilt. It takes `xTitle`, `yTitle` and `children`.
+
+`WorldMap` colors the countries of a world map by value: `data` is `{ FR: 16400, US: 48200 }`, keyed by ISO 3166-1 alpha-2 code in upper case, and `geography` is a TopoJSON `Topology` with a `countries` object. The package ships no map data: you pass `world-atlas` (ISC), and the `110m` file is enough for a dashboard card (105 kB, 39 kB gzipped; `countries-50m.json` draws the small countries too). Antarctica is left out, and a code the map does not hold is not drawn.
+
+```tsx
+import { WorldMap } from '@sckyzo/cosmos-charts';
+import type { Topology } from 'topojson-specification';
+import world from 'world-atlas/countries-110m.json';
+
+// An imported JSON file is typed as plain strings: the cast says it is a Topology.
+<WorldMap
+  data={{ FR: 16400, US: 48200, DE: 21300 }}
+  geography={world as unknown as Topology}
+  label="visitors"
+  formatValue={(value) => `${(value / 1000).toFixed(1)}k`}
+/>;
+```
+
+The scale has five steps of the accent, cut by quantiles of the values so that each holds about as many countries (a linear scale lets one large country wash the others out); a country without a value is gray. `min` and `max` clamp every value before the steps are cut, so a value over `max` counts as `max`: they pin the ends of the scale, and the legend starts at `min`. The legend gives the lower bound of each step (`2.7k+`, through `formatValue`) and a "No data" swatch; `showLegend={false}` hides it. It is its own SVG, so it takes no `children`, and a map with no value (an empty `data`, or no code the map holds) draws the bare map, with no legend and no `emptyMessage`. The map scales with the width it is given and keeps its proportions (about 2:1) unless `height` is set. It is one tab stop: the arrow keys walk the countries that have a value, largest first (Home and End go to the largest and the smallest), the one in focus is outlined and shows its card, and `onSelect(code)` is called by a click, or by Enter or Space on the country in focus. For screen readers the map is an image named by `ariaLabel`, and a visually hidden table (country, value, largest first) lists the data. `geography` needs `@types/topojson-specification` for its type, installed with the package.
+
+`RadarChart` draws its polygons as large as its box allows and leaves the scale (0, 20 … 100) off them unless given `showScale`. `DonutChart` writes the total in the middle, and the value and name of the slice under the pointer in its place (`centerValue` and `centerLabel` replace the sum and "Total"; `variant="pie"` fills the disc and writes nothing in it; `legendValues` adds each slice's value and its share, in whole percents that add up to 100, to the legend, in columns when the legend is on a side); `RadialBarChart` does the same with the average and the ring.
+
+The charts that draw a legend take `legendPosition` (`top`, `right`, `bottom` or `left`): the legend sits above the plot by default, below the donut on `DonutChart`.
+
+A chart with no series, or only empty ones, draws `emptyMessage` (default `No data`, an empty string for nothing) in place of the plot. The gauges, which always have a value, and `RealtimeChart`, which fills its own window, have no such prop.
+
+For what a chart has no prop for, every chart but `HeatmapChart`, `CalendarChart`, `FunnelChart` and `WorldMap` takes `children` (see above).
+
+Every chart takes an `ariaLabel`, the name screen readers read for it. Without one, the chart is named from its type and its series. Tab reaches a chart, and the arrow keys move from point to point and announce each one: ArrowRight goes to the next point, ArrowLeft to the previous one, and on a chart with its categories on the vertical axis (a horizontal `BarChart` or `BoxPlotChart`, `RangeBarChart`) ArrowDown and ArrowRight go to the next category and ArrowUp and ArrowLeft to the previous one. The gauges and `Sparkline` show a single value or a trend: they are named images, out of the tab order.
 
 ## Charts shipped
 
-| Chart                             | Notes                                                  |
-| --------------------------------- | ------------------------------------------------------ |
-| `BarChart`                        | Vertical or horizontal bars                            |
-| `RangeBarChart`                   | Time ranges per row on a datetime axis (timeline)      |
-| `MixedChart`                      | Columns and lines on one chart, optional second y axis |
-| `LineAreaChart`                   | Smooth area + gradient fill                            |
-| `RealtimeChart`                   | Live updates with WARN/CRIT threshold annotations      |
-| `RadialBarChart`                  | Multi-series radial gauge                              |
-| `GradientRadial`                  | Single gradient radial                                 |
-| `SemiCircleGauge`                 | Half-donut gauge                                       |
-| `StrokedGauge`                    | Dashed-stroke radial                                   |
-| `DonutChart` / `DonutRightLegend` | Donut with bottom or right legend                      |
-| `Sparkline` / `SparklineGroup`    | Mini sparklines + KPI grid                             |
-| `TreemapChart`                    | Repartition treemap                                    |
-| `HeatmapChart`                    | Rows × columns colored by value buckets or ranges      |
-| `RadarChart`                      | One polygon per series over named axes                 |
-| `ScatterChart` / `BubbleChart`    | Numeric x/y points; bubble size as a 3rd measure       |
-| `BoxPlotChart`                    | Min/quartiles/max boxes, vertical or horizontal        |
+| Chart                          | Notes                                                         |
+| ------------------------------ | ------------------------------------------------------------- |
+| `BarChart`                     | Vertical or horizontal bars, grouped or stacked               |
+| `RangeBarChart`                | Time ranges per row on a time axis (timeline)                 |
+| `MixedChart`                   | Columns and lines, optional second y axis                     |
+| `LineAreaChart`                | Smooth area + gradient fill, legend when 2+ series            |
+| `RealtimeChart`                | Live updates with WARN/CRIT threshold lines                   |
+| `RadialBarChart`               | Multi-series radial gauge                                     |
+| `GradientRadial`               | Single gradient radial                                        |
+| `SemiCircleGauge`              | Half-donut gauge                                              |
+| `StrokedGauge`                 | Dashed-stroke radial                                          |
+| `DonutChart`                   | Donut, legend below by default                                |
+| `Sparkline`                    | Mini line, area or bar trend, no axes                         |
+| `TreemapChart`                 | Repartition treemap                                           |
+| `HeatmapChart`                 | Rows × columns colored by value buckets or ranges (HTML grid) |
+| `CalendarChart`                | Day-by-day heatmap over a year or any range (HTML grid)       |
+| `BumpChart`                    | Rankings over periods, names at both ends (Recharts)          |
+| `RadarChart`                   | One polygon per series over named axes                        |
+| `ScatterChart` / `BubbleChart` | Numeric x/y points; bubble size as a 3rd measure              |
+| `BoxPlotChart`                 | Min/quartiles/max boxes, vertical or horizontal               |
+| `FunnelChart`                  | Centred bars joined by a flow, with the conversion per stage  |
+| `WaterfallChart`               | Running total through gains, losses, subtotals and totals     |
+| `WorldMap`                     | Countries colored by value in five quantile steps (own SVG)   |
 
 ## License
 
 MIT — see [LICENSE](../../LICENSE).
+
+The charts are drawn with [Recharts](https://github.com/recharts/recharts) (MIT), which pulls in modules of [d3](https://d3js.org/) (ISC, and BSD-3-Clause for `d3-ease`). `WorldMap` also uses [d3-geo](https://github.com/d3/d3-geo) (ISC) and [topojson-client](https://github.com/topojson/topojson-client) (ISC). Their licenses apply to the code they ship. `d3-geo` ships ES modules only, so the CommonJS build carries it inside `WorldMap.cjs`, with the `d3-array` and `internmap` it pulls; `THIRD_PARTY_NOTICES.md` holds their licenses.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,81 @@
+# Third-party notices
+
+The CommonJS build of `@sckyzo/cosmos-charts` (`dist/*.cjs`) bundles the code of the packages below:
+`d3-geo` ships ES modules only, so `WorldMap.cjs` carries it, with the `d3-array` and `internmap` it
+pulls, rather than requiring it. The ES module build (`dist/*.js`) imports `d3-geo` as a dependency
+and bundles none of them. Their licences follow, as each package ships them.
+
+## d3-geo 3.1.1
+
+```text
+Copyright 2010-2024 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+
+This license applies to GeographicLib, versions 1.12 and later.
+
+Copyright 2008-2012 Charles Karney
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```
+
+## d3-array 3.2.4
+
+```text
+Copyright 2010-2023 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+```
+
+## internmap 2.0.3
+
+```text
+Copyright 2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+```

package/dist/BarChart.cjs

@@ -0,0 +1,137 @@
+"use client";
+'use strict';
+
+var chunkGVTMZYOM_cjs = require('./chunk-GVTMZYOM.cjs');
+var chunkF2PMFYJ5_cjs = require('./chunk-F2PMFYJ5.cjs');
+var chunkZ4LZFMDH_cjs = require('./chunk-Z4LZFMDH.cjs');
+var chunk6BKLL7LZ_cjs = require('./chunk-6BKLL7LZ.cjs');
+var chunkGZRMVE4X_cjs = require('./chunk-GZRMVE4X.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BarChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  stacked = false,
+  colors,
+  formatValue,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  borderRadius = 4,
+  colorByValue,
+  distributed = false,
+  negativeColor,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = chunkGZRMVE4X_cjs.useHiddenSeries();
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const categoryKeys = chunkF2PMFYJ5_cjs.useCategoryKeys(orientation === "horizontal" ? "vertical" : "horizontal");
+  const name = ariaLabel ?? `Bar chart: ${series.map((s) => s.name).join(", ")}`;
+  if (chunkK3R7JGOW_cjs.hasNoData(series)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const horizontal = orientation === "horizontal";
+  const layout = horizontal ? "vertical" : "horizontal";
+  const fillFor = colorByValue || negativeColor !== void 0 || distributed ? (value, index) => colorByValue?.(value, index) ?? (negativeColor !== void 0 && value < 0 ? negativeColor : distributed ? chunkLT3UC65O_cjs.seriesColor(index, colors) : void 0) : void 0;
+  const shown = series.map((_, i) => chunkK3R7JGOW_cjs.seriesKey(i)).filter((key) => !hidden.hidden.has(key));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.BarChart,
+    {
+      ref: categoryKeys,
+      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name }),
+      data: chunkK3R7JGOW_cjs.toRows(categories, series),
+      layout,
+      stackOffset: "sign",
+      margin: { top: 4, right: 8, bottom: 0, left: 0 },
+      barGap: 4,
+      barCategoryGap: "22%",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.CartesianGrid,
+          {
+            ...chunkRLHGPHC7_cjs.GRID_PROPS,
+            ...horizontal ? { horizontal: false, vertical: true } : {}
+          }
+        ),
+        horizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", tickFormatter: formatValue, ...axis, ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "category",
+              dataKey: "category",
+              width: "auto",
+              tickFormatter: chunk6BKLL7LZ_cjs.trimLabel,
+              ...axis,
+              ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: "category",
+              ...axis,
+              ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle),
+              ...chunk6BKLL7LZ_cjs.categoryAxis(categories, xTitle)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle) })
+        ] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkGZRMVE4X_cjs.legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.ChartTooltip, { format: formatValue, colorOf: fillFor }),
+            cursor: { fill: chunkLT3UC65O_cjs.BORDER, fillOpacity: 0.35, radius: 8 },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, i) => {
+          const key = chunkK3R7JGOW_cjs.seriesKey(i);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Bar,
+            {
+              name: s.name,
+              dataKey: key,
+              fill: chunkLT3UC65O_cjs.seriesColor(i, colors),
+              stackId: stacked ? "stack" : void 0,
+              maxBarSize: 44,
+              shape: chunkGVTMZYOM_cjs.roundedBarShape({
+                layout,
+                radius: borderRadius,
+                dataKey: key,
+                isOuter: stacked ? chunkGVTMZYOM_cjs.isOuterInStack(shown, key) : void 0,
+                fillFor
+              }),
+              hide: hidden.hidden.has(key),
+              ...chunkTYQWZR3S_cjs.ANIMATION
+            },
+            key
+          );
+        }),
+        chunkZ4LZFMDH_cjs.referenceMarks({ referenceLines, referenceBands, axis: horizontal ? "x" : "y" }),
+        children
+      ]
+    }
+  );
+};
+
+exports.BarChart = BarChart;
+//# sourceMappingURL=BarChart.cjs.map
+//# sourceMappingURL=BarChart.cjs.map

package/dist/BarChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BarChart.tsx"],"names":["useHiddenSeries","useAxis","useCategoryKeys","hasNoData","ChartEmpty","seriesColor","seriesKey","jsxs","RechartsBarChart","frameProps","toRows","jsx","CartesianGrid","GRID_PROPS","Fragment","XAxis","xAxisTitle","YAxis","trimLabel","yAxisTitle","categoryAxis","Legend","legendProps","Tooltip","ChartTooltip","BORDER","Bar","roundedBarShape","isOuterInStack","ANIMATION","referenceMarks"],"mappings":"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","file":"BarChart.cjs","sourcesContent":["import {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Legend,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { GRID_PROPS, useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { categoryAxis, trimLabel } from './core/categoryAxis';\nimport { useCategoryKeys } from './core/categoryKeys';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey, toRows } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { referenceMarks } from './core/reference';\nimport { isOuterInStack, roundedBarShape } from './core/roundedBar';\nimport type {\n  ChartAxisTitleProps,\n  ChartEmptyProps,\n  ChartLegendProps,\n  ChartProps,\n  ChartReferenceProps,\n} from './types';\n\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\nexport type BarChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartAxisTitleProps &\n  ChartReferenceProps & {\n    series: { name: string; data: number[] }[];\n    categories: (string | number)[];\n    /** `vertical` (default) draws bars upward; `horizontal` draws them rightward. */\n    orientation?: BarChartOrientation;\n    /** Stack multi-series bars instead of grouping them side-by-side. */\n    stacked?: boolean;\n    /** Override the default Cosmos palette. */\n    colors?: string[];\n    /** Format the numeric axis labels and the tooltip values. */\n    formatValue?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n    /** Radius, in px, of the end of a bar away from the axis; only the outer end of a stack is rounded. Default 4. */\n    borderRadius?: number;\n    /**\n     * The color of a bar from its value and the index of its category, for a threshold or a\n     * ranking. Return `undefined` to keep the color the other rules give. Applies to every\n     * series; the tooltip chip of a bar follows it, the legend keeps the series color.\n     */\n    colorByValue?: (value: number, index: number) => string | undefined;\n    /** One palette color per category (`colors` cycles), instead of one per series. For a single series. */\n    distributed?: boolean;\n    /** The color of the bars below zero, for diverging bars. `colorByValue` wins over it. */\n    negativeColor?: string;\n  };\n\nexport const BarChart = ({\n  series,\n  categories,\n  orientation = 'vertical',\n  stacked = false,\n  colors,\n  formatValue,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  showLegend,\n  legendPosition = 'top',\n  borderRadius = 4,\n  colorByValue,\n  distributed = false,\n  negativeColor,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: BarChartProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  // Recharts names the layout after the axis the categories sit on.\n  const categoryKeys = useCategoryKeys(orientation === 'horizontal' ? 'vertical' : 'horizontal');\n  const name = ariaLabel ?? `Bar chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  const horizontal = orientation === 'horizontal';\n  // Recharts names the layout after the axis the categories sit on.\n  const layout = horizontal ? 'vertical' : 'horizontal';\n  // A bar's own color, in order of precedence: colorByValue, negativeColor, distributed.\n  const fillFor =\n    colorByValue || negativeColor !== undefined || distributed\n      ? (value: number, index: number) =>\n          colorByValue?.(value, index) ??\n          (negativeColor !== undefined && value < 0\n            ? negativeColor\n            : distributed\n              ? seriesColor(index, colors)\n              : undefined)\n      : undefined;\n  const shown = series.map((_, i) => seriesKey(i)).filter((key) => !hidden.hidden.has(key));\n  return (\n    <RechartsBarChart\n      ref={categoryKeys}\n      {...frameProps({ height, width, ariaLabel: name })}\n      data={toRows(categories, series)}\n      layout={layout}\n      // Stacks of both signs: the negative values stack down from zero, apart from the positive ones.\n      stackOffset=\"sign\"\n      margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n      barGap={4}\n      barCategoryGap=\"22%\"\n    >\n      <CartesianGrid\n        {...GRID_PROPS}\n        {...(horizontal ? { horizontal: false, vertical: true } : {})}\n      />\n      {horizontal ? (\n        <>\n          <XAxis type=\"number\" tickFormatter={formatValue} {...axis} {...xAxisTitle(xTitle)} />\n          <YAxis\n            type=\"category\"\n            dataKey=\"category\"\n            width=\"auto\"\n            tickFormatter={trimLabel}\n            {...axis}\n            {...yAxisTitle(yTitle)}\n          />\n        </>\n      ) : (\n        <>\n          <XAxis\n            dataKey=\"category\"\n            {...axis}\n            {...xAxisTitle(xTitle)}\n            {...categoryAxis(categories, xTitle)}\n          />\n          <YAxis width=\"auto\" tickFormatter={formatValue} {...axis} {...yAxisTitle(yTitle)} />\n        </>\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={<ChartTooltip format={formatValue} colorOf={fillFor} />}\n        cursor={{ fill: BORDER, fillOpacity: 0.35, radius: 8 }}\n        animationDuration={150}\n      />\n      {series.map((s, i) => {\n        const key = seriesKey(i);\n        return (\n          <Bar\n            key={key}\n            name={s.name}\n            dataKey={key}\n            fill={seriesColor(i, colors)}\n            stackId={stacked ? 'stack' : undefined}\n            maxBarSize={44}\n            shape={roundedBarShape({\n              layout,\n              radius: borderRadius,\n              dataKey: key,\n              isOuter: stacked ? isOuterInStack(shown, key) : undefined,\n              fillFor,\n            })}\n            hide={hidden.hidden.has(key)}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands, axis: horizontal ? 'x' : 'y' })}\n      {children}\n    </RechartsBarChart>\n  );\n};\n"]}