100% Stacked Column Chart

100% stacked column or bar chart is a good way to display some categories of a whole changing over time. For example, a company may use 100% stacked column chart to display what product lines contributed to its revenue by calendar quarter. The downside is that in such a chart it is quite difficult to visually compare the changes over time (except for the first item/series).

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.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
  {
    category: "One",
    value1: 1,
    value2: 5,
    value3: 3
  },
  {
    category: "Two",
    value1: 2,
    value2: 5,
    value3: 3
  },
  {
    category: "Three",
    value1: 3,
    value2: 5,
    value3: 4
  },
  {
    category: "Four",
    value1: 4,
    value2: 5,
    value3: 6
  },
  {
    category: "Five",
    value1: 3,
    value2: 5,
    value3: 4
  },
  {
    category: "Six",
    value1: 2,
    value2: 13,
    value3: 1
  }
];

chart.colors.step = 2;
chart.padding(30, 30, 10, 30);
chart.legend = new am4charts.Legend();

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
/* valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true; */
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;


var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series1.name = "Series 1";
series1.dataFields.categoryY = "category";
series1.dataFields.valueX = "value1";
series1.dataFields.valueXShow = "totalPercent";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";

var bullet1 = series1.bullets.push(new...