DEV Community

Cover image for Creating charts in React just got easier
Mike for ZingChart

Posted on • Updated on

Creating charts in React just got easier

Adding charts to your React Application just got easier thanks to ZingChart’s revised React component.

The ZingChart team recently updated the zingchart-react component to create visualizations by adding more features and direct access to events and methods right on the component! We’re excited to show you how it works!

ZingChart — The last data visualization library you’ll need

ZingChart is one of the original JavaScript charting libraries, and continues to innovate and improve on its feature set. With over 35 different chart types, a rich API of methods/events to integrate with, and a dedicated support team, ZingChart provides an all-in-one solution for your data visualization needs.

ZingChart has over 35 different base chart types and hundreds of configurations<br>
ZingChart has over 35 different base chart types and hundreds of configurations

Add charts to your React.js application in less than a minute

If you don’t have a React Application, you can easily set one up with create-react-app

$ npx create-react-app myApplication

First we add the package to our React Application via NPM:

$ npm i zingchart-react

We then include the component in the project file where we want a chart rendered.

import ZingChart from 'zingchart-react';

Finally, we add a chart into our markup to be rendered!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div>
        <ZingChart data={this.state.config}/>
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

https://glitch.com/~react-chart
https://glitch.com/~react-chart

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

Taking it a step further

The above example is a minimal example of how simple it is to create a chart in ZingChart, however the library is powerful enough to make more complicated and interactive visualizations, too.

https://glitch.com/~zingchart-react-example
https://glitch.com/~zingchart-react-example

REACTivity

The zingchart-react component is reactive to all of its properties — from the chart configuration to the data. If any changes are sent to the component, the chart is re-rendered automatically.

https://glitch.com/~zingchart-react-reactivity

https://glitch.com/~zingchart-react-reactivity

Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your React component. Events are automatically bound to the function you provide via props, and all available ZingChart methods are available when you access a specific component via refs.

Events

By binding a function to a known ZingChart event prop, we can perform custom actions when a chart emits an event. In the example below the event node_mouseover is emitted and its contents are displayed.

<ZingChart ref={this.chart} data={this.state.config} node_mouseover={this.nodeInfo}/>

https://glitch.com/~zingchart-react-events

https://glitch.com/~zingchart-react-events

List of all ZingChart events: https://www.zingchart.com/docs/api/events

Methods

Methods can be called when a ref is given to the component, and a known method is called from the instance of the component. Below is an example of dynamically adding a plot, from a custom button created in React.

<ZingChart ref={this.chart} data={this.state.config}/>
...
this.chart.current.addplot({
  data: {
    values: [5,5,3,6,7,3,4,6,7],
    text: "My new plot"
  }
});
Enter fullscreen mode Exit fullscreen mode

https://glitch.com/~zingchart-react-methods

https://glitch.com/~zingchart-react-methods

List of all ZingChart methods: https://www.zingchart.com/docs/api/methods

All of the above examples can be found on our glitch collection:

https://glitch.com/@zing-soft/react

Get Charting!

With a better understanding of ZingChart and its React component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-react

A pioneer in the world of data visualization, ZingChart is a powerful Javascript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.

Top comments (4)

Collapse
 
dyland profile image
Dylan Davenport

This is great! I just finished building my first React app using Chart.js. I’ll have to give this a shot in the future!

Collapse
 
mikeschultz profile image
Mike

Glad to hear! Feel free to reach out if you need any assistance!

Collapse
 
putraridho profile image
Ridho Putra

It looks great. I've been working with recharts for my projects, but now I'm looking forward to use this for new projects.

Collapse
 
mikeschultz profile image
Mike

Awesome! Recharts is a great library as well.

The way to create charts in our component slightly differs from Recharts since we use a JSON configuration rather than XML/Component style. They both have their pros and cons though.

If you are interested in the component approach, we have been creating a pure webcomponent version that has similar tree style syntax: github.com/zingchart/zingchart-web... . Best of all - it is drop in to any framework including React.