See what ZingChart's 35+ built-in chart types & modules can do for your data visualization projects.

Create animated & interactive charts with hundreds of thousands of data records using the ZingChart JavaScript charting library.

Buy a License

Create a ZingChart using a simple to understand JSON configuration

Explore the ZingChart Demo Gallery

Go to Demo Gallery

ZingChart Integrates with Popular JavaScript Development Stacks

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

Vue

Easily add charts in your Vue application with our component.

  1. Install via NPM
    npm install zingchart-vue
  2. Register the component in your App
    import Vue from 'vue';
    import zingchartVue from 'zingchart-vue';
    
    Vue.component('zingchart', zingchartVue);
  3. Add the component to your markup
    <zingchart :data="myConfig" :height="300" :width="600"/>
  4. Define your chart configuration in your app
    export default {
      data() {
        return {
          type: 'line',
          series: [{
            values: [43,23,54,54,39,47,38,59,39,49]
          }]
        }
      }
    }

View on GitHub More Details

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 IconEmber

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 IconBackbone

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 IconPHP

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

We've been trusted with advanced data-visualization solutions for organizations, worldwide, since 2008

Current Version:

Released November 18, 2019

Features

  • New Chart Type: Violin Charts
  • New Chart Type: Flame Charts
  • Added item > highlightstate and marker > highlightstate on legend
  • Extended boxplot format of data to [key, min, lowerq, med, upperq, max] format demo here

New Documentation

Notable Fixes

  • Added legend_mouseover and legend_mouseout events
  • Added option to set license information to zingchart namespace with `zingchart.
  • BoxPlot updates:
    • Fixed issue with attributes from series items not being transferred to boxplot series
  • Data export updates: Fixed issue with datetime values in HTML table ignoring utc and timezone parameters
  • Added data_export event which fires for every value being exported and allows for optional preformatting
  • Added more flexibility to range plots in mixed chart context
  • BubblePie charts work now when placed in a multichart graphset
  • Cleared WorldCountries map removed specific @EUROPE filters for NOR and ISL. RUS@EUROPE and RUS@ASIA will however stay as a different tokens due to geographic specificity
  • Fixed sorting of plots via legend
  • Fixed bug with chart auto layout when browsing legend pages
  • Fixed issue with ring charts loaded via custom build
  • Fixed problem with custom builds (created via build generator) failing to render ring charts.
  • Fixed issue with shadow not being rendered in specific cases
  • Fixed issues with global 'mouseout' event
  • Fixed issues with legend items text setup
  • Fixed issues with scale string labels being treated as numbers
  • Fixed issues with selection not being reset in specific cases
  • Fixed maps blocking page scroll (via mouse wheel). Page scroll is no longer blocked by map charts. In case scrolling on maps is enabled, use the ALT key to force page scroll instead of map zooming.
  • Renamed conflicting API's. Renamed object related 'getobjectinfo' API to 'getlabelinfo' and 'getshapeinfo' to prevent name conflict with the generic 'getobjectinfo' API
  • Added Math.log10() polyfill for IE
Full Change Log Download ZingChart

Made with Love in San Diego, California

About the Company

We created ZingChart because other JavaScript charting libraries didn’t suit our needs as developers and data visualization professionals.

ZingChart Location Map