plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Filled Area Plots in plotly.js

How to make a D3.js-based filled area plot in javascript. An area chart displays a solid color between the traces of a graph.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [0, 2, 3, 5],
  fill: 'tozeroy',
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [3, 5, 1, 7],
  fill: 'tonexty',
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data, layout);
var plotDiv = document.getElementById('plot');
var traces = [
	{x: [1,2,3], y: [2,1,4], fill: 'tozeroy'},
	{x: [1,2,3], y: [1,1,2], fill: 'tonexty'},
	{x: [1,2,3], y: [3,0,2], fill: 'tonexty'}
];

function stackedArea(traces) {
	for(var i=1; i<traces.length; i++) {
		for(var j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) {
			traces[i]['y'][j] += traces[i-1]['y'][j];
		}
	}
	return traces;
}

Plotly.newPlot(plotDiv, stackedArea(traces), {title: 'stacked and filled line chart'});
var trace1 = {
  x: [1, 2, 3, 4],
  y: [0, 2, 3, 5],
  fill: 'tozeroy',
  type: 'scatter',
  mode: 'none'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [3, 5, 1, 7],
  fill: 'tonexty',
  type: 'scatter',
  mode: 'none'
};

var layout = {
  title: 'Overlaid Chart Without Boundary Lines'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data, layout);
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.