Download

Try ZingChart

ZingChart v2.8.7

Our download package contains dozens of demos to get you started.

Features

autoFit: [false,true] will allow for autofiting the scales on [min,max] values to be set individually. autoFit: true will default to [true,true].

es6 export/import version of the library. Allows for import of the library through script modules with import zingchart from 'zingchart/es6';

After download from npm you can import ZingChart with the following:

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

New Documentation

- Site docs on getting started
- API Events
- API Methods

Notable Fixes

- Fixed CSV download for time-series returning false values.
- Fixed issue with custom tooltip tokens.
- Fixed <`%scale-key-text` returning wrong value.
- Fixed commenting scaleX object label causing error in CSV excel spreadsheet.
- Fixed complications between autofit and valueboxes.
- Fixed edge case where legend was overlapping charts.
- Fixed null value in bullet charts still showing up.
- Fixed issue with collapse:true on legends without minimize:true.
- Fixed 'zoom-to-values' not working in scaleX.
- Fixed missing ticks in Chord diagrams.
- Fixed ghost value boxes appearing in select zoom circumstances.
- Fixed scale angling bug with 3D bar charts.
- Fixed setseriesvalues API bug with plotindex parameter
- Fixed setguide API method on mobile
- Fixed chord diagram missing ticks
- Fixed `collapse:true` breaking legend
- Fixed null values on bullet charts
- Fixed shared legend on population pyramids
- Fixed `border: 'alpha'` not showing up with animations

 Need help?
Chat us now or send an email to .

Use the ZingChart CDN

The ZingChart CDN is the quickest way to get started.

Getting Started

  1. Copy <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  2. Paste right before the </body> tag.
  3. Make your first chart with ZingChart!

Note: Our CDN service is intended as an introductory convenience tool. We strongly recommend either downloading ZingChart to your environment, or accessing it through your preferred package manager.

Use a Package Manager

Install Via NPM

$ npm install zingchart

Install Via Bower

$ bower install zingchart

Install Via NuGet

PM> Install-Package ZingChart

Make Your First Chart

ZingChart's declarative syntax makes it easy to create your first chart in seconds.

Getting Started

  1. Copy or download the demo below
  2. Update the ZingChart script path to point to your installation of ZingChart (or use the CDN)
  3. Open the demo in your browser!
  4. Read the ZingChart documentation, check out the gallery, or email us for help
<!doctype html>
<html>
<head>
  <!-- Script Reference [1] -->
  <script src="path/to/zingchart.min.js"></script>
</head>
<body>
  <!-- Chart Placement [2] -->
  <div id="chartDiv"></div>
  <script>
    var chartData = {
      // Specify your chart type
      "type": "bar",
      // Add your series data
      "series": [
        { "values": [35, 42, 67, 89] },
        { "values": [28, 40, 39, 36] }
      ]
    };
    // Render your chart [3]
    zingchart.render({
      id:'chartDiv',
      data:chartData,
      height:400,
      width:600
    });
  </script>
</body>
</html>