Stacked Area

Stacked Area Chart (also known as Stacked Area Plot) is a variation on a simple Area Chart with multiple areas stacked on top of each other. This allows comparing the evolution of the whole as well as contributions of individual parts over a period. <h2>Stacked line series</h2> Line series can easily be stacked by setting a single property: <code>stacked</code>. That's it - the chart will take care of the rest. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Stacking"]More about stacking series[/amb] <h2>Toggling and pre-hiding series</h2> Series can be easily toggled via legend. A series can also start as pre-hidden if you set its <code>hidden</code> property to <code>true</code>. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Pre_hiding_series"]More about pre-hiding series[/amb] <h2>Vertical ranges and guides</h2> Any axis can contain vertical bands or guide lines added, with an optional label, to indicate certain ranges or points in the chart. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/"]More about axis ranges and guides[/amb] <h2>HTML tooltips</h2> When displaying a lot of rich information in a tooltip, sometimes SVG is not enough. In those cases, like in this demo, we can opt for an HTML-enabled tooltip, setting <code>tooltipHTML</code>. [amb href="https://www.amcharts.com/docs/v4/tutorials/tooltips-with-rich-html-content/"]More info about HTML tooltips[/amb]

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  "year": 1994,
  "cars": 1587,
  "motorcycles": 650,
  "bicycles": 121,
  "color" : "#0FA3B1"
}, {
  "year": 1995,
  "cars": 1567,
  "motorcycles": 683,
  "bicycles": 146,
   "color" : "#0FA3B1"
}, {
  "year": 1996,
  "cars": 1617,
  "motorcycles": 691,
  "bicycles": 138,
   "color" : "#0FA3B1"
}, {
  "year": 1997,
  "cars": 1630,
  "motorcycles": 642,
  "bicycles": 127,
   "color" : "#B5E2FA"
}, {
  "year": 1998,
  "cars": 1660,
  "motorcycles": 699,
  "bicycles": 105,
   "color" : "#B5E2FA"
}, {
  "year": 1999,
  "cars": 1683,
  "motorcycles": 721,
  "bicycles": 109,
   "color" : "#EDDEA4"
}, {
  "year": 2000,
  "cars": 1691,
  "motorcycles": 737,
  "bicycles": 112,
   "color" : "#EDDEA4"
}, {
  "year": 2001,
  "cars": 1298,
  "motorcycles": 680,
  "bicycles": 101,
   "color" : "#EDDEA4"
}, {
  "year": 2002,
  "cars": 1275,
  "motorcycles": 664,
  "bicycles": 97,
   "color" : "#F7A072"
}, {
  "year": 2003,
  "cars": 1246,
  "motorcycles": 648,
  "bicycles": 93,
   "color" : "#F7A072"
}, {
  "year": 2004,
  "cars": 1318,
  "motorcycles": 697,
  "bicycles": 111,
   "color" : "#DDCAD9"
}, {
  "year": 2005,
  "cars": 1213,
  "motorcycles": 633,
  "bicycles": 87,
   "color" : "#61988E"
}, {
  "year": 2006,
  "cars": 1199,
  "motorcycles": 621,
  "bicycles": 79,
    "color" : "#61988E"
}, {
  "year": 2007,
  "cars": 1110,
  "motorcycles": 210,
  "bicycles": 81,
    "color" : "#61988E"
}, {
  "year": 2008,
  "cars": 1165,
  "motorcycles": 232,
  "bicycles": 75,
    "color" : "#61988E"
}, {
  "year": 2009,
  "cars": 1145,
  "motorcycles": 219,
 ...