Blog Help & Support Contact About Login

All Your Dataviz Needs In One Library

Build Better, More Engaging JavaScript Charts

See Some Charts

JavaScript Charts With a Simple, Declarative Syntax

Try Zingchart For Free


        

  

ZingChart and Your Stack

View On Github

ZingChart is dependency free and pure JavaScript.

  1. Install via NPM or Bower
    npm install zingchart
    OR
    Use the ZingChart CDN
    <script src='https://cdn.zingchart.com/zingchart.min.js'></script>
  2. Include the library in your HTML document
      // Just before the closing body tag is best
      <script src='path/to/zingchart.min.js'></script>
    </body>
  3. Create your chart element.
    <div id='myChart'></div>
  4. Render your chart!
    <script>
      zingchart.render({
        id: 'myChart',
        data: {
          type: 'line',
          series: [{
            values: [54,23,34,23,43],
          }, {
            values: [10,15,16,20,40]
          }]
        }
      });
    </script>

View on GitHub  

ZingChart's AngularJS wrapper helps you create JavaScript charts with two-way data binding.

  1. Install via NPM or Bower
    npm install zingchart-angularjs
  2. Inject the directive into your application
    angular.module('myApp', ['zingchart-angularjs']);
  3. Configure your chart through a scope variable
    $scope.myJson = {
      type : 'line',
      series : [
        { values : [54,23,34,23,43] },
        { values : [10,15,16,20,40] }
      ]
    };
  4. Insert the ZingChart-AngularJS directive into your application
    <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>

View on GitHub

Create interactive JavaScript charts all in PHP with ZingChart's PHP wrapper.

  1. Install via Composer
    composer require zingchart/php_wrapper
  2. Include the library
    require __DIR__ . '/vendor/autoload.php;
  3. Render your chart
    $zc = new ZC("myChart");
    $zc->setChartType("bar");
    $zc->setSeriesData([1,4,2,6,3]);
    $zc->render();

View on GitHub

Easily create and modify JavaScript charts with ZingChart's jQuery wrapper

  1. Include jQuery, ZingChart, and the jQuery wrapper
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.jquery.min.js"></script>
  2. Create a <div> with an ID
    <div id="myChart"></div>
  3. Create your chart inside the $(document).ready() function
    $(document).ready(function() {
      $("#myChart").zingchart({
        "data":{
          "type": "line",
          "series": [
            { "values": [1,2,5,3,9,4] }
          ]
        }
      });
    })

View on GitHub

Quickly create dynamic JavaScript charts with ZingChart and React

  1. Install via NPM
    npm install zingchart-react
  2. Add your chart element to the DOM
    <div id="myContainer"></div>
  3. Require the ZingChart component
    var ZingChart = require('zingchart-react').core;
  4. Create and render your chart
    var myConfig = {
      type: "bar",
      series : [
        { values : [35,42,67,89,25,34,67,85] }
      ]
    };
    
    React.render(
        <ZingChart id="myChart" height="300" width="600" data={myConfig} />,
        document.getElementById('myContainer')
    );

View on GitHub

Generate interactive JavaScript charts with ZingChart's custom Ember component

  1. Install the ZingChart Ember component
    npm install --save ember-zingchart
    ember g ember-zingchart
  2. Create a handlebars template where you want your chart to render
    {{ember-zingchart renderOptions=myRenderOptions}}
  3. Set the render options in the controller
    import Ember from 'ember';
    
    let _renderOptions = {
      height: 400,
      width: "100%",  
      data: {
        type: "bar",
        series : [
          { values : [35,42,67,89,25,34,67,85] }
        ]
      }
    }
    
    export default Ember.Controller.extend({
        myRenderOptions: _renderOptions
    });
    

View on GitHub

Turn simple Models and Views into snazzy JavaScript charts with ZingChart's Backbone wrapper

  1. Include the ZingChart library and this wrapper
    <script src="cdn.zingchart.com/zingchart.min.js"></script>
    <script src="cdn.zingchart.com/backbone/backbone.zingchart.min.js"></script>
  2. Create the target element in the DOM
    <div id="chartDiv"></div>
  3. Create your data Model
    var chartData = new ZingChart.ZingChartModel({
      data: [[3,2,3,3,9] , [1,2,3,4,5]],
      charttype: 'bar',
      width: 500,
      height: 400
    });
  4. Create your chart View
    var chartView = new ZingChart.ZingChartView({
      model: chartData,
      el:  $('#chartDiv')
    });
  5. Render your chart
    chartView.render();

View on GitHub

Dozens of Built-In Chart Types

View The Full Chart Gallery

Current Version: 2.6.0

Released 5-April-2017

ZingChart version 2.6.0 includes several new & updated features, bug fixes, and documentation updates.

  • ZingChart added new maps functionality. The new updates include built in zooming with controls demo
  • Stacked bar attributes %stack-average and %stack-length demo
  • New svg export functionality. You no longer need just canvas to use getimagedata demo
  • Improved Bar Chart rendering speed with mode:'fast' coupled with maxTrackers:0 will increase the render time by over half. demo
  • 3d toolbar has been added back into the build demo
  • 3d chart logic was revamped to allow annotations and cooler depth styling cool demo

View full changelog

Recent Blog Posts

View More

Customers

Some of the world's biggest companies have trusted our charts to visualize their data.

ZingChart's customers include Apple, Boeing, Adobe, Microsoft, Cisco, Nasdaq, Google, Arrow, and many more

Made with in San Diego

Our other solutions fell short, so we created ZingChart to run big data in JavaScript charts that are fast, stylish, and interactive.

More about ZingChart