Stream Graph


JavaScript stream graph is a method of viewing data over time as a stream. The overall result is similar to a stacked area chart but the result here is displayed over time. Stream Graphs are ideal for displaying high-volume datasets, in order to discover trends and patterns over time across a wide range of categories.


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%' 

You can load the plugin manually by importing that script module explicitly.

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';


ZingChart stream graphs use the type="stream" or type="vstream" attribute in your chart object to define horizontal and vertical streams.

let chartConfig = {
	type: 'stream', // vstream will present a vertical stream


Stream graphs use the same data format as a cartesian x/y chart's. You can enter in data as single dimensional array or a two dimensional [timestamp, value] array. To enter data into the stream chart, use the series array. Each object in the series array requires a values array to function properly. More information regarding the series array is available here.


A single dimensional array with values defined in the scaleX object and the series object.

			"text":"All Sites",


You can plot the data all within the series in a [x,y] format for the values array.

			"text":"All Sites",
			"values": [


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

See our docs on feeds to get a better understanding of dynamic data in ZingChart.

	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"


Got a question about how depth charts work? We are happy to help. Email or start a chat right here on this page for help.