Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

zingchart-react

2.1.0 • Public • Published

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';

You must EXPLICITLY IMPORT MODULE CHARTS. The modules are wrapped as a closure an eval statement so there is NO default export objects. Just import them.

import ZingChart from 'zingchart-react';
// EXPLICITLY IMPORT MODULE
import 'zingchart-react/dist/modules/zingchart-depth.min.js';

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

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

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

The width of the chart. Defaults to 100%

height string or number

The height of the chart. Defaults to 480px.

theme object

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 

Install

npm i zingchart-react

DownloadsWeekly Downloads

325

Version

2.1.0

License

MIT

Unpacked Size

8.98 MB

Total Files

221

Last publish

Collaborators

  • avatar