ZingChart

Our JavaScript charting library is a commercial product. But the full branded version is free to try, forever.

Install

CDN

We publish our live, dev and ALL previous builds on our CDN. This is the quickest way to get started.

Current Version

Current Version and Modules (https://cdn.zingchart.com/zingchart.min.js | https://cdn.zingchart.com/modules/)

https://cdn.zingchart.com/zingchart.min.js
https://cdn.zingchart.com/modules/

ES6 Version

ES6 Version and Modules (https://cdn.zingchart.com/zingchart-es6.min.js | https://cdn.zingchart.com/modules-es6/)

https://cdn.zingchart.com/zingchart-es6.min.js
https://cdn.zingchart.com/modules-es6/

Package Managers

We have a variety of package managers to download our library, as well as integrations

npm

npm install zingchart

nuget

If you are looking for the ZingChart package and are a .NET user go to nuget package here.

Install-Package ZingChart -Version 2.5.0

Integrations

Installing our integration packages will also install the library for you. ZingChart is wrapped in a variety of ways for easy consumption with popular JS libraries and frameworks. Official releases are shown here. If you have a third party integration please contact us for inclusion.

Angular

npm install zingchart-angular

React

npm install zingchart-react

Vue

npm install zingchart-vue

Web Component

npm install zingchart-web-component

AngularJS

npm install zingchart-angularjs

List of integrations:

Quick Start es5

Include a reference to the zingchart library

<!DOCTYPE html>
<html>
<head>
  <!--Script Reference [1] -->
  <script src="/zingchart/zingchart.min.js"></script>

</head>
<body>
  <!--Chart Component [2] -->
  <div id="myChart"></div>

  <script>
    let chartData = {
      type: 'pareto',
      series: [
        {
          values: [
            4642,
            4345,
            2350,
            1251
          ]
        }
      ]
    };

    // Render Method[3]
    zingchart.render({ 
      id: 'myChart',
      data: chartData,
      height: 400,
      width: '100%'
    });
  </script>
</body>
</html>

Quick Start es6 Imports

A general best practice to use ZingChart in any of your frameworks is used in the following:

import {zingchart, ZC} from 'zingchart/zingchart-es6';

And if you have and modules you want to include you do the following

import {pareto} from 'zingchart/modules-es6/zingchart-pareto.min.js';

Quick Start es6 w/Script Modules

<!DOCTYPE html>
<html>
<head>
  <!-- fallback for no module support -->
  <script nomodule src="/zingchart/zingchart.min.js"></script>
</head>
<body>
  <!-- Chart Component [2] -->
  <div id="myChart"></div>

  <script type="module">
    
    import {zingchart, ZC} from './zingchart/zingchart-es6.js';
    import './zingchart/modules-es6/zingchart-pareto.min.js';
    
    let chartConfig = {
      type: 'pareto',
      series: [
        {
          values: [
            4642,
            4345,
            2350,
            1251
          ]
        }
      ]
    };

    // Render Method[3]
    zingchart.render({ 
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>
</html>

Resources:

Package Directory

The package includes the following:

|   README.md
|   zingchart.min.js
|   zingchart-es6.min.js
├── modules
|   ├── zingchart-3d.min.js
|   ├── ...
├── modules-es6
|   ├── zingchart-3d.min.js
|   ├── ...

Support

If you need any assistance or would like to report any bugs found in ZingChart, please contact us at support@zingchart.com or through our chat client on our website www.zingchart.com

zingchart/ZingChart