Skip to content

Multiple charts using ContinuousColorsLegendSvg share the same legend color scale #2686

@palatinus-sb

Description

@palatinus-sb

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:

  1. Create a project with 2 or more Heatmap charts
  2. Pass them the required props along with 1 legend for each chart
  3. Define differing colors for each chart
  4. 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
Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions