Description
"@nivo/core": "0.88.0",
"@nivo/heatmap": "0.88.0",
Multiple charts using ContinuousColorsLegendSvg (like Heatmap) share the same legend color scale even if differing colors were passed to them as props.
To Reproduce
CodeSandbox showcasing the bug: https://codesandbox.io/p/sandbox/nivo-legends-bug-y6l5kd
Steps to reproduce the behavior:
- Create a project with 2 or more Heatmap charts
- Pass them the required props along with 1
legend for each chart
- Define differing
colors for each chart
- Notice that all charts share the same color scale for their legends
Expected behavior
Each chart's legend to inherit the chart's coloring and not share the same color scale.
Screenshots

Additional context
The bug appears to come from the non-unique id generation inside ContinuousColorsLegendSvg resulting in an id conflict inside the DOM.
|
const id = `ContinuousColorsLegendSvgGradient.${direction}.${colorStops |
Description
Multiple charts using ContinuousColorsLegendSvg (like Heatmap) share the same legend color scale even if differing colors were passed to them as props.
To Reproduce
CodeSandbox showcasing the bug: https://codesandbox.io/p/sandbox/nivo-legends-bug-y6l5kd
Steps to reproduce the behavior:
legendfor each chartcolorsfor each chartExpected behavior
Each chart's legend to inherit the chart's coloring and not share the same color scale.
Screenshots

Additional context
The bug appears to come from the non-unique
idgeneration inside ContinuousColorsLegendSvg resulting in an id conflict inside the DOM.nivo/packages/legends/src/svg/ContinuousColorsLegendSvg.tsx
Line 55 in af22689