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>

Note: Our CDN service is intended as a convenience tool. We recommend either downloading ZingChart to your environment, or accessing it via NPM.

Package Manager

Install via NPM npm install zingchart

View ZingChart on NPM

Direct Download

Downloadv2.9.10

View release details

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>

View on GitHub More Details

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

View on GitHub More Details

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>

View on GitHub More Details

Vue

Easily add charts in your Vue application with our component.

Install via NPM
```
npm install zingchart-vue
```

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]
      }]
    }
  }
}

View on GitHub More Details

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

import ZingChart from 'zingchart-web-component';
customElements.define('zing-chart', ZingChart);

OR Manually import each chart and register it as a web component

import {Line} from 'zingchart-web-component/charts/ZCLine.js';
customElements.define('zc-line', Line);

Add the component to your markup

<zing-chart 
  data='{"type": "line", "series": {["values": 1,2,3,4,5,6,4]}}'>
</zing-chart>

Or While everything can be configured via the data property, you can also fully configure ZingChart via child components

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

View on GitHub More Details

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>

View on GitHub

PHP

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

View on GitHub

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

View on GitHub

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} />
```

View on GitHub More Details

Ember

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

View on GitHub

Backbone

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();
```

View on GitHub

Step 3: Next Steps

Add Your Data

Load your own data

Customize Your Chart

Learn ZingChart

Support Available We offer advanced support options for sophisticated solutions.

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!