Skip to content

A declarative, efficient, and simple JavaScript library for building responsive charts

Notifications You must be signed in to change notification settings

zingchart/ZingChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

npm

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