Charts are very important for data visualization. You can use it on Data Science. There are a lot of chart types such as pie, tunnel, line charts, etc. By using these, the predicting of future data situation is probably and you can also understand and analysis data. In this blog, I will show the chart library named graphjs-core which I have still developed. You can also join us to develop the library.
Note: The library has been being developed and currently there are bar, tunnel and bar charts.
Installation
Follow the instructions to install GraphJS-React
npm install graphjs-react
Usage
Add GraphJS-React CSS file to your index.js.
import 'graphjs-react/index.css'
Bar Chart
You can create basic bar chart by using this library.
<BarChart
height={400}
onBarClick={() => {}}
data={[
{
color: 'rgb(110,221,234)',
x: 'Ocak',
y: -68
},
{
color: 'rgb(106,226,126)',
x: 'Şubat',
y: -54
},
{
color: 'rgb(154,222,111)',
x: 'Mart',
y: -37
},
{
color: 'rgb(126,187,225)',
x: 'Nisan',
y: 56
},
{
color: 'rgb(156,206,128)',
x: 'Mayıs',
y: 83
},
{
color: 'rgb(116,245,247)',
x: 'Haziran',
y: -78
},
{
color: 'rgb(235,196,136)',
x: 'Temmuz',
y: 30
},
{
color: 'rgb(186,117,243)',
x: 'Ağustos',
y: 75
},
{
color: 'rgb(221,157,208)',
x: 'Eylül',
y: -63
},
{
color: 'rgb(252,122,106)',
x: 'Ekim',
y: 10
},
{
color: 'rgb(193,139,193)',
x: 'Kasım',
y: 27
},
{
color: 'rgb(254,173,150)',
x: 'Aralık',
y: -52
}
]}
width={400}
/>
Tunnel Chart
<FunnelChart
data={[
{
backgroundColor: 'lightgreen',
name: 'K',
value: 999
},
{
backgroundColor: 'green',
name: 'B',
value: 168
},
{
backgroundColor: 'yellow',
name: 'E',
value: 114
},
{
backgroundColor: 'red',
name: 'C',
value: 93
},
{
backgroundColor: 'black',
name: 'D',
value: 32
}
]}
height={500}
width={500}
/>
Above an example code for Tunnel Chart
Pie Chart
<Pie
data={[
{
backgroundColor: 'lightgreen',
name: 'K',
textColor: 'white',
value: 136
},
{
backgroundColor: 'green',
name: 'B',
textColor: 'yellow',
value: 85
},
{
backgroundColor: 'red',
name: 'C',
textColor: 'white',
value: 53
},
{
backgroundColor: 'black',
name: 'D',
textColor: 'white',
value: 22
},
{
backgroundColor: 'yellow',
name: 'E',
textColor: 'black',
value: 30
}
]}
legend
onMouseClickPiece={() => {}}
/>
Pie Chart is generally used for showing data with percent. You can see that how to view data comprehensively.
Line Chart is coming soon :)
visit here for more details,
https://www.npmjs.com/package/graphjs-react?activeTab=readme
If you learn about charts theoretically
Top comments (0)