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

Step 2: Get Started in Your Environment

JavaScript

ZingChart is dependency free and pure JavaScript.

  1. 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>
  2. Add your chart element wrapper
    <div id="myChart"></div>
  3. 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

  1. Install via NPM
    npm install zingchart-react
  2. Include the component
    import ZingChart from 'zingchart-react';
    class App extends Component { ... }
  3. 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]
            }]
          }
        }
      } ...
    }
  4. 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.

  1. Install via NPM
    npm install zingchart-angular
  2. Include the module in your module declaration file.
    import { ZingchartAngularModule } from 'zingchart-angular';
    
    @NgModule({
    imports: [
      ...
      ZingchartAngularModule,
    ],
    })
  3. Define your chart configuration in your component.
    config:zingchart.graphset = {
    type: 'line',
    series: [{
      values: [3,6,4,6,4,6,4,6]
    }],
    };
  4. 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.

  1. Install via NPM
    npm install zingchart-vue
  2. Register the component in your App
    import Vue from 'vue';
    import zingchartVue from 'zingchart-vue';
    
    Vue.component('zingchart', zingchartVue);
  3. Add the component to your markup
    <zingchart :data="myConfig" :height="300" :width="600"/>
  4. 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.

  1. Install via NPM
    npm install zingchart-web-component
  2. 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);
  3. 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.

  1. Install via NPM
    npm install zingchart-angularjs
  2. Inject the directive into your application
    angular.module('myApp', ['zingchart-angularjs']);
  3. Configure your chart through a scope variable
    $scope.myJson = {
      type: 'line',
      series: [
        { values: [54,23,34,23,43] },
        { values: [10,15,16,20,40] }
      ]
    };
  4. 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 IconPHP

Create interactive JavaScript charts all in PHP with ZingChart's PHP wrapper.

  1. Install via Composer
    composer require zingchart/php_wrapper
  2. Include the library
    require __DIR__ . '/vendor/autoload.php;
  3. 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

  1. 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>
  2. Create a <div> with an ID
    <div id="myChart"></div>
  3. 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

Ember IconEmber

Generate interactive JavaScript charts with ZingChart's custom Ember component

  1. Install the ZingChart Ember component
    npm install --save ember-zingchart
    ember g ember-zingchart
  2. Create a handlebars template where you want your chart to render
    {{ember-zingchart renderOptions=myRenderOptions}}
  3. 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 IconBackbone

Turn simple Models and Views into snazzy JavaScript charts with ZingChart's Backbone wrapper

  1. 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>
  2. Create the target element in the DOM
    <div id="chartDiv"></div>
  3. 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
    });
  4. Create your chart View
    var chartView = new ZingChart.ZingChartView({
      model: chartData,
      el: $('#chartDiv')
    });
  5. Render your chart
    chartView.render();

View on GitHub

Don't see the feature you're looking for?

We can build it for you! Contact Us to Get Started