React
zingchart-react is a React JavaScript directive to allow ZingChart to work dynamically with data. Quickly add charts to your React application with our ZingChart component. This guide assumes some basic working knowledge of React. You can view the full component on GitHub or NPM.
1. Install
Install the ZingChart library via npm: $ npm install zingchart
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 globally or locally per component
Locally per component (recommended)
In each component where ZingChart is being used, include the following in your component's configuration:
import 'zingchart/es6';
import ZingChart from 'zingchart-react';
// EXPLICITLY IMPORT MODULE
import 'zingchart/modules-es6/zingchart-depth.min.js';
class App extends Component {
...
}
We recommend this approach if ZingChart is only included in a few, un-related pages across your application.
Usage
The zingchart-react component can be included into render() as an element. Below is a simple example of a bar chart:
render() {
return (
<div >
<ZingChart data={this.state.config}/>
</div>
);
}
Whole class configuration:
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]
<ZingChart :data="myData" :series="mySeries"></ZingChart>
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-#
<ZingChart id="myChart"/>
modules [string] (optional)
The name of the module to include in ZingChart. Refer to the ZingChart Modules Reference for more details.
import 'zingchart/modules-es6/zingchart-dragging.min.js'
<ZingChart modules='dragging'/>
output [string] (optional)
The render type for the visualization, either svg (default) or canvas
<ZingChart output='canvas'/>
series [array] (optional)
Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varies by chart type used - Refer to the ZingChart Data Basics 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%
<ZingChart width='600px'/>
height [string or number] (optional)
The height of the chart. Defaults to 480px.
<ZingChart height='600px'/>
theme [object] (optional)
The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/tutorials/styling/themes
const myTheme = {
palette: {
line: [
[ '#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9' ], /* light blue */
[ '#FBFCFE', '#E80C60', '#E80C60', '#d00a56' ], /* light pink */
[ '#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d' ], /* light purple */
[ '#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A' ], /* med yellow */
[ '#FBFCFE', '#FB301E', '#FB301E', '#e12b1b' ], /* med red */
[ '#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D' ], /* med green */
]
}
};
<ZingChart theme={myTheme}/>
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/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 ZingChart Method Reference.