File size: 1,949 Bytes
e7185a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import React from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend,Label,CartesianGrid ,ResponsiveContainer } from "recharts";
export default function WER_GenderChart({graphData,title,labelY,xAxis,yAxis,angle,bMargin,height,colorStroke,colorFill}) {
const data = graphData;
console.log(graphData,);
let margins = { top: 30, right: 20, left: 0, bottom: bMargin }
return (
<div style={{ width: "100%", height: height, background: "white", borderRadius: "15px", padding: "10px", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",margin:"auto" }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data} margin={margins}>
<text x="50%" y="10" textAnchor="middle" dominantBaseline="middle" fontSize="18" fontWeight="bold" fill="#333">
{title}
</text>
<CartesianGrid strokeDasharray="3 3" stroke="lightgray" />
{/* X-Axis with dark-colored labels */}
<XAxis dataKey={xAxis} tick={{ fontSize: 14, fill: "#333", fontWeight: "bold" }} interval={0} angle={angle} textAnchor="end">
{/* <Label value="Gender" offset={0} position="insideBottom" /> */}
</XAxis>
{/* Y-Axis with dark-colored labels */}
<YAxis tick={{ fontSize: 14, fill: "#333", fontWeight: "bold" }} >
{/* <Label value={labelY} offset={-10} angle={-90} position="left" /> */}
</YAxis>
{/* <Tooltip /> */}
<Tooltip
contentStyle={{ backgroundColor: "#f75e5e", color: "#fff", borderRadius: "8px", border: "1px solid #da0000" }}
itemStyle={{ color: "#fff" }}
/>
{/* <Legend /> */}
{/* <CartesianGrid stroke="#ccc" strokeDasharray="5 5" /> */}
<Bar dataKey={yAxis} fill={colorFill} stroke={colorStroke} barSize={50} radius={[5, 5, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
);
}
|