How to have YAxis Tick Custom Value based on the Bar Data Sets #4268
Answered
by
ckifer
jiaulislam
asked this question in
Q&A
-
Beta Was this translation helpful? Give feedback.
Answered by
ckifer
Mar 7, 2024
Replies: 1 comment 7 replies
-
My react component is as below "use client";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
LabelList,
} from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
type StackChartPropType = {
title: string;
xDataKey: string;
dataKeyA: string;
dataKeyB: string;
data: any[];
};
interface CustomizedLabelProps {
x?: number;
y?: number;
fill?: string;
value?: number;
}
type Props = {
x: number;
y: number;
stroke: string;
payload: CustomizedLabelProps;
};
const CustomizedAxisTick = ({ x, y, stroke, payload }: Props) => {
return (
<g transform={`translate(${x},${y})`}>
<text
x={0}
y={0}
dy={16}
textAnchor="end"
fill="#666"
transform="rotate(-35)"
fontSize={12}
>
{payload.value}
</text>
</g>
);
};
const customLegendFormatter = (value: string) => {
return value.toUpperCase();
};
const StackBarChart = ({
title,
xDataKey,
dataKeyA,
dataKeyB,
data,
}: StackChartPropType) => {
const TICK_COLOR = "#C7C7C7";
return (
<Card className="bg-gradient-to-tl from-gray-50 to-slate-100">
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={260}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey={xDataKey}
angle={-30}
textAnchor="end"
height={70}
tick={<CustomizedAxisTick />}
tickLine={true}
/>
<YAxis
tick={{ stroke: TICK_COLOR, strokeOpacity: 0.1, fontSize: 12 }}
tickLine={true}
type="number"
// tickFormatter={(value) => `${value}%`}
// domain={[0, 100]}
/>
<Tooltip />
<Legend formatter={customLegendFormatter} />
<Bar dataKey={dataKeyA} stackId="a" fill="#8884d8">
<LabelList
dataKey={dataKeyA}
position="insideStart"
// formatter={(value: number) => `${value}%`}
/>
</Bar>
<Bar dataKey={dataKeyB} stackId="a" fill="#82ca9d">
<LabelList
dataKey={dataKeyB}
position="insideTop"
// formatter={(value: number) => `${value}%`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
);
};
export default StackBarChart; |
Beta Was this translation helpful? Give feedback.
7 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
here you go