[beta]: active axes tooltip formatter is applied to all series

[smeijer]

The active tooltip formatter is based on the serie below the pointer, instead of on the serie that should be formatted. Note that in the video below, all values are either prefixed with BAR or LINE, while I would expect that line series are prefixed with LINE, and bar series with BAR.

https://user-images.githubusercontent.com/1196524/128878875-0d02edaf-95f2-4069-a50d-ab52da240016.mp4

Relevant config:

  const { data, randomizeData } = useDemoConfig({
    series: 6,
    dataType: "time"
  });

  // @ts-ignore
  data.forEach((d, i) => (d.secondaryAxisId = i > 2 ? "2" : undefined));

  const primaryAxis = React.useMemo<
    AxisOptions<typeof data[number]["data"][number]>
  >(
    () => ({
      getValue: (datum) => (datum.primary as unknown) as Date
    }),
    []
  );

  const secondaryAxes = React.useMemo<
    AxisOptions<typeof data[number]["data"][number]>[]
  >(
    () => [
      {
        getValue: (datum) => datum.secondary,
        elementType: "bar",
        formatters: {
          tooltip: (value) => `BAR: ${value}`
        }
      },
      {
        id: "2",
        getValue: (datum) => datum.secondary,
        elementType: "line",
        formatters: {
          tooltip: (value) => `LINE: ${value}`
        }
      }
    ],
    []
  );

Repro based on the demo:

https://codesandbox.io/s/funny-edison-vsyv3?file=/src/MultipleAxes.tsx

[tannerlinsley]

Very helpful! I'll get this fixed.