Custom scatterplot legend ignoring data value

[MasterOdin]

Describe/explain the bug

When passing in a custom multi-line legend to the ScatterPlotCanvas, the legend data is not being used properly, causing all ids to appear in each row, causing an overflow. I am using @nivo/scatterplot@0.79.1.

To Reproduce

Using the following legend data:

const legends = [
  {
    anchor: "bottom",
    data: [
      {
        color: "#3182EB",
        id: "population_1",
        label: "population_1"
      },
      {
        color: "#3182EB",
        id: "population_2",
        label: "population_2"
      },
      {
        color: "#3182EB",
        id: "population_3",
        label: "population_3"
      },
      {
        color: "#3182EB",
        id: "population_4",
        label: "population_4"
      },
      {
        color: "#3182EB",
        id: "population_5",
        label: "population_5"
      },
      {
        color: "#3182EB",
        id: "population_6",
        label: "population_6"
      },
      {
        color: "#3182EB",
        id: "population_7",
        label: "population_7"
      },
      {
        color: "#3182EB",
        id: "population_8",
        label: "population_8"
      }
    ],
    direction: "row",
    itemDirection: "right-to-left",
    itemHeight: 21,
    itemOpacity: 1,
    itemTextColor: "#000",
    itemWidth: 131,
    justify: false,
    symbolSize: 16,
    translateX: 0,
    translateY: 82
  },
  {
    anchor: "bottom",
    data: [
      {
        color: "#3182EB",
        id: "population_9",
        label: "population_9"
      },
      {
        color: "#3182EB",
        id: "population_10",
        label: "population_10"
      },
      {
        color: "#3182EB",
        id: "population_11",
        label: "population_11"
      },
      {
        color: "#3182EB",
        id: "population_12",
        label: "population_12"
      },
      {
        color: "#3182EB",
        id: "population_13",
        label: "population_13"
      }
    ],
    direction: "row",
    itemDirection: "right-to-left",
    itemHeight: 21,
    itemOpacity: 1,
    itemTextColor: "#000",
    itemWidth: 131,
    justify: false,
    symbolSize: 16,
    translateX: 0,
    translateY: 103
  }
];

Getting the following result in my app:

I tried to create a code sandbox for it, but I was getting a blank canvas / react errors consistently.

Expected behavior

Expected behavior would be that the legend only shows population_1 through population_8 on the first line, and then the remaining ids on the next row.

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 99

Additional context I was having a similar problem in bar charts, but upgrading to @nivo/bar@0.72.0 fixed it. Looking at the changelog, I think it was this commit https://github.com/plouc/nivo/commit/3f0bb4e205529ff0b7b542931e6515b3c99dd248 that did it?

[tkonopka]

I can reproduce the effect and can look into it

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!