Conditional color fill not supported in BarChart

[namakshenas]

Hi,

I'm trying to reproduce a similar bar chart like the following figure:

Here is the data:

data = [
    {"dmu": "dmu1", "Efficiency score": 100, "Status": "Efficient" },
    {"dmu": "dmu2", "Efficiency score": 78, "Status": "InEfficient" },
    {"dmu": "dmu3", "Efficiency score": 100, "Status": "Efficient" },
    {"dmu": "dmu4", "Efficiency score": 100, "Status": "Efficient" },
    {"dmu": "dmu5", "Efficiency score": 89, "Status": "InEfficient" },
    {"dmu": "dmu6", "Efficiency score": 95, "Status": "InEfficient" }
]

I ended up in the following piece of code (I'm getting errors):

html.Div(
    [
        dmc.BarChart(
            h=400,
            dataKey="dmu",
            data=data,
            xAxisProps={"padding": {"left": 5, "right": 5}},
            yAxisProps={"padding": {"top": 30, "buttom": 30}},
            gridAxis='y',
            tickLine=None,
            withLegend=True,
            unit="%",
            barProps={
                "radius": 5,
                "isAnimationActive": True,
            },
            orientation="vertical",
            series=[
                {"name": "Status", "color": "violet.6"},
            ],
        )
    ]
)

Tbh, I have no idea how to reproduce the above figure using barChart of dmc!

[AnnMarieW]

Hi @namakshenas
I'm no expert on recharts. Can you ask on the dmc or the mantine discord for a working rechart bar chart example, then I can verify that it works with dmc?

If this is a bug, (and an easy fix) I might be able to get it in the next release which I'm working on right now

[namakshenas]

Hi @AnnMarieW

Ok, I'll ask the question on DMC Discord, too. Thanks for reminding me.

Here is the working example using only recharts in JS:

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

const data = [
  { dmu: "dmu1", "Efficiency score": 100, Status: "Efficient" },
  { dmu: "dmu2", "Efficiency score": 78, Status: "InEfficient" },
  { dmu: "dmu3", "Efficiency score": 100, Status: "Efficient" },
  { dmu: "dmu4", "Efficiency score": 100, Status: "Efficient" },
  { dmu: "dmu5", "Efficiency score": 89, Status: "InEfficient" },
  { dmu: "dmu6", "Efficiency score": 95, Status: "InEfficient" },
];

const CustomBarChart = () => (
  <BarChart
    width={600}
    height={400}
    data={data}
    margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="dmu" />
    <YAxis />
    <Tooltip />

    {/* Custom Legend */}
    <Legend
      payload={[
        { value: "Efficient", type: "square", id: "ID01", color: "#FFA500" }, // Orange for Efficient
        { value: "InEfficient", type: "square", id: "ID02", color: "#32CD32" }, // Green for InEfficient
      ]}
    />

    <Bar dataKey="Efficiency score">
      {data.map((entry, index) => (
        <Cell
          key={`cell-${index}`}
          fill={entry.Status === "Efficient" ? "#FFA500" : "#32CD32"} // Orange for Efficient, Green for InEfficient
        />
      ))}
    </Bar>
  </BarChart>
);

export default CustomBarChart;

(At this moment a horizontal or vertical bar chart is not important for me)

So let me rephrase my question: Can you reproduce the above chart using the current capabilities of the DMC?

[AnnMarieW]

That's helpful - in dash, you can't pass functions as props, so it's knot possible to do something like this in dmc right now:

 fill={entry.Status === "Efficient" ? "#FFA500" : "#32CD32"} // Orange for Efficient, Green for InEfficient

There are some workarounds for this, but it will be a big change and might take a while. It's on the wish list here #356

[namakshenas]

Hi @AnnMarieW

I tried different settings and finally found the solution with the current capabilities of the DMC:

First I changed the dataset into this by adding a color item:

data = [
    {"dmu": "dmu1", "Efficiency score": 100,
        "Status": "Efficient", "color": "#32CD32"},
    {"dmu": "dmu2", "Efficiency score": 78,
        "Status": "InEfficient", "color": "#FFA500"},
    {"dmu": "dmu3", "Efficiency score": 100,
        "Status": "Efficient", "color": "#32CD32"},
    {"dmu": "dmu4", "Efficiency score": 100,
        "Status": "Efficient", "color": "#32CD32"},
    {"dmu": "dmu5", "Efficiency score": 89,
        "Status": "InEfficient", "color": "#FFA500"},
    {"dmu": "dmu6", "Efficiency score": 95,
        "Status": "InEfficient", "color": "#FFA500"},
]

Then, I removed the color property from the series. Next, I passed the payload item on to legendProps for legend customization.

html.Div(
    [

        dmc.BarChart(
            h=400,
            dataKey="dmu",
            data=data,
            xAxisProps={"padding": {"left": 5, "right": 5}},
            yAxisProps={"padding": {"top": 30, "buttom": 30}},
            gridAxis='y',
            tickLine=None,
            withLegend=True,
            legendProps={"payload":
                            [
                             {"dataKey": "Efficient", "type": "square",
                                 "id": "ID01", "color": "#32CD32"},
                             {"dataKey": "InEfficient", "type": "square",
                                 "id": "ID02", "color": "#FFA500"},
                         ],
                         },
            unit="%",
            barProps={
                "radius": 5,
                "isAnimationActive": True,
            },
            orientation="vertical",
            series=[
                {"name": "Efficiency score"},
            ],
        )
    ],
)

[AnnMarieW]

@namakshenas Thanks for posting the solution! 🎉