Filled Area Plots in JavaScript
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.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
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);
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: {
text: '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], stackgroup: 'one'},
{x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
{x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
];
Plotly.newPlot('myDiv', traces, {title: {text: 'stacked and filled line chart'}});
var plotDiv = document.getElementById('plot');
var traces = [
{x: [1,2,3], y: [2,1,4], stackgroup: 'one', groupnorm:'percent'},
{x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
{x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
];
Plotly.newPlot('myDiv', traces, {title: {text: 'Normalized 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: {
text: 'Hover on <i>points</i> or <i>fill</i>'
},
xaxis: {
range: [0,5]
},
yaxis: {
range: [0,3]
}
}
Plotly.newPlot('myDiv', data, layout)
