Dynamic fill Color for Bar with Positive Negative Referenced Chart #4278
Answered
by
ckifer
jiaulislam
asked this question in
Q&A
-
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 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>
);
};
[
{
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,
},
] |
Beta Was this translation helpful? Give feedback.
Answered by
ckifer
Mar 10, 2024
Replies: 1 comment 5 replies
-
you can use the Similar to this example except without the custom Bar <Bar dataKey={option.valueKey}>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry[option.valueKey] < 0 ? 'red' : 'green'} />
))}
</Bar> |
Beta Was this translation helpful? Give feedback.
5 replies
Answer selected by
ckifer
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
you can use the
Cell
component withinBar
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