recharts 3.8.0

v3.8.0

on Node.js NPM

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