[charts] Allow to have specific labels in legends/tooltip

[youngmoon715]

Summary

Just like xAxis or yAxis, legend should also accept valueFormatter. Currently, I'm having to use a hack to use the slots for the legends to render a different legend label

Examples

import {ChartsLegend} from '@mui/x-charts';
import type {ChartsLegendProps} from '@mui/x-charts/ChartsLegend';

interface CustomLegendProps extends ChartsLegendProps {
  series: any;
  seriesToDisplay: any[];
}

const CustomLegend = ({
  seriesToDisplay,
  series,
  ...restProps
}: CustomLegendProps) => {
  const newSeriesToDisplay = seriesToDisplay?.map((item) => ({
    ...item,
    label: item.label === 'Duration' ? 'Duration (HH:MM:SS)' : item.label,
  }));
  const newSeries = Object.keys(series?.bar?.series).reduce(
    (acc, key) => {
      if (series?.bar?.series[key].label === 'Duration') {
        acc.bar.series[key].label = 'Duration (HH:MM:SS)';
      }
      return acc;
    },
    {...series} as any,
  );
  return (
    <ChartsLegend
      {...restProps}
      seriesToDisplay={newSeriesToDisplay}
      series={newSeries}
    />
  );
};

export default CustomLegend;

Motivation

make MUI more customizable.

Search keywords: custom, valueFormatter, legends, chart, charts, x-chart
Order ID: 81516

[alexfauquette]

Is it about valueFormatter or is it about having multiple label options? Because the legend does not show any value for now.

I was considering having following series properties:

• label
• labelTooltip
• labelLegend

[youngmoon715]

Its being able to change the label that's displayed on the legend and the axis.
For example, on my Y Axis, i want it to say Duration
but for the legends, I want it to say Duration (HH:MM:SS)

I was considering having following series properties:

• label
• labelTooltip
• labelLegend

Those suggestions sound great. Would love the flexibility on the Tooltips as well.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@youngmoon715: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.