Chart legend not displaying values when they are nested

[fengye87]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.1

What package has an issue?

@mantine/charts

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

For the LineChart sample, if I nested data values one level deeper (see code below), the chart legend would not display value, while the chart lines would still be corrent.

export const data = [
  {
    date: "Mar 22",
    values: {
      Apples: 2890,
      Oranges: 2338,
      Tomatoes: 2452,
    },
  },
  ...
]

function Demo() {
  return (
    <LineChart
      ...
      series={[
        { name: "values.Apples", color: "indigo.6" },
        { name: "values.Oranges", color: "blue.6" },
        { name: "values.Tomatoes", color: "teal.6" },
      ]}
    />
  );
}

Since the chart lines could work fine with nested values, the legend should work fine too?

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[ID-JA]

I created these two functions to update the payload for both the ChartTooltip & ChartLegend components:

// ChartTooltip.tsx
function updateChartTooltipPayload(payload: Record<string, any>[]) : Record<string, any>[] {
  return payload.map((item) => {
    const newDataKey = item.name.split('.').pop();
    return {
      ...item,
      name: newDataKey,
    };
  });
}

// ChartLegend.tsx
function updateChartLegendPayload(payload: Record<string, any>[]) : Record<string, any>[] {
  return payload.map((item) => {
    const newDataKey = item.dataKey.split('.').pop();
    return {
      ...item,
      dataKey: newDataKey,
      payload: {
        ...item.payload,
        name: newDataKey,
        dataKey: newDataKey,
      },
    };
  });
}