Show stack total in CategoryAxis
This demo shows how we can create a separate Series with label bullets to show stack total right to a CategoryAxis label.
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/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { year: "2016", empty: 0, europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 0.3, meast: 0.2, africa: 0.1 }, { year: "2017", empty: 0, europe: 2.6, namerica: 2.7, asia: 2.2, lamerica: 0.3, meast: 0.3, africa: 0.1 }, { year: "2018", empty: 0, europe: 2.8, namerica: 2.9, asia: 2.4, lamerica: 0.3, meast: 0.3, africa: 0.1 }];
chart.legend = new am4charts.Legend();chart.legend.position = "right";
// Create axesvar categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";categoryAxis.renderer.grid.template.opacity = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());valueAxis.min = 0;valueAxis.renderer.grid.template.opacity = 0;valueAxis.renderer.ticks.template.strokeOpacity = 0.5;valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");valueAxis.renderer.ticks.template.length = 10;valueAxis.renderer.line.strokeOpacity = 0.5;valueAxis.renderer.baseGrid.disabled = true;valueAxis.renderer.minGridDistance = 40;valueAxis.calculateTotals = true;
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = field; series.dataFields.categoryY = "year"; series.stacked = true; series.name = name;
var labelBullet = series.bullets.push(new am4charts.LabelBullet()); labelBullet.locationX = 0.5; labelBullet.label.text = "{valueX}"; labelBullet.label.fill = am4core.color("#fff");
return series;}
// some space needed for the total labelcategoryAxis.renderer.labels.template.marginRight = 40;// this is the total label series, it is invisiblevar series = createSeries("empty", "empty");// hidden in legendseries.hiddenInLegend = true;// bullets can't be maskedseries.maskBullets = false;
var bullet = series.bullets.getIndex(0);bullet.label.text = "[bold]{valueX.total.formatNumber('#.#')}[/]";bullet.label.truncate = false;bullet.label.fill = new am4core.InterfaceColorSet().getFor("text");bullet.label.paddingRight = 10;bullet.label.horizontalCenter = "right";
createSeries("europe", "Europe");createSeries("namerica", "North America");createSeries("asia", "Asia");createSeries("lamerica", "Latin America");createSeries("meast", "Middle East");createSeries("africa", "Africa");<div id="chartdiv"></div>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;}show-stack-total-in-categoryaxis