100% stacked area chart

<h2>Using calculated values for series</h2> In amCharts 4, Series can be drawn from a variety of auto-calculated values, not necessarily the absolute ones. In this case, we are setting <code>valueYShow</code> data field to <code>"totalPercent"</code> which is an auto-calculated value, producing a 100% stack chart. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#100_stacks"]More info about 100% stacks and "show" data fields[/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 ankit_19

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.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

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

// Add data
chart.data = [{
  "day": "1",
  "cars": 1567,
  "motorcycles": 683
}, {
  "day": "2",
  "cars": 1617,
  "motorcycles": 691
}, {
  "day": "3",
  "cars": 1630,
  "motorcycles": 642
}, {
  "day": "4",
  "cars": 1660,
  "motorcycles": 699
}, {
  "day": "5",
  "cars": 1683,
  "motorcycles": 721
}, {
  "day": "6",
  "cars": 1691,
  "motorcycles": 737
}, {
  "day": "7",
  "cars": 1298,
  "motorcycles": 680
}, {
  "day": "8",
  "cars": 1275,
  "motorcycles": 664
}, {
  "day": "9",
  "cars": 1246,
  "motorcycles": 648
}, {
  "day": "10",
  "cars": 1218,
  "motorcycles": 637
}, {
  "day": "11",
  "cars": 1213,
  "motorcycles": 633
}, {
  "day": "12",
  "cars": 1199,
  "motorcycles": 621
}, {
  "day": "13",
  "cars": 1110,
  "motorcycles": 210
}, {
  "day": "14",
  "cars": 1165,
  "motorcycles": 232
}, {
  "day": "15",
  "cars": 1145,
  "motorcycles": 219
}, {
  "day": "16",
  "cars": 1163,
  "motorcycles": 201
}, {
  "day": "17",
  "cars": 1180,
  "motorcycles": 285
},
 {
  "day": "18",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "19",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "20",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "21",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "22",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "23",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "24",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "25",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "26",
  "cars": 1180,
  "motorcycles": 285
}, {
  "day": "27",
  "cars": 1180,
  "motorcycles": 285
}, {
 ...