BarChart.js
1.36 KB
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
41
42
import React, { memo } from "react";
import { BarChart, Bar, ResponsiveContainer, LabelList, XAxis, YAxis, Cell } from 'recharts';
import { useTranslation, Trans } from 'react-i18next';
const renderCustomizedLabel = (props) => {
const {
x, y, width, height, name, fill
} = props;
return (
<text x={20} y={y + 35} fill={"#fff"} offset={15} height={55} textAnchor="start">
{(name < 900)?name+"*":name}
</text>
);
};
const CBVBars = ({ data }) => {
const { t } = useTranslation();
return (
<>
<ResponsiveContainer width={'100%'} >
<BarChart layout="vertical" data={ data } height={600}>
<XAxis type="number" dataKey="value" axisLine={false} tick={false} />
<YAxis dataKey="name" type="category" axisLine={false} tick={false}/>
<Bar dataKey="value">
{
data.map((entry, index) => (
<Cell x={0} height={55} key={`cell-${index}`} fill={(index % 2 == 0)?"#706B88":"#453E61"} />
))
}
<LabelList dataKey="name" content={renderCustomizedLabel} />
</Bar>
</BarChart>
</ResponsiveContainer>
<small> {t("one-term-only")}</small>
</>
)
}
export default memo(CBVBars);