See what ZingChart's 50+ 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.

Try for freeor See our pricing
Population Distribution by Age Group in 2052Responsive Live Update DashboardArea Chart (Displays Nodes on Hover)Pie Transform OptionsAnimated Radar Chart ft. Pet DataWorld Population by CountrySun Burst Plugin Example ft. File System DataElection Predictions MapRange Chart with Rultes & Scale MarkersPoints Along a Sine WaveColorful Chord Management ChartMixed Data Set (Clustered, Stacked, and Regular)Chart with Draggable Y-AxisHeatmap Over Radar Chart
See More Demos

Create a ZingChart using a simple to understand JSON configuration

Choose from Over 50 Built-In Chart Types and Modules

View all chart Types

ZingChart is Packed with Helpful Features

View Features
Scalable, Big Data ChartsScalable, Big Data Optimized for data sets ranging from 10,000 to 100,000 records.
Built-In InteractivityBuilt-In Interactivity High-performance real-time charts with interactive, drill-down features.
Api Events and MethodsAPI Events and Methods Make your charts come alive by modifying them with your custom code.
Dependency-FreeDependency-Free 100% dependency-free: No need for third-party frameworks or plugins.

ZingChart Integrates with Popular JavaScript Development Stacks

JavaScript

ZingChart is dependency free and pure JavaScript.

  1. Install via NPM
    npm install zingchart

    After downloading package locally, include the script using ES6 Modules:

    import {zingchart, ZC} from './zingchart/es6.js';
// Modules must be imported EXPLICITLY when using es6 version
import './zingchart/modules-es6/zingchart-pareto.min.js';

    For quickest download, 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 More Details

React

Quickly create dynamic JavaScript charts with ZingChart and React.

  1. Install via NPM
    npm install zingchart-react
  2. Include zingchart lib and the component
    import 'zingchart/es6';
import ZingChart from 'zingchart-react';
class App extends Component { ... }
  3. Build a chart configuration
    class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  } ...
}
  4. Create and render your chart
    class App extends Component {
...
render() {
  return (
    <div>
      <ZingChart data={this.state.config}/>
    </div>
  );
}
...

View on GitHub More Details

Angular

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

  1. Install via NPM
    npm install zingchart-angular
  2. Include the module in your module declaration file
    import { ZingchartAngularModule } from 'zingchart-angular';

@NgModule({
imports: [
  ...
  ZingchartAngularModule,
],
})
  3. Define your chart configuration in your component
    config:zingchart.graphset = {
type: 'line',
series: [{
  values: [3,6,4,6,4,6,4,6]
}],
};
  4. Add your component to the markup
    <zingchart-angular [config]="config" [height]="500"></zingchart-angular>

View on GitHub More Details

Vue

Easily add charts in your Vue application with our component.

  1. Install via NPM
    npm install zingchart-vue
  2. Register the component and include zingchart in your app
    import 'zingchart/es6';
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

Web Component

Easily add charts in your application with our web component.

  1. Install via NPM
    npm install zingchart-web-component
  2. Import the generic zingchart component
    import ZingChart from 'zingchart-web-component';
customElements.define('zing-chart', ZingChart);
    OR Manually import each chart and register it as a web component
    import {Line} from 'zingchart-web-component/charts/ZCLine.js';
customElements.define('zc-line', Line);
  3. Add the component to your markup
    <zing-chart 
  data='{"type": "line", "series": {["values": 1,2,3,4,5,6,4]}}'>
</zing-chart>
    Or While everything can be configured via the data property, you can also fully configure ZingChart via child components
    <zc-line>
  <zc-legend draggable></zc-legend>
  <zc-series>
    <zc-series-0 values="[3,4,3,2,4,3,3]"></zc-series-0>
  </zc-series>
</zc-line>

View on GitHub More Details

AngularJS

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

  1. Install via NPM
    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

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

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

Svelte

Quickly create dynamic JavaScript charts with ZingChart and Svelte.

  1. Install via NPM
    npm install zingchart-svelte
  2. Include zingchart lib and the component
    import 'zingchart/es6';
import ZingChart from 'zingchart-svelte';
  3. Build a chart configuration
    const config = {
  type: 'bar',
  series: [
    { values: [4,5,3,4,5,3,5,4,11] }
  ]
}
  4. Add your component to the markup
    <ZingChart data={config} />

View on GitHub More Details

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

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

List of ZingChart clients' logos.

We've Got Your Business Concerns Covered

Pricing That Suits YouPricing That Suits You Our prices fit a variety of use cases, from starting small to going big.
Custom DevelopmentCustom Development Need us to build a feature for you or build your project? We can do that!
Support AvailableSupport Available We offer advanced support options for sophisticated solutions.
Consulting ServicesConsulting Services As experts in the data visualization space, we offer project consulting.

Product News

Current Version: v2.9.13

Released December 4, 2023

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