New React Chart Library For Basic Charts - graphjs-react

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

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

Blog

New React Chart Library For Basic Charts - graphjs-react

Gökhan ERGEN

Join Our Newsletter. No Spam, Only the good stuff.

Related