New React Chart Library For Basic Charts - graphjs-react
Tags: react, chart, webdev, javascript
Published: 2023-10-30 10:55:00

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n12yiu7g2jbk6s4xuc5.jpg)

```
<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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl8chdv9x2wzpk2npreo.jpg)

```
<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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mdeqft1zz92399wwdli.jpg)

```
<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

https://www.computerhope.com/jargon/b/barchart.htm