Conditional color fill in BarChart

[namakshenas]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/charts

What framework do you use?

Other, I will specify in the bug description

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Hi,

I'm trying to reproduce a similar bar chart like the following figure (the entry with status: efficient is colored with orange and status: inefficient with green)

Here is the dataset:

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" }
]

And here is working code via recharts:

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;

So, I'm wondering it is possible to create the above chart using @mantine/charts?

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Yes, it is possible, you can change colors of bars multipe ways:

• https://mantine.dev/charts/bar-chart/#waterfall-bar-chart
• With barProps callback function