Show last value at the end of LineSeries
This demo shows how we can make LineSeries show its last value using two approaches: as a label next to bullet, and as an axis range with a label.
Using bullet label
Section titled “Using bullet label”Open in:New tab
/* Create chart instance */var chart = am4core.create("chartdiv", am4charts.XYChart);
/* Add data */chart.data = [ { year: "1994", cars: 1587, motorcycles: 650, bicycles: 121 }, { year: "1995", cars: 1567, motorcycles: 683, bicycles: 146 }, { year: "1996", cars: 1617, motorcycles: 691, bicycles: 138 }, { year: "1997", cars: 1630, motorcycles: 642, bicycles: 127 }, { year: "1998", cars: 1660, motorcycles: 699, bicycles: 105 }, { year: "1999", cars: 1683, motorcycles: 721, bicycles: 109 }, { year: "2000", cars: 1691, motorcycles: 737, bicycles: 112 }, { year: "2001", cars: 1298, motorcycles: 680, bicycles: 101 }, { year: "2002", cars: 1275, motorcycles: 664, bicycles: 97 }, { year: "2003", cars: 1246, motorcycles: 648, bicycles: 93 }, { year: "2004", cars: 1218, motorcycles: 637, bicycles: 101 }, { year: "2005", cars: 1213, motorcycles: 633, bicycles: 87 }, { year: "2006", cars: 1199, motorcycles: 621, bicycles: 79 }, { year: "2007", cars: 1110, motorcycles: 210, bicycles: 81 }, { year: "2008", cars: 1165, motorcycles: 232, bicycles: 75 }, { year: "2009", cars: 1145, motorcycles: 219, bicycles: 88 }, { year: "2010", cars: 1163, motorcycles: 201, bicycles: 82 }, { year: "2011", cars: 1180, motorcycles: 285, bicycles: 87 }, { year: "2012", cars: 1159, motorcycles: 277, bicycles: 71, bulletDisabled: false }];
chart.paddingRight = 30;chart.maskBullets = false;
/* Create axes */var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";
/* Create value axis */var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
/* Create series */var series1 = chart.series.push(new am4charts.LineSeries());series1.dataFields.valueY = "cars";series1.dataFields.categoryX = "year";series1.name = "Cars";series1.strokeWidth = 3;series1.tensionX = 0.7;series1.bullets.push(new am4charts.CircleBullet());series1.tooltipText = "{valueY}";
var series2 = chart.series.push(new am4charts.LineSeries());series2.dataFields.valueY = "motorcycles";series2.dataFields.categoryX = "year";series2.name = "Motorcycles";series2.strokeWidth = 3;series2.tensionX = 0.7;series2.bullets.push(new am4charts.CircleBullet());series2.tooltipText = "{valueY}";
var series3 = chart.series.push(new am4charts.LineSeries());series3.dataFields.valueY = "bicycles";series3.dataFields.categoryX = "year";series3.name = "Bicycles";series3.strokeWidth = 3;series3.tensionX = 0.7;series3.tooltipText = "{valueY}";series3.bullets.push(new am4charts.CircleBullet());
var labelBullet1 = series1.bullets.push(new am4charts.LabelBullet());labelBullet1.disabled = true;labelBullet1.propertyFields.disabled = "bulletDisabled";labelBullet1.label.text = "{valueY.previousChange}";labelBullet1.horizontalCenter = "left";labelBullet1.label.horizontalCenter = "left";labelBullet1.label.paddingLeft = 10;
var labelBullet2 = series2.bullets.push(new am4charts.LabelBullet());labelBullet2.disabled = true;labelBullet2.propertyFields.disabled = "bulletDisabled";labelBullet2.label.text = "{valueY.previousChange}";labelBullet2.label.horizontalCenter = "left";labelBullet2.label.paddingLeft = 10;
var labelBullet3 = series3.bullets.push(new am4charts.LabelBullet());labelBullet3.disabled = true;labelBullet3.propertyFields.disabled = "bulletDisabled";labelBullet3.label.text = "{valueY.previousChange}";labelBullet3.label.horizontalCenter = "left";labelBullet3.label.paddingLeft = 10;
/* Add legend */chart.legend = new am4charts.Legend();
/* Create a cursor */chart.cursor = new am4charts.XYCursor();<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: 400px;}show-last-value-at-the-end-of-lineseriesUsing axis range
Section titled “Using axis range”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);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = generateChartData();
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.renderer.opposite = true;
// Create seriesvar series = chart.series.push(new am4charts.LineSeries());series.dataFields.valueY = "visits";series.dataFields.dateX = "date";series.strokeWidth = 2;series.minBulletDistance = 10;series.tooltipText = "{valueY}";series.tooltip.pointerOrientation = "vertical";series.tooltip.background.cornerRadius = 20;series.tooltip.background.fillOpacity = 0.5;series.tooltip.label.padding(12, 12, 12, 12);
var range = valueAxis.axisRanges.create();range.value = chart.data[chart.data.length - 1].visits;range.grid.stroke = am4core.color("#396478");range.grid.strokeOpacity = 0;range.label.text = "" + range.value;range.label.background.fill = series.stroke;range.label.fill = am4core.color("#fff");range.label.padding(5, 10, 5, 10);
// Add scrollbarchart.scrollbarX = new am4charts.XYChartScrollbar();chart.scrollbarX.series.push(series);
// Add cursorchart.cursor = new am4charts.XYCursor();chart.cursor.xAxis = dateAxis;chart.cursor.snapToSeries = series;
function generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 1000); var visits = 1200; for (var i = 0; i < 200; i++) { // we create date objects here. In your data, you can have date strings // and then set format of your dates using chart.dataDateFormat property, // however when possible, use date objects, as this will speed up chart rendering. var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i);
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
chartData.push({ date: newDate, visits: visits }); } return chartData;}<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;}last-value-using-axisrange