@automattic/charts 4.1.1 → 4.2.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.2.0] - 2026-09-18
+### Added
+- Bar chart: Add a beside tooltip placement that flips only horizontally. [#52234]
+- Bar chart: Add an optional band highlight. [#52234]
+- Bar chart: Support individual data point colors. [#52234]
+- Heatmap: add `columnGroups` for labeled, gapped column runs, a `keyboardNavigation="calendar"` mode that steps by day, week and month, and `buildMonthCalendarHeatmapData` / `useMonthCalendarHeatmapData`, which draw a date-keyed map as one month calendar per month on a shared scale. The column-label row is omitted when no column has a label, the grid takes an `ariaLabel`, the keyboard selection scrolls into view, calendar labels stay Gregorian under any locale, and `CompleteChartTheme.heatmapChart` gains a required `groupGap`. [#52259]
+- Heatmap chart: Add `tooltipVariant="dark"`, which draws the tooltip on the package's dark tooltip surface, `tooltipStyle` for inline box overrides, and a `variant="bar"` legend that joins the scale steps into one continuous band. [#52368]
+
+### Changed
+- Update package dependencies. [#52187]
+- Update package dependencies. [#52401]
+
+### Fixed
+- Bar chart: Align grid lines with axis ticks (explicit or derived). [#52234]
+- Bar chart: Return focus to the chart after pressing Escape. [#52234]
+- Bar chart: Select the bar under the pointer for tooltips and pointer callbacks. [#52234]
+- Keep keyboard focus on the first or last data point when an arrow key reaches the end of a chart, return focus to the chart when Escape closes a tooltip, skip hidden series during bar chart keyboard navigation, stop a focused chart from swallowing keys it does not use such as Page Down, and close the tooltip when the series it describes is hidden. [#50140]
+
 ## [4.1.1] - 2026-09-15
 ### Changed
 - Update package dependencies. [#52297]
@@ -1071,6 +1089,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[4.2.0]: https://github.com/Automattic/charts/compare/v4.1.1...v4.2.0
 [4.1.1]: https://github.com/Automattic/charts/compare/v4.1.0...v4.1.1
 [4.1.0]: https://github.com/Automattic/charts/compare/v4.0.0...v4.1.0
 [4.0.0]: https://github.com/Automattic/charts/compare/v3.2.0...v4.0.0

package/TOKENS.md

@@ -64,7 +64,7 @@ Two colors are still resolved before visx sees them. `htmlLabel.color`, in `useX
 
 Being resolved in JS, both then carry the bridge's limitations rather than the CSS path's: they read at the scope element, so a role declared on the chart's own class moves the gridlines but leaves the crosshair at the catalog value, and neither repaints on a theme change until something re-renders.
 
-Where a value is *consumed* says nothing about where it is *set*. These are set the same way as every other color — `--a8c-charts-color-background`, `--a8c-charts-color-series-*` — and resolved through `getComputedStyle` against the chart's own scope element, never `document.documentElement`, so both delivery paths obey the same cascade. Each pointer carries a terminal literal (`var(--a8c-charts-color-background, #fff)`) as the last resort for SSR and jsdom, where `getComputedStyle` resolves nothing.
+Where a value is *consumed* says nothing about where it is *set*. These are set the same way as every other catalog color — `--a8c-charts-color-background`, `--a8c-charts-color-series-*` — and resolved through `getComputedStyle` against the chart's own scope element, never `document.documentElement`, so both delivery paths obey the same cascade. Each pointer carries a terminal literal (`var(--a8c-charts-color-background, #fff)`) as the last resort for SSR and jsdom, where `getComputedStyle` resolves nothing.
 
 The scope element is the wrapper a chart is rendered into, which sits **above** the element the chart's own `className` lands on, so a role declared on that inner element is invisible to the JS bridge. `.line-chart { --a8c-charts-color-background: red }` therefore does not reach the glyph strokes, while `.line-chart { --a8c-charts-color-grid: red }` does reach the gridlines — the CSS-painted roles read at the painted element, so any ancestor of it will do. Scope a rule for a JS-resolved role to a wrapper around the chart rather than to the chart itself. CHARTS-255 tracks closing the remainder.