Blog Help & Support Contact About Login

Download ZingChart

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

 Download ZingChart v2.5.2

 Need help? Chat us now or send an email to support@zingchart.com

Make your first chart with ZingChart →

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 tool. Once familiarized, we highly recommend users either download ZingChart to their own environment or access it through their preferred package manager.

Use a Package Manager

Install via NPM

$ npm install zingchart

Get ZingChart on NPM →

Install via Bower

$ bower install zingchart

Get ZingChart on Bower →

Install via NuGet

PM> Install-Package ZingChart

Get ZingChart on NuGet →

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={
    "type":"bar",  // Specify your chart type here.
    "series":[  // Insert your series data here.
        { "values": [35, 42, 67, 89]},
        { "values": [28, 40, 39, 36]}
    ]
  };
  zingchart.render({ // Render Method[3]
    id:'chartDiv',
    data:chartData,
    height:400,
    width:600
  });
</script>
</body>
</html>
Notes:
  1. Script Reference - The main ZingChart script reference includes the vast majority of our chart types and features. A few of our more advanced options (e.g., Map charts, dragging tool, selection tool, 3D toolbar) do require the addition of individual module scripts. For more information, see our Modules page.
  2. Chart Placement - The template starts you off with a single chart. To add a second (or more) charts, see our Adding Additional Charts page.
  3. Render Method - This is where your chart is rendered with its corresponding data. The element id chartDiv and data chartData is specified here. Within your render method, you can also adjust your chart's height, width, and rendering type (SVG or canvas). See our Render Options page for more information.