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)