zingchart

Repo to allow easy downloading of Zingchart via Bower.


Keywords
zingchart, chart, charting, javascript charts, html5 charts, charts, javascript, no-dependencies, responsive
Install
bower install zingchart

Documentation

ZingChart

Build v2.8.7

A declarative, efficient, and simple JavaScript library for building responsive charts. With integrations in Angular, React, Vue, JQuery, PHP, Ember, & Backbone.

Resources:

Install

bower

bower install zingchart

npm

npm install zingchart

cdn

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

cdn on cdnjs

https://cdnjs.com/libraries/zingchart

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/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>
  <!-- Import Library [1] -->
  <script type="module">
    import {zingchart, ZC} from './zingchart/es6.js';
    import './zingchart/modules-es6/zingchart-pareto.min.js';
  </script>
  <!-- fallback for no module support -->
  <script nomodule src="/zingchart/zingchart.min.js"></script>
</head>
<body>
  <!-- Chart Component [2] -->
  <div id="myChart"></div>

  <script>
    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>

Browserify

This package supports the CommonJS module format to be used with bundlers such as Browserify when being used with NPM.

Usage : var zingchart = require('zingchart');

Package Directory

The package includes the following:

|   README.md
├── client
│   ├── zingchart.min.js
│   ├── modules
├── custom
│   ├── build.js
|   ...

Integrations

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.

Contextual Demos

We're always working on new demos to help users get started using ZingChart with their framework or database. Take a look at our Demo repo to see if we've covered your toolset. Let us know if we haven't or if you need help with an existing implementation.

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