Features
ZingChart Features

Integrations available for frameworks and languages

Interactivity Image Easily integrate ZingChart with your development stack.

Overview

Use the following code snippets to quickly get started with your framework. If you are having trouble, or don’t see your framework, please contact us directly through chat or email at support@zingsoft.com.

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 zingchart lib and the component 
    import 'zingchart/es6';
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 and include zingchart in your app 
    import 'zingchart/es6';
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 Icon PHP

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

Svelte

Quickly create dynamic JavaScript charts with ZingChart and Svelte.

  1. Install via NPM 
    npm install zingchart-svelte
  2. Include zingchart lib and the component 
    import 'zingchart/es6';
import ZingChart from 'zingchart-svelte';
  3. Build a chart configuration 
    const config = {
  type: 'bar',
  series: [
    { values: [4,5,3,4,5,3,5,4,11] }
  ]
}
  4. Add your component to the markup 
    <ZingChart data={config} />

View on GitHub More Details

Looking for an integration that's not listed here?

Let us know so we can add it!