recharts 3.8.0

npm / recharts / 3.8.0 source ↗

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 https://github.com/recharts/recharts/pull/6960
• Annotations: export getRelativeCoordinate helper function by @PavelVanecek in https://github.com/recharts/recharts/pull/6942
• Legend: Add label style prop in Legend by @devoldemar in https://github.com/recharts/recharts/pull/7012
• XAxis/YAxis: new niceTIcks prop - specify 'none' | 'auto' | 'equidistant' | 'nice' for different behaviors by @MaxGhenis in https://github.com/recharts/recharts/pull/7009
• General: Add event throttling controls to chart props by @PavelVanecek in https://github.com/recharts/recharts/pull/6924

Fix

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

Types

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

Docs

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

New Contributors

• @gVguy made their first contribution in https://github.com/recharts/recharts/pull/6958
• @SvetlanaVesna made their first contribution in https://github.com/recharts/recharts/pull/6969
• @VIDHITTS made their first contribution in https://github.com/recharts/recharts/pull/6971
• @2YH02 made their first contribution in https://github.com/recharts/recharts/pull/6977
• @MaxGhenis made their first contribution in https://github.com/recharts/recharts/pull/7011
• @mixelburg made their first contribution in https://github.com/recharts/recharts/pull/7026
• @roy7 made their first contribution in https://github.com/recharts/recharts/pull/7022
• @devoldemar made their first contribution in https://github.com/recharts/recharts/pull/7012
• @MendyLanda made their first contribution in https://github.com/recharts/recharts/pull/6800
• @pierreeurope made their first contribution in https://github.com/recharts/recharts/pull/7028
• @haritamar made their first contribution in https://github.com/recharts/recharts/pull/7068

Full Changelog: https://github.com/recharts/recharts/compare/v3.7.0...v3.8.0