Toggling stack type
This demo shows how we can toggle stack types from absolute to 100% dynamically via external controls using chart API.
Open in:New tab
/** * --------------------------------------- * 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/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
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.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.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.categoryX = "category";series1.dataFields.valueY = "value1";series1.dataFields.valueYShow = "totalPercent";series1.dataItems.template.locations.categoryX = 0.5;series1.stacked = true;series1.tooltip.pointerOrientation = "vertical";
var bullet1 = series1.bullets.push(new am4charts.LabelBullet());bullet1.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";bullet1.label.fill = am4core.color("#ffffff");bullet1.locationY = 0.5;
var series2 = chart.series.push(new am4charts.ColumnSeries());series2.columns.template.width = am4core.percent(80);series2.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";series2.name = "Series 2";series2.dataFields.categoryX = "category";series2.dataFields.valueY = "value2";series2.dataFields.valueYShow = "totalPercent";series2.dataItems.template.locations.categoryX = 0.5;series2.stacked = true;series2.tooltip.pointerOrientation = "vertical";
var bullet2 = series2.bullets.push(new am4charts.LabelBullet());bullet2.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";bullet2.locationY = 0.5;bullet2.label.fill = am4core.color("#ffffff");
var series3 = chart.series.push(new am4charts.ColumnSeries());series3.columns.template.width = am4core.percent(80);series3.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";series3.name = "Series 3";series3.dataFields.categoryX = "category";series3.dataFields.valueY = "value3";series3.dataFields.valueYShow = "totalPercent";series3.dataItems.template.locations.categoryX = 0.5;series3.stacked = true;series3.tooltip.pointerOrientation = "vertical";
var bullet3 = series3.bullets.push(new am4charts.LabelBullet());bullet3.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";bullet3.locationY = 0.5;bullet3.label.fill = am4core.color("#ffffff");
chart.scrollbarX = new am4core.Scrollbar();
var is100 = true;function toggleStack() { if (is100) { chart.series.each(function (series) { series.dataFields.valueYShow = undefined; });
valueAxis.min = undefined; valueAxis.max = undefined;
is100 = false; } else { chart.series.each(function (series) { series.dataFields.valueYShow = "totalPercent"; }); valueAxis.min = 0; valueAxis.max = 100; is100 = true; }
chart.invalidateData();}<div id="chartdiv"></div><input type="button" value="toggle stack type" onclick="toggleStack()" />@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
body { font-family: "Archivo Narrow";}
#chartdiv { width: 100%; height: 400px;}toggling-stack-type