Hide or relocate label bullets for small columns
This demo shows how label bullets can automatically be hidden or relocated for small columns.
Hide labels
Section titled “Hide labels”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);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { category: "Research", value: 450 }, { category: "Marketing", value: 1200 }, { category: "Distribution", value: 1850 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category";
var bullet = series.bullets.push(new am4charts.LabelBullet());var label = bullet.label;label.text = "{valueY}";bullet.locationY = 0.5;
series.columns.template.events.on("sizechanged", function (ev) { if (ev.target.dataItem && ev.target.dataItem.bullets) { var height = ev.target.pixelHeight; ev.target.dataItem.bullets.each(function (id, bullet) { if (height > 50) { bullet.show(); } else { bullet.hide(); } }); }});<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: 250px;}hide-label-bullets-for-small-columnsPut labels on top of column
Section titled “Put labels on top of column”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);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { category: "Research", value: 450 }, { category: "Marketing", value: 1200 }, { category: "Distribution", value: 1850 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category";
var bullet = series.bullets.push(new am4charts.LabelBullet());var label = bullet.label;label.text = "{valueY}";bullet.locationY = 0.5;
series.columns.template.events.on("sizechanged", function (ev) { if (ev.target.dataItem && ev.target.dataItem.bullets) { var height = ev.target.pixelHeight; ev.target.dataItem.bullets.each(function (id, bullet) { if (height > 50) { bullet.locationY = 0.5; bullet.dy = 0; } else { bullet.locationY = 0; bullet.dy = -15; } }); }});<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: 250px;}relocate-label-bullets-for-small-columns