Column values on top of the chart
This demo shows how we can use bullets and adapters to put actual values of series columns on top of the chart.
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 = [ { date: new Date(2018, 0, 1), value: 450 }, { date: new Date(2018, 0, 2), value: 269 }, { date: new Date(2018, 0, 3), value: 700 }, { date: new Date(2018, 0, 4), value: 490 }, { date: new Date(2018, 0, 5), value: 500 }, { date: new Date(2018, 0, 6), value: 550 }, { date: new Date(2018, 0, 7), value: 420 }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.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.dateX = "date";series.tooltipText = "{dateX}: [b]{valueY}[/]";
chart.maskBullets = false;chart.paddingTop = 25;var labelBullet = series.bullets.push(new am4charts.LabelBullet());labelBullet.label.text = "{valueY}";labelBullet.adapter.add("y", function (y) { return -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;}column-values-on-top-of-the-chart