Custom multiple-element bullets
This demo shows how we can use virtually any element (in this case Triangle and Line) as a bullet.
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 = [ { year: "1994", value: 1587 }, { year: "1995", value: 1567 }, { year: "1996", value: 1617 }, { year: "1997", value: 1630, label: "Announcement", color: am4core.color("#050"), opacity: 1 }, { year: "1998", value: 1660 }, { year: "1999", value: 1683 }, { year: "2000", value: 1691 }, { year: "2001", value: 1298 }, { year: "2002", value: 1275, label: "Now", color: am4core.color("#555"), opacity: 1 }, { year: "2003", value: 1246 }, { year: "2004", value: 1318 }, { year: "2005", value: 1213 }, { year: "2006", value: 1199 }, { year: "2007", value: 1110 }, { year: "2008", value: 1165 }, { year: "2009", value: 1145 }, { year: "2010", value: 1163 }, { year: "2011", value: 1180 }, { year: "2012", value: 1159 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";categoryAxis.renderer.grid.template.location = 0;//categoryAxis.renderer.minGridDistance = 30;categoryAxis.startLocation = 0.5;categoryAxis.endLocation = 0.5;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.extraMax = 0.1;
// Create seriesvar series = chart.series.push(new am4charts.LineSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "year";series.tensionX = 0.8;series.strokeWidth = 3;series.fillOpacity = 0.3;series.propertyFields.stroke = "color";series.propertyFields.fill = "color";
// Set up bulletsvar bullet = series.bullets.push(new am4charts.Bullet());
var triangle = bullet.createChild(am4core.Triangle);triangle.width = 15;triangle.height = 13;triangle.dy = -3;triangle.direction = "bottom";triangle.propertyFields.fill = "color";triangle.propertyFields.fillOpacity = "opacity";triangle.fillOpacity = 0;triangle.strokeWidth = 0;triangle.horizontalCenter = "middle";triangle.verticalCenter = "bottom";
var label = bullet.createChild(am4core.Label);label.propertyFields.text = "label";label.propertyFields.fill = "color";label.strokeWidth = 0;label.horizontalCenter = "middle";label.verticalCenter = "bottom";label.dy = -20;
var line = bullet.createChild(am4core.Line);line.x1 = 0;line.y1 = 0;line.x2 = 0;line.y2 = 1000;line.strokeOpacity = 0;line.strokeDasharray = "3,3";line.propertyFields.stroke = "color";line.propertyFields.strokeOpacity = "opacity";
// Add cursorchart.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: 500px;}custom-multiple-element-bullets