Help Login Signup

Try ZingChart



Get ZingChart

CDN

Visit the CDN to get started. View CDN

Download

We don't recommend downloading on a mobile device but the link is available if you so please. Download

NPM

$ npm install zingchart

Bower

$ bower install zingchart

NuGet

PM> Install-Package ZingChart

CDN

Download

Bower

NPM

NuGet

Our ZingChart CDN option is the quickest way to get you up and running.

To get started, download or copy the template below, run the file in your browser, and then start customizing your chart! Know what you're doing? Just include "https://cdn.zingchart.com/zingchart.min.js" as your script source, and you're ready to go.

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. Read why here.

Here's a sample HTML document that will render a bar chart.

Download Template
<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1]-->
<script src="https://cdn.zingchart.com/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>

Download the ZingChart library or at GitHub, and then place the scripts in your working directory.

Download Get it on Github

|   zingchart_branded_version
|   |   |-- zingchart.min.js
|   |   |-- modules
|   |       |-- ...

In your HTML document, you can copy/paste the following template. It's currently set to create a basic line chart with 5 data points. Test the sample chart, and then substitute the default information with your own chart data. See our Chart Types page, which lists all of the different JavaScript charts we offer and provides step-by-step instructions for each chart type. Our ever-growing Gallery contains even more charts for inspiration and ideas.

<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1]-->
<script src="zingchart/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>

Run the following command to start your download.

$ bower install zingchart

Verify your directory structure.

|   index.html
    |   bower_components
    |   |-- zingchart
    |       |-- client
    |           |-- zingchart.min.js
    |           |-- modules
    |       |-- custom
    |           |-- ...

Copy/paste the following template into your HTML document. To get started, our Chart Types page provides an overview of all of the different JavaScript charts we offer. We also have a ZingChart Gallery that we're continuously updating with our latest chart types, features, and styles.

<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1]-->
<script src="bower_components/zingchart/client/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>

Run the following command to start your download.

$ npm install zingchart

Verify your directory structure.

|   index.html
    |   node_modules
    |   |-- zingchart
    |       |-- zingchart.min.js
    |       |-- modules
    |           |-- ...
    |       |-- custom
    |           |-- ...

Copy/paste the following template into your HTML document. To get started, our Chart Types page provides an overview of all of the different JavaScript charts we offer. We also have a ZingChart Gallery that we're continuously updating with our latest chart types, features, and styles.

<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1]-->
<script src="node_modules/zingchart/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>

Run the following command in PowerShell to start your download.

PM> Install-Package ZingChart

Verify your directory structure.

    |-- project-namespance
    |   |-- Scripts
    |       |-- ZingChart
    |           |-- modules
    |           |-- zingchart.min.js
    

Copy/paste the following template into your HTML document. To get started, our Chart Types page provides an overview of all of the different JavaScript charts we offer. We also have a ZingChart Gallery that we're continuously updating with our latest chart types, features, and styles.

<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1]-->
<script src="./Scripts/ZingChart/zingchart.min.js"></script>
<!-- You can also use the public class BundleConfig and import many scripts at once -->
<!-- @Scripts.Render("yourBundleName"); -->
<script>
  var chartData={
    "type":"line",  // Specify your chart type here.
    "series":[  // Insert your series data here.
      {"values":[5,20,15,25,10]}
    ]
  };
  window.onload=function(){  // Render Method[2]
    zingchart.render({ 
      id:'chartDiv',
      data:chartData,
      height:400,
      width:600
    });
  };
</script>
</head>
<body>
<!--Chart Placement[3]-->
<div id ='chartDiv'></div>
</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.