Question about DMC charts

Dash Python
1

I created a bar chart which works really nicely, but can’t get the tickFormatter to work. The labels/tooltips are always in large numbers, without any commas (preferably, I’d like to show k’s/m’s if the numbers are large.

Any suggestions? Thanks!

image
image1765×317 2.38 KB

2

Hey @odedloe87 does this help?

4

Sorry, I mentioned in the topic that I’m using dmc (Dash Mantine Components) for the bar chart but didn’t explain it well in the content of the message. I love plotly and if tooltips was my only issue I would definetely go with that (I control it well), but I the animation at startup is crucial for me and works really nice with dmc.

Thanks for your help!

5

OK, I did not even know about charting in DMC.

It seems this is using the recharts library. If you go to the docs page, you have an example for a bar chart:

https://recharts.org/en-US/examples/SimpleBarChart

You can add a custom function for the formatting of the ticks (just edit the code on the right and hit run):

const tickFormatter = (tick) => {
  if (tick >= 1000) {
    return `${tick / 1000}k`;
  }
  return tick;
};

and then use it in the y- axis:

import React, { PureComponent } from 'react';
import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

export default class Example extends PureComponent {
  static demoUrl = 'https://codesandbox.io/p/sandbox/simple-bar-chart-72d7y5';

  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis tickFormatter={tickFormatter} />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
          <Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />
        </BarChart>
      </ResponsiveContainer>
    );
  }
}

Not sure how you can implement this in DMC.

Maybe there are even pre- defined formatters within recharts.

6

Can you provide sample code for your chart?

I don’t know how that looks like, but maybe you can do something like this for the corresponding axis:

"tickFormatter": lambda tick: f"{tick / 1000:.0f}k" if tick >= 1000 else tick}
7

@odedloe87

It’s not possible to use functions as props in DMC yet. However it is on the roadmap.

If you need this feature, it’s best to stick with Plotly charts for now.

1 Like