What's Changed

We added generics to our data and dataKey props and now you can have your charts validated by TypeScript. See the full guide here: https://recharts.github.io/en-US/guide/typescript/

We are releasing new helper functions and hooks that will allow you to precisely target mouse interactions, and convert coordinates. See the guide here: https://recharts.github.io/en-US/guide/coordinateSystems/

And new functions and hooks:

getRelativeCoordinate - converts mouse events to pixel positions

Convert Data → Pixels:

useXAxisScale - returns a function to convert X data values to pixel positions
useYAxisScale - returns a function to convert Y data values to pixel positions
useCartesianScale - convenience hook for converting both at once

Pixels → Data:

useXAxisInverseScale - returns a function to convert pixel X to the closest data value
useYAxisInverseScale - returns a function to convert pixel Y to the closest data value
useXAxisInverseTickSnapScale - returns a function to convert pixel X to the closest axis tick
useYAxisInverseTickSnapScale - returns a function to convert pixel Y to the closest axis tick

Accessing Ticks:

useXAxisTicks - returns the calculated ticks of an X-axis
useYAxisTicks - returns the calculated ticks of a Y-axis

Feat

• Hooks: New hooks (see above) by @PavelVanecek in #6960
• Annotations: export getRelativeCoordinate helper function by @PavelVanecek in #6942
• Legend: Add label style prop in Legend by @devoldemar in #7012
• XAxis/YAxis: new niceTIcks prop - specify 'none' | 'auto' | 'equidistant' | 'nice' for different behaviors by @MaxGhenis in #7009
• General: Add event throttling controls to chart props by @PavelVanecek in #6924

Fix

• Pie: fix: enable tooltip synchronization for PieChart by @VIDHITTS in #6989
• Pie: fix: sync pie tooltip/legend color with per-sector fill by @2YH02 in #6977
• Bar: Fix activeBar highlighting with missing/null data by @Copilot in #7001
• Bar: Support Bar CSS transitions by @PavelVanecek in #6920
• XAxis/YAxis: respect user-provided textAnchor prop on XAxis/YAxis by @pierreeurope in #7028
• Tooltip: Close tooltip on blur by @gVguy in #6958
• General: fix error when onMouseEnter/Leave={undefined} by @SvetlanaVesna in #6969
• Animation: [animations] auto disable primitives animations based on user system preferences by @cloud-walker in #6956
• Animation/Line: fix: prevent animated line flicker with round/square strokeLinecap by @roy7 in #7022
• Performance: filter zero-dimension rectangles early by @MendyLanda in #6800
• Bump minimum @reduxjs/toolkit to 1.9.0 by @Copilot in #6934

Types

• Bar: Add generics to Bar by @PavelVanecek in #7015
• RadialBar: shape type and selector stability by @PavelVanecek in #6917
• LabelList/Area: Enhance type definitions for LabelList and Area components by @PavelVanecek in #6936
• Pie Fix Pie event handlers type by @PavelVanecek in #6944
• Pie/RadialBar: Fix event types for Pie and RadialBar by @PavelVanecek in #6965
• PolarAngleAxis: Fix PolarAngleAxis event types, add tests for remaining components by @PavelVanecek in #7000
• Tooltip: payload type from any by @PavelVanecek in #6925
• XAxis/YAxis: update event types for XAxis and YAxis, add type tests by @PavelVanecek in #7004
• General: Add external generics to Area by @PavelVanecek in #6993
• General: Add optional explicit generics to graphical items and charts by @PavelVanecek in #7035
• General: New feature - typed charts helper by @PavelVanecek in #7071
• General: Fix mouse event type by @PavelVanecek in #6939

Docs

