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 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);
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 data = [
  {
    x: [0,0.5,1,1.5,2],
    y: [0,1,2,1,0],
    fill: 'toself',
    fillcolor: '#ab63fa',
    hoveron: 'points+fills',
    line: {
      color: '#ab63fa'
    },
    text: "Points + Fills",
    hoverinfo: 'text'
  },
  {
    x: [3,3.5,4,4.5,5],
    y: [0,1,2,1,0],
    fill: 'toself',
    fillcolor: '#e763fa',
    hoveron: 'points',
    line: {
      color: '#e763fa'
    },
    text: "Points only",
    hoverinfo: 'text'
  }]

var layout = {
  title: 'Hover on points or fill',
  xaxis: {
    range: [0,5]
  },
  yaxis: {
    range: [0,3]
  }
}

Plotly.plot('graph', data, layout) 
Still need help?
Contact Us

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