Download
Try ZingChart for Free
Step 1: Get the Library Your Way
CDN
The ZingChart CDN is the quickest way to get started.
Copy this code before your </body>
tag:
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
Package Manager
Install via NPM
npm install zingchart
Direct Download
Step 2: Get Started in Your Environment
JavaScript
ZingChart is dependency free and pure JavaScript.
- Install via NPM
npm install zingchart
After downloading package locally, include the script using ES6 Modules:
import {zingchart, ZC} from './zingchart/es6.js'; // Modules must be imported EXPLICITLY when using es6 version import './zingchart/modules-es6/zingchart-pareto.min.js';
For quickest download, use the ZingChart CDN:
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
- Add your chart element wrapper
<div id="myChart"></div>
- Include the library in your HTML document and then render your chart!
<!-- Just before the closing body tag is best --> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> <script> zingchart.render({ id: 'myChart', data: { type: 'line', series: [ { values: [54,23,34,23,43] }, { values: [10,15,16,20,40] } ] } }); </script> </body>
React
Quickly create dynamic JavaScript charts with ZingChart and React.
- Install via NPM
npm install zingchart-react
- Include zingchart lib and the component
import 'zingchart/es6'; import ZingChart from 'zingchart-react'; class App extends Component { ... }
- Build a chart 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] }] } } } ... }
- Create and render your chart
class App extends Component { ... render() { return ( <div> <ZingChart data={this.state.config}/> </div> ); } ...
Angular
ZingChart's Angular wrapper helps you create JavaScript charts with two-way data binding.
- Install via NPM
npm install zingchart-angular
- Include the module in your module declaration file
import { ZingchartAngularModule } from 'zingchart-angular'; @NgModule({ imports: [ ... ZingchartAngularModule, ], })
- Define your chart configuration in your component
config:zingchart.graphset = { type: 'line', series: [{ values: [3,6,4,6,4,6,4,6] }], };
- Add your component to the markup
<zingchart-angular [config]="config" [height]="500"></zingchart-angular>
Vue
Easily add charts in your Vue application with our component.
- Install via NPM
npm install zingchart-vue
- Register the component and include zingchart in your app
import 'zingchart/es6'; import Vue from 'vue'; import zingchartVue from 'zingchart-vue'; Vue.component('zingchart', zingchartVue);
- Add the component to your markup
<zingchart :data="myConfig" :height="300" :width="600"/>
- Define your chart configuration in your app
export default { data() { return { type: 'line', series: [{ values: [43,23,54,54,39,47,38,59,39,49] }] } } }
Web Component
Easily add charts in your application with our web component.
- Install via NPM
npm install zingchart-web-component
- Import the generic zingchart component
OR Manually import each chart and register it as a web componentimport ZingChart from 'zingchart-web-component'; customElements.define('zing-chart', ZingChart);
import {Line} from 'zingchart-web-component/charts/ZCLine.js'; customElements.define('zc-line', Line);
- Add the component to your markup
Or While everything can be configured via the data property, you can also fully configure ZingChart via child components<zing-chart data='{"type": "line", "series": {["values": 1,2,3,4,5,6,4]}}'> </zing-chart>
<zc-line> <zc-legend draggable></zc-legend> <zc-series> <zc-series-0 values="[3,4,3,2,4,3,3]"></zc-series-0> </zc-series> </zc-line>
AngularJS
ZingChart's AngularJS wrapper helps you create JavaScript charts with two-way data binding.
- Install via NPM
npm install zingchart-angularjs
- Inject the directive into your application
angular.module('myApp', ['zingchart-angularjs']);
- Configure your chart through a scope variable
$scope.myJson = { type: 'line', series: [ { values: [54,23,34,23,43] }, { values: [10,15,16,20,40] } ] };
- Insert the ZingChart-AngularJS directive into your application
<zingchart id="myChart" data-zc-json="myJson" data-zc-height=500 data-zc-width=600></zingchart>

Create interactive JavaScript charts all in PHP with ZingChart's PHP wrapper.
- Install via Composer
composer require zingchart/php_wrapper
- Include the library
require __DIR__ . '/vendor/autoload.php;
- Render your chart
$zc = new ZC("myChart"); $zc->setChartType("bar"); $zc->setSeriesData([1,4,2,6,3]); $zc->render();
jQuery
Easily create and modify JavaScript charts with ZingChart's jQuery wrapper.
- Include jQuery, ZingChart, and the jQuery wrapper
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> <script src="https://cdn.zingchart.com/zingchart.jquery.min.js"></script>
- Create a
<div>
with an ID<div id="myChart"></div>
- Create your chart inside the
$(document).ready()
function$(document).ready(function() { $('#myChart').zingchart({ data: { type: 'line', series: [{ values: [1,2,5,3,9,4] }] } }); });
Svelte
Quickly create dynamic JavaScript charts with ZingChart and Svelte.
- Install via NPM
npm install zingchart-svelte
- Include zingchart lib and the component
import 'zingchart/es6'; import ZingChart from 'zingchart-svelte';
- Build a chart configuration
const config = { type: 'bar', series: [ { values: [4,5,3,4,5,3,5,4,11] } ] }
- Add your component to the markup
<ZingChart data={config} />

Generate interactive JavaScript charts with ZingChart's custom Ember component.
- Install the ZingChart Ember component
npm install --save ember-zingchart ember g ember-zingchart
- Create a handlebars template where you want your chart to render
{{ember-zingchart renderOptions=myRenderOptions}}
- Set the render options in the controller
import Ember from 'ember'; let _renderOptions = { height: 400, width: '100%', data: { type: 'bar', series: [{ values : [35,42,67,89,25,34,67,85] }] } } export default Ember.Controller.extend({ myRenderOptions: _renderOptions });

Turn simple Models and Views into snazzy JavaScript charts with ZingChart's Backbone wrapper.
- Include the ZingChart library and this wrapper:
<script src="cdn.zingchart.com/zingchart.min.js"></script> <script src="cdn.zingchart.com/backbone/backbone.zingchart.min.js"></script>
- Create the target element in the DOM
<div id="chartDiv"></div>
- Create your data model
var chartData = new ZingChart.ZingChartModel({ data: [[3,2,3,3,9], [1,2,3,4,5]], charttype: 'bar', width: 500, height: 400 });
- Create your chart view
var chartView = new ZingChart.ZingChartView({ model: chartData, el: $('#chartDiv') });
- Render your chart
chartView.render();
Step 3: Next Steps
Help us grow by starring us on GitHub and giving us a follow on Twitter!
Don't see the feature you're looking for?
We can build it for you!Contact Us to Get Started