AM charts V.4

by roberts gailitis

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>
<div> 
<ul>
  <li> <button id="button1" style="font-size: 14px; padding: 5px 12px;"> <b> 1980 - 1987</b> </button> - Decrease of tanker fleet </li> 
  <li> <button id="button2" style="font-size: 14px; padding: 5px 12px;"><b>1987 - 2010 </b> </button>  - Correlation between tankers and (large) bulkcarriers </li>
  <li> <button  id="button3"style="font-size: 14px; padding: 5px 12px;"> <b>2010 - 2016</b> </button> - Boom of bulk cargo fleet  </li>
 </ul>
  </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

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

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


chart.data = [

 { 'year': '1980','Total fleet': '672142.5','Oil tankers': '337895.6','Bulk carriers': '181880.3','General cargo': '112840.9','Container ships': '10290.11','Other types of ships': '29235.64' },
{ 'year': '1981','Total fleet': '679704.8','Oil tankers': '338616.3','Bulk carriers': '184501.2','General cargo': '114832.9','Container ships': '11060.52','Other types of ships': '30693.84' },
{ 'year': '1982','Total fleet': '686028.9','Oil tankers': '334237.8','Bulk carriers': '193217.2','General cargo': '113293.8','Container ships': '12108.26','Other types of ships': '33171.79' },
{ 'year': '1983','Total fleet': '690093.1','Oil tankers': '323668.2','Bulk carriers': '204630.7','General cargo': '113269.1','Container ships': '12809.77','Other types of ships': '35715.38' },
{ 'year': '1984','Total fleet': '681538.9','Oil tankers': '304466.3','Bulk carriers': '212915.2','General cargo': '111863','Container ships': '14088.79','Other types of ships': '38205.51' },
{ 'year': '1985','Total fleet': '668140.1','Oil tankers': '284945.9','Bulk carriers': '218518.1','General cargo': '108308.4','Container ships': '17266.77','Other types of ships': '39101.01' },
{ 'year': '1986','Total fleet': '654327.4','Oil tankers': '258932.4','Bulk carriers': '227550.8','General cargo': '103921','Container ships': '18732.55','Other types of ships': '45190.68' },
{ 'year': '1987','Total fleet': '632237.8','Oil tankers': '238144.5','Bulk carriers': '226967.4','General cargo': '100222','Container ships': '20180.65','Other types of ships': '46723.25' },
{ 'year': '1988','Total fleet': '625045.8','Oil tankers': '234908.4','Bulk carriers': '223659.1','General cargo': '97110.25','Container ships': '21489.53','Other types of ships': '47878.48' },
{ 'year': '1989','Total fleet': '620734.2','Oil tankers': '233608.5','Bulk carriers': '222432','General cargo':...