[Bug]: full data point is not passed to the DonutChart tooltip customHTML callback, unlike the other chart types

[mthaak]

Contact Details

No response

What happened?

Currently, only the (truncated) label and value is passed into the customHTML callback of the donut chart options. This makes it hard to find the original data point that the tooltip belongs to. Especially because a label might be truncated if it's too long, and thus may have become non-unique. Confusingly, the donut chart has a default truncation set on the tooltip so as developer you might not even be aware that the label passed to the customHTML callback can be non-unique.

In order to disable the truncation you need to set this on the donut chart options:

  const options: DonutChartOptions = { 
    tooltip: {
      truncation: {
        type: TruncationTypes.NONE,
      },
    }
  }

It would be very helpful if this caveat was documented somewhere.

This is the information that's currently passed to DonutChartOption's customHTML:

  const options: DonutChartOptions = { 
    tooltip: {
      customHTML: (
        datum: {
          label: string;
          value: string;
        }[]
      ) => {
        // do stuff with (truncated) label and value
      },
    },
  };

(also the value becomes a number if truncation is turned off, that was also a bit unexpected)

It would be better if the full data point was passed just like with the other charts:

  const options: BarChartOptions = { 
    tooltip: {
      customHTML: (data: ChartData) => {
        // do stuff with the full data point (of type `ChartData`)
      },
    },
  };

because then you wouldn't need to worry about truncation.

See how in the sandbox screen the label printed to the console is truncated:

Version

@carbon/charts-react@0.57.0 but it also happens on the latest version

Data & options used

See above...

Relevant log output

No response

Codesandbox example

https://codesandbox.io/s/stupefied-fermi-0sj2nm?file=/src/index.js