ZingChart-React Components

Last month, we created an article on how to integrate ZingChart into a React application. We walked through the basics of how React works and the patterns you can follow to create dynamic charts that utilize React's lifecycle.

This month, we are taking it a step further by releasing our own set of React components! The set of ZingChart-React components are very similar to the components in our last blog post, but we have made it easier for React developers to use. Here’s how it works…

You can easily access the library via GitHub or on npm as zingchart-react.

Setting up your ZingChart and React Files

Before we get started, we strongly suggest cloning our React boilerplate repo on GitHub. The boilerplate itself is fully functional and this tutorial does not add any additional features to it.

You will need nodeJS, and Gulp installed on your machine before you can proceed with the following steps:

1. Clone the repo:
   $ git clone git@github.com:zingchart/ZingChart-React-Boilerplate.git

2. Enter the directory and install node dependencies from the package.json
$ cd ZingChart-React-Boilerplate && npm install

3. Make sure gulp works by running the command inside of the directory
   $ gulp

At this point, you can view a sample application at dist/index.html. We will walk through our application in detail.

ZingChart-React Components

The ZingChart-React Library is a set of components broken down into two types:

1. Core

The core component is a wrapper around the entire library of ZingChart. This allows users to utilize our library’s full capabilities. At the top level, you define three things:

• An id of an existing DOM element to which ZingChart will be mounted

• The optional height and width

• A ZingChart data configuration object. Every time the data object is changed inside your React component, the chart will re-render.

Parameters

• id [string] (required)

• data [object] (required)

• height [number] (optional) default : 400

• width [number] (optional) default : 600

Example:

<ZingChart id="myChart" height="300" width="600" data={myConfig} />

2. Styled

The styled components allow users to create charts by simply inserting values directly into a component. They are a pre-styled subset of charts that allow users to render charts using ZingChart and React without knowing a whole lot about either technology.

These components are great for rapid prototyping, or for those who just want to get charts in their application quickly.

The five styled components are:

• Line

• Area

• Pie

• Bar

• Scatter

Again, these components are for ease-of-use rather than a complete set of ZingChart functionality that the Core Component is capable of providing.

Parameters

• id [string] (required)

• series [array of objects] `(required)

  • text (optional)
  • values (required)

• height [number] (optional) default : 400

• width [number] (optional) default : 600

• legend [boolean] (optional) default : false

• title [string] (optional) default : ''

• theme [string] (optional) default : none

  • light
    [

  • dark
    [

  • slate
    [

Example:

<LineChart id="chart1" height="300" width="600" series={myLineValues} legend="true" theme="light" title="Hello Line Chart"/>

Our Boilerplate React App

Navigate to the src/index.html file inside of the boilerplate application. The existing div components are containers for each of the React components we will create.

<section>  
<h2>Type 1 Component Chart</h2>  
  
<div id="component-1"></div>  
<div id="component-2"></div>  
  
<h2>Type 2 Component Charts</h2>  
 
<div id="component-3"></div>  
<div id="component-4"></div>  
<div id="component-5"></div>  
<div id="component-6"></div>
<div id="component-7"></div>  
  
</section>  

Components

Now navigate to the src/js/App.jsx file.

At the top of the file, we include React and each of the ZingChart-React components into our application. We use the CommonJS syntax to require dependency code from our node_modules folder.

These dependencies are defined inside of the package.json file.The module exposes the core component, and the five styled chart components:

• Line

• Area

• Pie

• Bar

• Scatter

var React = require('react');  
  
var ZingChart = require('zingchart-react').core;  
var LineChart =  require('zingchart-react').line;  
var AreaChart =  require('zingchart-react').area;  
var PieChart =  require('zingchart-react').pie;  
var BarChart =  require('zingchart-react').bar;  
var ScatterChart =  require('zingchart-react').scatter;  

Dataset

Next, we define our dataset. In this example, we are defining a static set of data. However, the example could easily be extended to a live, real-time data source.

myValues and myValues2 are arrays of objects, with each object containing text and values attributes. These variables are used for the  styled components Line, Bar and Area.

Variables myValues3 and myValues4 are for the Scatter and Pie components respectively.

Lastly, the variables myDataSimple and myDataComplex are ZingChart configuration objects used to define a chart.

They are not specific to the ZingChart-React components, and can be used with the ZingChart library itself. We use them in this example to demonstrate the core component.

At the bottom of the script, we see seven React.render method calls. The first two are ZingChart core components, rendering new DOM elements chart1 and chart2 along with the data configuration objects myDataSimple and myDataComplex.

They attach themselves to the DOM elements defined in our index.html page.

React.render(<ZingChart id="chart1" height="300" width="600" data= {myDataSimple}/>, document.getElementById('component-1'));  
React.render(<ZingChart id="chart2" height="300" width="600" data= {myDataComplex}/>, document.getElementById('component-2'));  
  
React.render(<LineChart id="chart3" height="300" width="600" series={myValues1} legend="true" theme="slate" title="Slate"/>, document.getElementById('component-3'));  
React.render(<BarChart id="chart4" height="300" width="600" series={myValues2} legend="true" theme="light" title="Light"/>, document.getElementById('component-4'));  
React.render(<AreaChart id="chart5" height="300" width="600" series={myValues1} legend="true" theme="dark" title="Dark"/>, document.getElementById('component-5'));  
React.render(<PieChart id="chart6" height="300" width="600" series={myValues4} legend="true" theme="light" title="Light"/>, document.getElementById('component-6'));  
React.render(<ScatterChart id="chart7" height="300" width="600" series={myValues3} legend="true" theme="dark" title="Dark"/>, document.getElementById('component-7')); 

The last five method calls are the five styled components with different attributes and themes being assigned to each one of them.

Building and Running Files

In order for our JSX file to run on the browser, we need to transform the JSX code into JavaScript and to compile all of the files that require other dependencies into one package.

On top of that, we want to move files, rename dependencies, and minify the files for production. To do all this, we create a small task using the task runner Gulp to perform all of these tasks.

Without venturing too far outside scope of this article, Gulp does the following:

1. Replaces the src/*.js includes in our index.html to point to a new bundle.min.js inside of the /dist folder.

2. Transform our .jsx code into vanilla .js

3. Utilize the tool Browserify to pull in all of the require statements in our JavaScript files and to generate one single file.

4. Use the package Uglify to minify our newly bundled file.
   The package can be compiled using the command $ gulp, and viewed in /dist/index.html

We hope this set of components will help streamline development in using ZingChart with React. Let us know if you have any suggestions in the comments below.

Check out our previous post on React to get started or visit our React GitHub repo for more detailed information and demos!