2
React Decorative Charts
source link: https://davy.page/react-decorative-charts/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React decorative charts
Library for making decorative svg charts. Designed in order to emphasize the design of the app.
// with npm
npm i react-decorative-charts
// with yarn
yarn add react-decorative-charts
Examples
1
2
3
4
5
6
7
8
9
10
<DLineChart
data={[
{
points: [3, 7, 4, 6],
color: [107, 163, 237]
}
]}
width={200}
height={200}
/>1
2
3
4
5
6
7
8
9
10
11
<DLineChart
data={[
{
points: [23, 59, 4, 45, 21, 34, 89, 23, 12],
color: [235, 64, 52],
withSmoothing: false
}
]}
height={100}
width={200}
/>1
2
3
4
5
6
7
8
9
10
11
12
<DLineChart
data={[
{
points: [3, 7, 4, 6],
color: [91, 227, 54],
withDots: true,
withShadow: false,
}
]}
width={200}
height={200}
/>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<DLineChart
data={[
{
points: [24, 12, 10],
withDots: true,
color: [235, 64, 52]
},
{
points: [3, 7, 4, 8],
color: [91, 227, 54]
},
]}
width={200}
height={200}
/>1
2
3
4
5
6
<DBarChart
data={[43, 23, 65]}
width={200}
height={200}
color={[87, 63, 143]}
/>1
2
3
4
5
6
7
<DBarChart
data={[12, 34, 67, 32, 56, 98]}
width={200}
height={150}
color={[87, 63, 143]}
withGradient
/>1
2
3
4
5
6
<DPieChart
secondaryColor={[162, 235, 168]}
primaryColor={[112, 184, 118]}
data={68}
radius={100}
/>Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK