react-chart
A simple React chart library
Contents:
Supports the following chart(s):
- Pie Chart
- Bar Chart
- Line/Area Chart
Pie Chart
Usage:
<PieChart data= name: "USA" amount: 04254 name:"Netherlands" amount: 02322 name:"South Africa" amount: 01716 name:"Maldives" amount: 0121 name:"Belgium" amount: 00498 legend=true size=400 donut=true donutThickness=06/>
Props:
Name | Description |
---|---|
data |
The data set, consisting of name , amount (value between 0 and 1) and an optional color (required) |
size |
The size of the chart in pixels (required) |
legend |
Whether or not to show the legend (optional) |
strokeColor |
The outline of a non-hovered segment (optional) |
hoverColor |
The outline of a hovered segment (optional) |
donut |
Show as a donut chart (optional) |
donutThickness |
Thickness of the donut chart as a percentage of the radius (optional) |
Bar Chart
Usage:
<BarChart data= name: "USA" amount: 101 name:"Netherlands" amount: 565 name:"South Africa" amount: 232555 name:"Maldives" amount: 3 name:"Belgium" amount: 4576 legend=true height=200/>
Props:
Name | Description |
---|---|
data |
The data set, consisting of name , amount and an optional color (required) |
height |
The max height of the chart in pixels (required) |
legend |
Whether or not to show the legend (optional) |
Line/Area Chart
Usage:
<LineChart data= name: "USA" points: 1511059710096 name:"Netherlands" points: 6551627535 name:"South Africa" points: 4232546723 name:"Belgium" points: 3246124823 name:"Maldives" points: 25125337 legend=true height=200 width=400 fillArea=false/>
Props:
Name | Description |
---|---|
data |
The data set, consisting of name , amount and an optional color (required) |
height |
The max height of the chart in pixels (required) |
width |
The max width of the chart in pixels (optional) |
legend |
Whether or not to show the legend (optional) |
fillArea |
Whether or not to use a fill chart (optional) |