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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay