Layered Column Chart

In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization. To achieve that with amCharts 4, you just disable clustering on each series (<code>series.clustered = false</code>) and then make columns in one of them wider (or narrower) than the other (<code>series2.columns.template.width = am4core.percent(50)</code>).

by Rogério Saraceni

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-unidade"></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-unidade {
  width: 100%;
  height: 500px;
}

JavaScript

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

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

    // Add percent sign to all numbers
    chart.numberFormatter.numberFormat = "#.3'%'";

    // title
    var title = chart.titles.create();
    title.text = "Conclusão das Entregas";
    title.text = "Title";
    title.fontWeight = 400;
    title.align = "center";
    title.marginBottom = 10;    

    // Add data
    chart.data = [{
        "category": "Gestão",
        "Real": 3.5,
        "Corporativa": 4.2
    }, {
        "category": "Gente",
        "Real": 1.7,
        "Corporativa": 3.1
    }, {
        "category": "Gestão Pedagógica",
        "Real": 2.8,
        "Corporativa": 2.9
    }, {
        "category": "Comercial e Marketing",
        "Real": 2.6,
        "Corporativa": 2.3
    }, {
        "category": "Administração e Finanças",
        "Real": 1.4,
        "Corporativa": 2.1
    }, {
        "category": "Infra e Tecnologia",
        "Real": 2.6,
        "Corporativa": 4.9
    }];

    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;
    categoryAxis.renderer.labels.template.fontSize = 11;
    categoryAxis.renderer.grid.template.disabled = true;
    //categoryAxis.renderer.labels.template.rotation = -45;

    // Configure axis label
    var label = categoryAxis.renderer.labels.template;
    label.truncate = true;
    label.maxWidth = 120;
    label.tooltipText = "{category}";

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = "Alcance:";
    valueAxis.title.fontWeight = 800;
    valueAxis.renderer.grid.template.disabled = true;

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
   ...