Using Custom React) components (with hooks in Echarts tooltips

Question

I am currently implementing a scatter plot using echarts. And I would like to use an i18n function which is using formatNumber from the intl lib.

The problem is that I don't know if I need to write a custom function that displays this tooltip outside of my chart or If there is any way I can get this to work using echart options.

This is my approach. Its a testing function using a custom tile (no hooks). It works fine if I only have that. As soon as I try to format a number using formatNumberWithUnit which uses <FormattedNumber/>from react-intl, (using useIntl hook from intl).

formatter: (params: Record<string, any>, ...other) => {
  return renderToString(
    <div>
      <TileWithHeading headerContent={"test"}>
        {formatNumberWithUnit(0.05, "kw")}
      </TileWithHeading>
    </div>
  );
},

It doesn't work, which is kinda clear to me why. I just don't know If and how I can fix this?

EDIT: this is the documentation for the formatter function https://echarts.apache.org/en/option.html#tooltip.formatter

this would fix it, but I would like to avoid this if possible.

formatter: (params: Record<string, any>, ...other) => {
        return renderToString(
          <div>
            <TileWithHeading headerContent={"test"}>
              <IntlProvider locale={"de"}>
                {formatNumberWithUnit(0.05, "kw")}
              </IntlProvider>
            </TileWithHeading>
          </div>
        );
      }

Answer 1

I think this is an acceptable solution? It seems to work fine and I don't need to handle locale again,...

  const intl = useIntl();

...some code ....
 formatter: (params: Record<string, any>, ...other) => {
        const formattedNumber = formatNumber1(0.05, "kw");
        return renderToString(
          <RawIntlProvider value={intl}>
            <div>
              <TileWithHeading headerContent={"test"}>
                {formattedNumber}
              </TileWithHeading>
            </div>
          </RawIntlProvider>
        );
      },