Skip to navigation

Welcome to the ZingChart documentation tool. Our goal is to make implementing ZingChart as easy and intuitive as possible (note the CSS-like attribute naming). Look here for information on getting started, chart rendering features, chart styling and customization, API methods for updating and modifying charts, API events, and links to other resources.

Getting Started

These simple tutorials walk you through your first charts with ZingChart and introduce important concepts such as how to include a ZingChart object in a page, how to best incorporate your data, and how to begin adding and manipulating core chart features.

Get started now

JSON Attributes/Syntax

In ZingChart, charts are primarily defined using JSON syntax. ZingChart contains a rich set of options for configuring all chart aspects including: plot data, scales, callouts, legends, title, interactive elements and numerous visual characteristics.

Learn more

API Methods & Events

ZingChart provides a rich API for controlling chart characteristics. Re-render a plot (reload), load new data (setseriesdata), modify existing charts (modifyplot), zoom in on a data range (zoomto), toggle various interactive features (togglelegend), and more.

Learn more

Chart Types

Each chart type in ZingChart is unique. Certain charts and graphs may have specific attributes or require a particular method of setting data in order to render correctly.

Learn more


ZingChart is home to a plethora of useful features designed to help you create the charts of your dreams. These articles about features will provide insight into the unique behaviors of each feature and help you to incorporate them in your charts.

Learn more


These tutorials will carry you through the steps of creating a chart. Start by rendering a simple chart, then add additional data, data indicators, and styling attributes to your chart.

Learn more
ZingChart Builder

Looking for the Builder?
It's still here!

Things are changing in 2014! Sign up to be the first to know.

Next » « Prev
JSON Javascript

Next » « Prev
Chart View Code View

If you like this chart, try these options:

Edit This Chart Share This Chart Try ZingChart for FREE!
$("#demo1").bind('click', function() {
  zingchart.exec("demo-chart", "addnode", {
    "value":zcdocs.utils.rvalue(0, 50)
$("#reset").bind('click', function() {
  zingchart.exec("demo-chart", "reload");