Dynamic fill Color for Bar with Positive Negative Referenced Chart

[jiaulislam]

I have a Bar Chart with Reference line set up. Where it shows both Positive and Negative values. I'm trying to set the Negative value Chart to be red. Below is given the Chart component. How do I set Negative Bar red for below component.

const BarChart: FC<BarChartProps> = ({ data, option }) => {
  const getFillColor = (value: number): string => {
    return value >= 0 ? BarColors.green : BarColors.red;
  };

  return (
    <ResponsiveContainer height={option?.height ?? 300} width="100%">
      <RechartsBarChart
        data={data}
        margin={{
          top: 5,
          right: 5,
          left: 5,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray={"3 3"} stroke={CARTESIAN_GRID_COLOR} />
        <XAxis
          dataKey={option.dataKey}
          angle={-30}
          textAnchor="end"
          height={70}
          tick={{ stroke: TICK_COLOR, strokeOpacity: 0.1, fontSize: 12 }}
          tickLine={true}
        />
        <YAxis
          dataKey={option.valueKey}
          tick={{ stroke: TICK_COLOR, strokeOpacity: 0.1, fontSize: 12 }}
          tickFormatter={(value) => numberToMillionsString(value as number)}
        />
        <Tooltip />
        <ReferenceLine y={0} stroke="#C9C9C9" />
        <Bar
          dataKey={option.valueKey}
          fill={BarColors.green}
          legendType="line"
          barSize={15}
          label={option?.barLabel ? <CustomizedLabel /> : ""}
          activeBar={<Rectangle fill={option.fill} stroke={option.stroke} />}
        />
      </RechartsBarChart>
    </ResponsiveContainer>
  );
};

Dataset

[
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-08T00:00:00",
      amount: 54986205.27,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-11T00:00:00",
      amount: 112165360.8,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-12T00:00:00",
      amount: -137279159.09,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-13T00:00:00",
      amount: 39016691.88,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-14T00:00:00",
      amount: 177878345.84,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-15T00:00:00",
      amount: -72075913.51,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-18T00:00:00",
      amount: 11179814.27,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-21T00:00:00",
      amount: 223179814.27,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-24T00:00:00",
      amount: 23279814.27,
    },
    {
      branchCode: null,
      branchName: null,
      tradingDate: "2024-02-27T00:00:00",
      amount: 32879814.27,
    },
  ]

[ckifer]

you can use the Cell component within Bar to change the color based off of your data.

Similar to this example except without the custom Bar
https://recharts.org/en-US/examples/CustomShapeBarChart

      <Bar dataKey={option.valueKey}>
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={entry[option.valueKey] < 0 ? 'red' : 'green'} />
        ))}
      </Bar>

[Yyana22]

cell makes one color for each track, but I want to customize my background background.

[Yyana22]

[Yyana22]

//
< Bar dataKey='value' minPointSize={2} shape={renderCustomHistogramBar} width={24}>
{colors.map(color => (
< Cell key={color[0]} fill={color[1]} />
))}
</ Bar >

so far it has turned out that way, but this is located behind the main line, and I need it to occupy 100% of the height

[ckifer]

You can do something like this in your custom shape

      <Bar
        dataKey="pv"
        stackId="a"
        fill="#8884d8"
        shape={(props) => {
          const bg = props.background;
          console.log(props);
          return (
            <>
              <Rectangle
                fill={"gray"}
                opacity={0.5}
                height={-bg.height + props.height}
                width={props.width}
                x={props.x}
                y={props.y}
              />
              <Rectangle {...props} />
            </>
          );
        }}
      />

[ckifer]