Download

Try ZingChart

ZingChart v2.8.6

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

New Features

  • Heatmap Plugin - standalone or integrated with various existing chart types.
  • Heatmap over XY chart. Demo
  • Heatmap over Radar chart. Demo
  • Heatmap over geographic maps, static. Demo
  • Heatmap over geographic maps, live. Demo
  • Heatmap configured as scatter chart with 1M nodes. Demo
  • Standalone Heatmap set up to mimic the Game of Life. Demo
  • Various performance related updates.
  • Added logarithmic progression on treemaps.

Bug Fixes

  • Fixed label positioning issues on maps.
  • Fixed inconsistent zoom levels when scrolling charts.
  • Various minor fixes.

 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>