In Following example I've stacked column series with bullet labels on it. But as you can see in example there are few 0 values too. I am trying to set some minimum width to series so that bullet label is visible even if value is smaller or 0.
As you can see in series for year 2017, it starts with 0. But the label is not visible completely.
/**
* ---------------------------------------
* 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
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"year": "2016",
"europe": 1.5,
"namerica": 1.5,
"asia": 1.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0
}, {
"year": "2017",
"europe": 0,
"namerica": 1.7,
"asia": 1.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": "2018",
"europe": 1.8,
"namerica": 1.9,
"asia": 0,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
// Create axes
var 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;
// Create series
function 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;
series.minWidth = `100px`;
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX}";
labelBullet.label.fill = am4core.color("#fff");
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
chart.legend.position = 'bottom';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;
}<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>
There is no way to specify a minimum width/height (depending on axis rotation) as the column size is directly related to its data; setting a minimum size would misrepresent the column values in your chart.
A better solution is to hide the labels that don't fit by setting
hideOversizedto true on the label bullets and use tooltips instead with a chart cursor.