Try ZingChart

Follow a few easy steps to get up and running with a free version of ZingChart.

  1. Get ZingChart

    There are 4 ways to access the ZingChart library.
    Browse your options below and decide which is right for you:

    CDN      Download      Bower      NPM

  2. Create your first chart

    Download or copy the template below, or grab a template from our gallery or chart types pages and modify from there.

    Gallery      Chart Types

  3. Check out our resources for ZingChart beginners

    ZingChart Beginners' Series      Tutorials

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

For speed + ease

For reliability + offline work

Or install via

CDN

Download

Bower

NPM

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 "http://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="http://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

|   index.html
    |   zingchart
    |   |-- zingchart.min.js
    |   |-- modules
    |       |-- ...
    |   |-- phantomjs
    |       |-- ...

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