Visit to learn more about our new JavaScript library for data grids & data tables
ZingChart Logo
Main Menu
 Show Nav
On This Page

Your First JavaScript Chart

Welcome to ZingChart! Lets go over some basic chart elements to get a better understanding of how the library works.

Hello ZingChart World

Use the following steps to get your first chart going

  1. Copy
    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.
     <script src=""></script>
  2. Paste inside the <head></head> tag.
  3. Make your first chart!

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

<!DOCTYPE html>
  <meta charset="utf-8">
  <!--Script Reference[1]-->
  <script src=""></script>
  <!--Chart Placement[2]-->
  <div id="chartDiv"></div>
    var chartData = {
      type: 'bar',  // Specify your chart type here.
      title: {
        text: 'My First Chart' // Adds a title to your chart
      legend: {}, // Creates an interactive legend
      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


  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. 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.
  3. Chart Placement - The template starts you off with a single chart. To add a second (or more) charts, see our Adding Additional Charts page.
  4. Advanced Developers: Download the ZingChart library or get it from GitHub, and then place the scripts in your working directory.

 Download  Get it on Github