DEV Community

Gökhan ERGEN
Gökhan ERGEN

Posted on

Graph Library graphjs-react updated to 1.0.3

GraphJS React is a graph library to view or visualize your data which you collect or find.

We wrote a blog about this library. If you do not read it, you should go to this link: https://dev.to/gokhanergentech/new-react-chart-library-for-basic-charts-graphjs-react-16ed

Lets talk about this version.

  • Added LineChart labelled or number

Image description

<LineChart data={[ [ { color: 'rgb(197,104,176)', x: '2005', y: 66357782 }, { color: 'rgb(231,205,242)', x: '2006', y: 28585057 }, { color: 'rgb(104,222,112)', x: '2007', y: 83097927 }, { color: 'rgb(174,227,215)', x: '2008', y: 40312901 }, { color: 'rgb(225,116,228)', x: '2009', y: 64665550 }, { color: 'rgb(197,206,222)', x: '2010', y: 83476844 } ], [ { color: 'rgb(174,183,141)', x: '2005', y: 16388224 }, { color: 'rgb(103,131,243)', x: '2006', y: 72801715 }, { color: 'rgb(187,144,151)', x: '2007', y: 17787543 }, { color: 'rgb(135,199,171)', x: '2008', y: 31304136 }, { color: 'rgb(177,186,201)', x: '2009', y: 34091381 }, { color: 'rgb(211,119,199)', x: '2010', y: 11001680 } ] ]} height={400} labels={[ { color: 'blue', name: 'A' }, { color: 'red', name: 'B' } ]} onPointClick={() => {}} onPointOver={() => {}} title={{ label: 'Countries\' Populations' }} titles={{ x: 'Year', y: 'Population' }} width={400} xAxisLabels={[ '2005', '2002', '2006', '2007', '2008', '2009', '2010' ]} /> 
Enter fullscreen mode Exit fullscreen mode

Image description

You can see the usage of the chart.

  • Added wheel scaling for bar and line charts

You can also help to develop this library. We use example project to use the charts and also storybook.

https://github.com/gokhanergen-tech/graphjs-react

Top comments (0)