Stream Graph


ZingChart supports two stream chart types:

  • Horizontal(Default)
  • Vertical

Render Plugin

Stream graphs require you to put the zingchart.render method inside of the plugin callback. This will dynamically fetch the plugin and render the grid.

// load module stream and in callback success of that
// module loading, render the chart
zingchart.loadModules('stream', function() {
  	id : 'myChart', 
  	data : myConfig, 
  	height: 400, 
  	width: '100%' 

Note: You can also load the plugin manually by using the HTML or JavaScript referenced below. If you load the plugin manually, you DO NOT have to use the loadModules method as a wrapper for your render function.


<script src=""></script>


import {zingchart, ZC} from 'zingchart/es6';
// to import the stream chart module
import 'zingchart/modules-es6/zingchart-stream.min.js';


Use the type="stream" or type="vstream" attribute in your chart object to define horizontal or vertical streams, respectively.

	type: 'stream', // vstream will present a vertical stream


To enter data into the stream chart, use the series array. Each object in the series array requires a values array to function properly. You'll also need to add a values array to the scaleX object if you are entering data as a single dimensional array. You can enter in data as a single dimensional array or a two dimensional [timestamp, value] array.

Note: Learn more about the series array with our series JSON Configuration page.


For a single dimensional array, define your x-values with a values array inside the scaleX object. Define your corresponding y-values with a values array inside the series object.



For a two dimensional array, you can plot the data all within the values array in a [x,y] format.

			"values": [


Stream graphs can be hooked up to feed stream data into the chart. This is the intended purpose for stream graphs. The object format you should pass to the chart should look like this:

Note: For more information on hooking your chart up to real-time data, refer to our Real-Time Feeds Tutorial.

	plot0: null,  // insert a null value to create space
	plot1: 3, // first plot
	plot2: 18, // second plot
	// optional label format or unix millisecond timestamp (for both	plots)
	scaleX: 1442908800000 // or label - "13:33:48"