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 <script src=""></script>

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.

  1. Paste inside the tag.

  2. Make your first 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 chartDivand 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.

Moving Forward