Novice, Practiced, Mastered

    zingchart
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/zingchart package

    2.9.9 • Public • Published

    ZingChart

    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

    Install

    npm i zingchart

    DownloadsWeekly Downloads

    3,616

    Version

    2.9.9

    License

    none

    Unpacked Size

    65.2 MB

    Total Files

    1661

    Last publish

    Collaborators

    • zingchart