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. Try Plotly Studio now.

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

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: {
    text: '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], 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'}});

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

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: {
    text: 'Hover on <i>points</i> or <i>fill</i>'
  },
  xaxis: {
    range: [0,5]
  },
  yaxis: {
    range: [0,3]
  }
}

Plotly.newPlot('myDiv', data, layout)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var data = [\n {\n x: [0,0.5,1,1.5,2],\n y: [0,1,2,1,0],\n fill: 'toself',\n fillcolor: '#ab63fa',\n hoveron: 'points+fills',\n line: {\n color: '#ab63fa'\n },\n text: \"Points + Fills\",\n hoverinfo: 'text'\n },\n {\n x: [3,3.5,4,4.5,5],\n y: [0,1,2,1,0],\n fill: 'toself',\n fillcolor: '#e763fa',\n hoveron: 'points',\n line: {\n color: '#e763fa'\n },\n text: \"Points only\",\n hoverinfo: 'text'\n }]\n\nvar layout = {\n title: {\n text: 'Hover on <i>points</i> or <i>fill</i>'\n },\n xaxis: {\n range: [0,5]\n },\n yaxis: {\n range: [0,3]\n }\n}\n\nPlotly.newPlot('myDiv', data, layout)\n"}">