JavaScript Charts

The developer's solution for visualizing data in web apps.

Click highlights to edit chart
View Demos

Easily Integrate ZingChart With Your Development Stack

JavaScript

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. Add your chart element wrapper
    
    <div id="myChart"></div>
                    
  3. Include the library in your HTML document and then render your chart!
    
      <!-- Just before the closing body tag is best -->
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script>
        zingchart.render({
          id: 'myChart',
          data: {
            type: 'line',
            series: [
              { values: [54,23,34,23,43] },
              { values: [10,15,16,20,40] }
            ]
          }
        });
      </script>
    </body>
                    

View on GitHub

React

Quickly create dynamic JavaScript charts with ZingChart and React

  1. Install via NPM
    
    npm install zingchart-react
                    
  2. Add your chart element
    
    <div id="myContainer"></div>
                    
  3. Require the ZingChart com
    
    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

AngularJS

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" data-zc-json="myJson" data-zc-height=500 data-zc-width=600></zingchart>
                    

View on GitHub

JQuery

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

Ember

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

Backbone

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

PHP

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

Released March 7, 2019

New Features

- Heatmap Plugin - standalone or integrated with various existing chart types.
- Heatmap over XY chart. Demo
- Heatmap over Radar chart. Demo
- Heatmap over geographic maps, static. Demo
- Heatmap over geographic maps, live. Demo
- Heatmap configured as scatter chart with 1M nodes. Demo
- Standalone Heatmap set up to mimic the Game of Life. Demo
- Various performance related updates.
- Added logarithmic progression on treemaps.

Bug Fixes

- Fixed label positioning issues on maps.
- Fixed inconsistent zoom levels when scrolling charts.
- Various minor fixes.

By @ZingChart

Customers

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

Made with in sunny San Diego

We created ZingChart because other JavaScript charting libraries didn’t suit our needs. ZingChart is a fast, interactive, & stylish solution made to run big data.

More about ZingChart