A React component for ZingChart

Quickly create dynamic JavaScript charts that react when your data changes by utilizing the ZingChart library and Facebook's React together.

Install the zingchart-react package via npm

$ npm install zingchart-react

import React, { Component } from 'react';
import ZingChart from '../ZingChart.jsx';

Create a class containing the chart and it's configuration.

import React, { Component } from 'react';
import ZingChart from '../ZingChart.jsx';

class MyChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
    this.chart = React.createRef();
  }
  render() {
    return (
      <div >
        <ZingChart ref={this.chart} data={this.state.config}/>
      </div>
    );
  }
}

export default MyChart;

  <ZingChart data={this.state.config}/>

...
constructor() {
  this.state = {
    config: {
      type: 'bar',
      series: [{
        values: [4,5,3,4,5,3,5,4,11]
      }]
    }
  }
}
...

The id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-react-#

Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.

  <ZingChart data={this.state.config} series={this.state.series}/>

...
constructor() {
  this.state = {
    config: {
      type: 'bar'
    },
    series: [{
      values: [4,5,3,4,5,3,5,4,11]
    }]
  }
}
...

The width of the chart. Defaults to 100%

The height of the chart. Defaults to 480px.

The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes

All zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:

  <ZingChart data={this.state.config} complete={this.chartRendered}/>

...
  constructor() {
    ...
    this.chartRendered = this.chartRendered.bind(this);
    ...
  }
  chartRendered(result) {
    console.log(result.ev);
  }
...

For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/events

  <ZingChart data={this.state.config} ref={this.chart}/>
  <button onClick={this.addPlot}>AddPlot</button>

...
  constructor() {
    ...
    this.chart = React.createRef();
    this.addPlot = this.addPlot.bind(this);
    ...
  }
  addPlot() {
    this.chart.current.addplot({
      data: {
        values: [3,5,6,4,3,4,6,6],
        text: "My new plot"
      }
    });
  }
...

This repository contains a sample React application to give you an easy way to see the component in action.