• Add tests, documentation, and website example for Treemap nesting (#4… by @VIDHITTS in #6971
• docs: add computeWaterfallData utility for waterfall charts by @MaxGhenis in #7011
• docs: add ErrorBar dataPointFormatter storybook examples by @mixelburg in #7026
• [dark mode] line chart examples by @cloud-walker in #6916
• fix(storybook): use flat dataset for Simple and WithTooltip Treemap stories (#6364) by @Harikrushn9118 in #7072
• docs: Dark mode homepage by @cloud-walker in #7063

New Contributors

• @gVguy made their first contribution in #6958
• @SvetlanaVesna made their first contribution in #6969
• @VIDHITTS made their first contribution in #6971
• @2YH02 made their first contribution in #6977
• @MaxGhenis made their first contribution in #7011
• @mixelburg made their first contribution in #7026
• @roy7 made their first contribution in #7022
• @devoldemar made their first contribution in #7012
• @MendyLanda made their first contribution in #6800
• @pierreeurope made their first contribution in #7028
• @haritamar made their first contribution in #7068

Full Changelog: v3.7.0...v3.8.0

What's Changed

📢 Cell is now deprecated and will be removed in the next major version. Please migrate all Cell usage to use the shape prop of respective chart elements. ‼️

Feat

New Hooks

• useIsTooltipActive: returns if the tooltip is active by @PavelVanecek in #6880
• useActiveTooltipCoordinate: returns current tooltip coordinate by @PavelVanecek in #6880

Other

• Tooltip: allow offset prop to accept Coordinate object by @bigsaigon333 in #6868
  X/YAxis add new axis type: "auto" by @PavelVanecek in #6823
  • sets the type to "category" for categorical axes, and "number" for numeric axis.
• X/YAxis: replace tick: any with explicit type by @PavelVanecek in #6911
• Bar/TypeScript: add BarShapeProps type to fix Bar.shape type by @PavelVanecek in #6900
• TypeScript: add missing useful type exports for content, shape functions, etc. @PavelVanecek in #6852

Fix

• BarChart: fix stackOffset=sign for charts with 3 or more positive values in one series by @PavelVanecek in #6807
• BarStack: fix circular dependency when building with vite by @jkr2255 in #6777
• BarStack: fix BarStack clipPath in charts with stackOffset=sign by @PavelVanecek in #6806
• BarStack: apply bar stack radius to active bars by @PavelVanecek in #6906

Chore

• Enabled strict tsconfig by @PavelVanecek in #6842

Docs

We've started auto-generating our docs for the most part so you should see large improvements in accuracy of the docs between the code, the website, and the storybook. Huge shoutout to @PavelVanecek 🚀

• Dark mode 🕶️ by @cloud-walker in #6828
  • Thanks @cloud-walker
• Recharts devtools has been added to all website examples for easier issue debugging

New Contributors

• @jkr2255 made their first contribution in #6777
• @cloud-walker made their first contribution in #6824
• @bigsaigon333 made their first contribution in #6868
• @huangkevin-apr made their first contribution in #6872

Full Changelog: v3.6.0...v3.7.0

What's Changed

3.6 🚀 - check out BarStack and ranged stacked bars 📊

Feat

• BarStack: new component BarStack by @PavelVanecek in #6746
  • allows configuring settings for the whole stack of bars such as radius
• Bar: enable ranged stacked bars by @PavelVanecek in #6722
• Pie/Typescript: Export PieSectorShapeProps type for shape function by @ramanverse in #6706
  XAxis/YAxis: Implement 'equidistantPreserveEnd' interval option for XAxis and YAxis (#6642) by @Om-Mishra09 in #6661
• Tooltip: Add graphicalItemId to tooltip payload object by @PavelVanecek in #6765
• TypeScript: Export TooltipIndex, BarRectangleItem, TreemapNode, DataKey, AxisInterval from public API by @Copilot in #6676

Fix

• Scatter: fix bug where Tooltip payload data was duplicated or contained unrelated items when using multiple Scatter elements in one ScatterChart by @PavelVanecek in #6773
• Label/LabelList: Fix crash when Label is passed as content to LabelList by @Harikrushn9118 in #6732
• General: Round numbers before putting them to DOM by @PavelVanecek in #6707
• General: Store refs instead of IDs to unblock shadow DOM usecases by @PavelVanecek in #6753

Chore

• CartesianAxis: Deprecate CartesianAxis @PavelVanecek in #6774
• Bump to Node 24
• Lots of undefined checks for progress towards TS strict mode

Docs

• Docs should be improving on the daily - comments in code + storybook + the website should all be coming closer to in sync thanks to @PavelVanecek pretty much writing his own documentation generator 🤖 🚀

New Contributors

• @Om-Mishra09 made their first contribution in #6661
• @taro-yanagiya made their first contribution in #6708
• @ramanverse made their first contribution in #6706
• @Advikkhandelwal made their first contribution in #6714
• @Harikrushn9118 made their first contribution in #6732
• @milanchahar made their first contribution in #6739

Full Changelog: v3.5.1...v3.6.0

What's Changed

Fix

• Pie: add missing Sector index to Pie shape prop by @ckifer in #6683
  • This enables customization of specific slices of the Pie similar to activeIndex in 2.x
• Pie: prevent cross-Pie highlighting in multi-Pie PieCharts with shared dataKeys by @shreedharbhat98 in #6678
  • Only marks a specific Sector as active when that sector is hovered
• TypeScript/Tooltip: update activeLabel type to be a string | number by @ckifer in #6691
  • !! NOTE !!: This change may break your types if you relied on it as a string, but this is a bug fix
• Accessibility/General: add tabIndex -1 on Recharts ZIndex svg portal g tags to prevent extraneous focusable surfaces by @ckifer in #6687
• General: Removed accidental eslint dependency from main dependencies which should remove it from installation with recharts

New Contributors

• @Ashish-rajput999 made their first contribution in #6694

Full Changelog: v3.5.0...v3.5.1

What's Changed

Mostly fixes and performance improvements this release but check out the deprecation of Pie active/inactiveShape in favor of aligning with the shape prop of other chart elements.

Feat

• Pie: add shape to align custom Pie sector shapes to other Recharts components by @ckifer in #6482
  • This change deprecates activeShape and inactiveShape. Please use the isActive prop passed from the callback to shape to create active Pie sectors.
  • Note: forgot to include the current Sector index, will add in 3.5.1
• Stacked Charts: implement reverseStackOrder prop in v3 - fixes a regression between recharts 2 and 3 by @j-shimizu111 in #6644
• Typescript/Dot: export ActiveDotProps and DotItemDotProps types by @simaks in #6657

Fix

• Performance Improvements! https://recharts.github.io/en-US/guide/performance/
  • • Optimize SetTooltipEntrySettings to break infinite rendering loop by @PavelVanecek in #6616
  • Various performance improvements by @PavelVanecek in #6634
  • Some more performance improvements by @PavelVanecek in #6654
• Line: fix animation when interrupted with non-data related changes by @PavelVanecek in #6641
• Line/Area: fix active dot appearing outside graph by @cameronm-orion in #6612
• Legend: a Legend with a portal no longer adjusts the margin of the chart (which left an empty space) by @ckifer in #6609
• ErrorBar: remove duplicate key warning when error range has same values by @bas0N in #6660
• PolarAngleAxis: prevent overlapping "0" and "360" ticks by @PavelVanecek in #6611
• Typescript/Area: add specific type to Area.label instead of any by @PavelVanecek in #6621
• General: disable immutable check in production, removes console warnings by @tngwoerleij in #6619

Docs

• Add guide for performant charts by @PavelVanecek in #6659
  • https://recharts.github.io/en-US/guide/performance/ please follow the guide for best results
• @PavelVanecek fixed and updated a lot of our documentation on both the storybook and website 📖 🚀

New Contributors (thanks everyone!)

• @Parth10P made their first contribution in #6623
• @j-shimizu111 made their first contribution in #6644
• @tngwoerleij made their first contribution in #6619
• @bas0N made their first contribution in #6660
• @cameronm-orion made their first contribution in #6612
• @simaks made their first contribution in #6657

Full Changelog: v3.4.1...v3.4.2

What's Changed

Forgot some exports for Z Index in 3.4

• export DefaultZIndexes and ZIndexLayer by @ckifer in #6599

Full Changelog: v3.4.0...v3.4.1

What's Changed

Added z-index support across most recharts surfaces + a few other features, lots of fixes, and some doc updates 🚀

Feat

• Z Index! - You can now add a z index to many chart components to order the position of recharts elements as you wish, mimicking CSS z-index. Big shout out to @PavelVanecek in #6479
  • See the guide page - https://recharts.github.io/en-US/guide/zIndex/
• Line: add shape property to allow for custom shape implementations by @tarik02 in #6512
• Stacked Bar: improved stacked bar animations
• Sankey: support for left-aligned Sankey nodes via the align prop by @dbnl-renaud in #6568
• Sankey: support for top-aligned Sankey nodes via the verticalAlign prop by @dbnl-kat #6576
• Label: allow overwriting the textAnchor prop by @PavelVanecek in #6547

Fix

• Stacked Bar / Brush: fix bug in stacked bar charts with a brush where the brush would remove elements from the wrong side of the chart by @37108 in #6481
• Area: fix regression in Area event handlers where the events were not firing correctly by @PavelVanecek in #6507
• Funnel: fix Funnel margin calculations by @PavelVanecek in #6453
• Funnel: fix label position issues from previous release by @PavelVanecek in #6473
• Label/Text: correct Label and Text types to only what they can actually render by @PavelVanecek in #6467
• Misc: inline a few es-toolkit functions that were causing build errors by @daiboom in #6543
• Misc: remove circular dependency import that had potential to cause runtime errors by @ckifer in #6581

Chore

• Finished adding strict null checks and enabled strictNulls in TSConfig for good 🚀
  • by @PavelVanecek in #6497

Docs

Lots of changes in recharts.github.io

• Switch code editor to codemirror by @PavelVanecek in #6531
• Added/removed missing/stale properties where applicable from storybook and website
• Few layout/visual changes and fixes on the website
• Much more

New Contributors

• @37108 made their first contribution in #6481
• @tarik02 made their first contribution in #6512
• @dbnl-renaud made their first contribution in #6568
• @coderabbitai[bot] made their first contribution in #6538
• @dbnl-kat made their first contribution in #6576

Full Changelog: v3.3.0...v3.4.0

What's Changed

Feat

• ResponsiveContainer is now built-in to all charts by @PavelVanecek in #6388
  • add the responsive prop to any chart along with a height and width as if you were using ResponsiveContainer. One less component to wrap things with. ResponsiveContainer will continue to work for the life of 3.x

<BarChart data={data} responsive height={300} width="100%">
  ....
</BarChart>

Fix

• YAxis: Only use the YAxis width="auto" oscillation detection if the difference is > 1 pixel by @PavelVanecek in #6450
• ResponsiveContainer: only shrinks in the dimensions where it needs to shrink by @PavelVanecek in #6367
• Treemap: fix animation stutters in Treemap by @PavelVanecek in #6326
• Sankey: fix unique key error by @daiboom in #6352

Website changes - https://recharts.github.io/

• Recharts website is now inlined in recharts/www as opposed to https://github.com/recharts/recharts.org
• NEW recharts website URL at https://recharts.github.io/

Unfortunately the current contributors and admins do not own recharts.org and the renewal of the domain remains up in the air. To remove that uncertainty we have deployed the website at our github pages URL instead.

New Contributors

• @kristiandueholm made their first contribution in #6344
• @daiboom made their first contribution in #6352
• @vmizg made their first contribution in #6387

Full Changelog: v3.2.1...v3.3.0

What's Changed

Fix

• X/YAxis, etc.: reduce re-renders to fix blinking line in Zoom & Highlight example by @PavelVanecek in #6315
• Bar: Remove redundant Rectangle import, fixes tsup builds with recharts in them by @guscost in #6305
• Pie: fix PieLabel types by @PavelVanecek in #6313
• Brush: fix index off by one error when margin is 0 by @ckifer in #6323
• Enable dev tools via Global module instead of window by @uncaught in #6309

New Contributors

• @guscost made their first contribution in #6305

Full Changelog: v3.2.0...v3.2.1

What's Changed

Quite a bit of 3.0 bug fixes in this release along with two new hooks. Thanks to all who've been reporting issues!

Feat

• Pie: support string values in Pie outerRadius callbacks by @rephaelberkooz in #6191
• PolarGrid: add fill color support to by @mindtraveller in #6287

Hooks

• New : useXAxisDomain and useYAxisDomain hooks by @PavelVanecek in #6201
• New: useMargin hook by @PavelVanecek in #6224

Fix

• Bar: fix unnecessary line breaks in Bar labels by @eino in #6214
• Bar: improve Bar performance when activeBar is turned off by @PavelVanecek in #6290
• Stacked Bar/Area: fix stacked charts with duplicate categorical data by @PavelVanecek in #6194
• Scatter: fix exception when Scatter data has non-string type property by @PavelVanecek in #6248
• X/YAxis: fix blinking when changing props by @PavelVanecek in #6262
• PolarAngleAxis/Radar: fix polar angle axis ticks text positions by @mindtraveller in #6276
• Label: allow rendering Labels as nested children in XAxis, YAxis and Reference elements by @PavelVanecek in #6219
  LabelList: fix issue with LabelList not rendering in Pie charts by @PavelVanecek in #6246
• Text: fix exception when Text's children is empty and scaleToFit=true by @PavelVanecek in #6282
• Tooltip: bound Tooltip coordinates to the chart container in synchronized charts by @shreedharbhat98 in #6263
• Brush: allow brush travelers to be controlled by keys after mouse interaction by @ckifer in #6285
• useActiveTooltipDataPoints : fix infinite rendering loop by @PavelVanecek in #6247

Chore

• Upgrade to ESLint 9 by @NishargShah in #6284
• Add better storybook docs for Text component by @PavelVanecek in #6278
• Make Recharts Redux devTools registration opt-in (fixes #6250) by @uncaught in #6264
• Continued refactoring/improvements by @PavelVanecek 🚀

New Contributors (thanks everyone!)

• @rephaelberkooz made their first contribution in #6189
• @uncaught made their first contribution in #6264
• @mindtraveller made their first contribution in #6276
• @NishargShah made their first contribution in #6284

Full Changelog: v3.1.2...v3.1.3