How to add a custom tooltip to Recharts components?

[nogaini]

I have a CustomTooltip local component stored in assets/customtooltip.js. How can I include this tooltip inside a recharts component?

I tried this:

class CustomTooltip(rx.Component):
    library = "/public/customtooltip"

rx.recharts.line_chart(
                        rx.recharts.x_axis(data_key="name"),
                        rx.recharts.y_axis(),
                        CustomTooltip(),
                        rx.recharts.legend(),
                        data=State.data,
                    ) 

But this gives me the error:

ValueError: The component `LineChart` only allows the components: `XAxis`, `YAxis`, `ReferenceArea`, `ReferenceDot`, `ReferenceLine`, `Brush`, `CartesianGrid`, `Legend`, `GraphingTooltip`, `Line` as children. Got `CustomTooltip` instead.

[Manas1820]

Try using GraphingTooltip instead of CustomToolTip

[nogaini]

@Manas1820 The point is to use a custom tooltip for displaying stuff not currently possible with GraphingTooltip. :)

[latze123]

In this regard, passing the "formatter" parameter of GraphingTooltip would be amazing.

E.g., using formatter="{(value) => value && value.toLocaleString()}" or formatter="new Intl.NumberFormat('de-DE').format(value)"

I've tried both to no avail.