Dash Mantine Component - Line Chart tooltip formatter

[waspp]

Hi,

I am trying define some ‘formatter’ to be displayed on my dmc.LineChart component on the tooltip level (and also the y-axis) but I don’t seem to find any way to currently do so. The recharts documentation says that you can set a ‘formatter’ function on the tooltip component level but this doesn’t seem to be accessible from the dmc component in Dash.

This seems like a pretty basic functionality on graphs, am I missing something or is this just not doable at the moment?

See my screenshot attached that display one example of a tooltip in my LineChart that I would like to format to something like : “241,203.9”.

Thanks everyone for the help in advance!

A

[mayaradaher]

Hi, @waspp.
You can try this:

Example:
df = pd.DataFrame(dict(
test = [1000, 3500]
))

fig = px.line(df, x=“test”, markers=True)
fig.show()

Replace {x:,} with the appropriate variable name (x, y, or z, etc.) to display its value.

fig.update_traces(hovertemplate=“%{x:,}”)
fig.show()

[AnnMarieW]

Hi @waspp and welcome to the Dash community

Typically Dash does not allow functions to be passed in props. There are certain libraries which have enabled this like dash-ag-grid. It’s on the roadmap to add this feature to dash-mantine-components, but it is not available yet.

[waspp]

Thank you for you solution using plotlyexpress. I wanted to use dmc chart library as I think they are way cleaner but seems like what I want is not achievable at the moment.

[waspp]

Hey @AnnMarieW, understood, thanks for the explanations, really appreciate it!

[mayaradaher]

@waspp

Thank you for you solution using plotlyexpress. I wanted to use dmc chart library as I think they are way cleaner but seems like what I want is not achievable at the moment.

I agree, dmc charts do look great. Hopefully they’ll add that feature in the future.