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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import React from 'react';
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Cell
} from 'recharts';
import PropTypes from 'prop-types';
import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors';
import { data2 } from './sampleData';
const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]];
const getPath = (x, y, width, height) => (
`M${x},${y + height}
C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y}
C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height}
Z`
);
const TriangleBar = props => {
const {
fill,
x,
y,
width,
height
} = props;
return <path d={getPath(x, y, width, height)} stroke="none" fillOpacity="0.8" fill={fill} />;
};
TriangleBar.propTypes = {
x: PropTypes.number,
y: PropTypes.number,
fill: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
};
TriangleBar.defaultProps = {
x: 0,
y: 0,
fill: '#9f9f9f',
width: 0,
height: 0,
};
function BarCustom() {
return (
<BarChart
width={800}
height={450}
data={data2}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label={{ position: 'top' }}>
{
data2.map((entry, index) => (
<Cell key={`cell-${index.toString()}`} fill={colors[index % 20]} />
))
}
</Bar>
</BarChart>
);
}
export default BarCustom;
|
