## plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

# 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.

#### Basic Overlaid Area Chart

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

#### Overlaid Area Chart Without Boundary Lines

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

#### Stacked Area Chart

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

#### Select Hover Points

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?