Missing tick formatters for Dash Mantine charts

Dash Python
1

Some Dash Mantine charts, e.g. the line chart, take a valueFormatter argument. This argument is a JavaScript function that takes y-axis tick and tooltip values and returns formatted strings. As far as I can tell, there is no equivalent for x-axis tick values.

The equivalent Recharts props seem to be XAxis -> tickFormatter and YAxis -> tickFormatter. I tried to pass xAxisProps = {"tickFormatter": "() => 'test'"} and xAxisProps = {"tickFormatter": {"function": "myFormattingFunction"}} but this does not seem to be supported.

Is it possible to format x and y tick labels independently? If not, is this on the DMC road map, or is this a problem with Mantine charts?

Note that I can not format my data before passing it to the chart constructor (I am using a BarChart wich orientation=vertical and I need to format the labels on the vertical axis without changing the tooltip content).

2

Hi @Niklas_Kappel

the xAxisProps does accept functions. Below is an example.

If you post a minimal example of what you are trying to do, I might be able to assist you better.

import dash_mantine_components as dmc
from dash import Dash

app = Dash()

data = [
    {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200},
    {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400},
    {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200},
    {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800},
    {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200},
    {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000}
]
component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    orientation="vertical",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    xAxisProps={"tickFormatter": {"function": "myTickFormatter"}}
)
app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

In a .js file in /assets


var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.myTickFormatter = (value) => {
  return  '$' + value;
};

image
image1232×694 20.1 KB

3

Ooops, I was on an older version of DMC. Thank you!