Skip to content
Quickly create dynamic JavaScript charts with ZingChart & React.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit e02f753 Nov 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Exposes ZC in export Nov 14, 2019
example Uses constants repo Nov 13, 2019
src Exposes ZC in export Nov 14, 2019
.babelrc init create-react-library@2.6.7 Oct 30, 2019
.editorconfig init create-react-library@2.6.7 Oct 30, 2019
.eslintrc init create-react-library@2.6.7 Oct 30, 2019
.gitignore init create-react-library@2.6.7 Oct 30, 2019
.travis.yml init create-react-library@2.6.7 Oct 30, 2019
LICENSE
README.md Fixes readme and adds npm keywords Oct 31, 2019
package-lock.json
package.json 2.0.1 Nov 14, 2019
rollup.config.js Version 2 with new syntax Oct 30, 2019

README.md

zingchart-react

Quickly add charts to your React application with our ZingChart component

This guide assumes some basic working knowledge of React and jsx.

1. Install

Install the zingchart-react package via npm

$ npm install zingchart-react

2. Include the component in your project

You can either include the zingchart-react component to your project via UMD or modules (reccomended).

Modules (reccomended)

import ZingChart from 'zingchart-react';

or

UMD

In your main html file, include the package as a script include.

<script src="/path/to/zingchart-react.js"></script>

Usage

Use the newly imported ZingChart component in your markup.

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>
    );
  }

}

Parameters

data [object]

const myData = {
    type: 'line',
    series: [
      { values: [1,2,4,5,6] }
    ]
};

<zingchart data={myData}></zingchart>

id [string] (optional)

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-#

series [array] (optional)

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.

const myData = {
    type: 'line',
};

const mySeries = [
  { values: [1,2,4,5,6] }
];

<zingchart data={myData} series={mySeries}></zingchart>

width [string or number] (optional)

The width of the chart. Defaults to 100%

height [string or number] (optional)

The height of the chart. Defaults to 480px.

theme [object] (optional)

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

Events

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:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'line',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
    this.chartDone = this.chartDone.bind(this);
  }
  render() {
    return (
      <div>
        <ZingChart data={this.state.config} complete={this.chartDone}/>
      </div>
    );
  }
  chartDone(event) {
    console.log(`Event "Complete" - The chart is rendered\n`);
  }
}

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

Methods

All zingchart methods are readily available on the component's instance to call. For example, to add a new plot node to the chart:

class App 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();
    this.addPlot = this.addPlot.bind(this);

  }
  render() {
    return (
      <div>
        <ZingChart ref={this.chart} data={this.state.config}/>
        <button onClick={this.addPlot}>AddPlot</button>
      </div>
    );
  }
  addPlot() {
    this.chart.current.addplot({
      data: {
        values: [5,3,3,5,6,4,3,4,6],
        text: "My new plot"
      }
    });
  }
}

For a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/methods

Hello World and Examples

This repository contains a "Create React App" example to give you an easy way to see the component in action.

To start the sample application:

$ cd examples && npm run start 
You can’t perform that action at this time.