react-charts icon indicating copy to clipboard operation
react-charts copied to clipboard

Feature request: Access original datum values from axis formatters

Open bmaupin opened this issue 4 years ago • 1 comments

The tooltip by default seems to show the secondary datum value (the value of the y-axis). In my case, I'm making a bump chart, so the secondary value is an integer representing the ranking (1, 2, 3, etc), but on the tooltip I'd like to show the underlying data.

The closest thing I've found is the tooltip formatter function in the secondary axis options:

  const secondaryAxes = React.useMemo((): AxisOptions<SeriesPoint>[] => [
    {
      formatters: {
        tooltip: (value: number) => {
          return value;
        },

But it only takes as a value the secondary value. I added an extra property to each datum in the chart data to show in the tooltip, but I haven't figured out how I can actually access that property in the tooltip.

Thanks!

bmaupin avatar Dec 16 '21 19:12 bmaupin

As I mentioned, I had added a separate tooltip value to each datum. I was able to work around this by setting a state variable in onFocusDatum:

          onFocusDatum: (datum) => {
            if (datum) {
              setFocusedDatumTooltip(datum.originalDatum.tooltip);
            }

And then returning that value in the axis tooltip formatter:

        formatters: {
          tooltip: () => {
            return focusedDatumTooltip;
          },

It would still be nice to be able to receive the entire datum in the tooltip formatter and not just the secondary value.

Thanks!

bmaupin avatar Jan 03 '22 19:01 bmaupin