Animated bullets
In this demo you’ll see how we can use chart’s built-in animation capabilities to add animation effects to bullets.
Example #1
Section titled “Example #1”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 = [ { date: "2015-01-01", ay: 6.5, by: 2.2, aValue: 15, bValue: 10 }, { date: "2015-01-02", ay: 12.3, by: 4.9, aValue: 8, bValue: 3 }, { date: "2015-01-03", ay: 12.3, by: 5.1, aValue: 16, bValue: 4 }, { date: "2015-01-04", ay: 2.8, by: 13.3, aValue: 9, bValue: 13 }, { date: "2015-01-05", ay: 3.5, by: 6.1, aValue: 5, bValue: 2 }, { date: "2015-01-06", ay: 5.1, by: 8.3, aValue: 10, bValue: 17 }, { date: "2015-01-07", ay: 6.7, by: 10.5, aValue: 3, bValue: 10 }, { date: "2015-01-08", ay: 8, by: 12.3, aValue: 5, bValue: 13 }];
// Create axesvar xAxis = chart.xAxes.push(new am4charts.DateAxis());xAxis.dataFields.category = "category";xAxis.renderer.grid.template.location = 0;//xAxis.renderer.minGridDistance = 30;
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series1 = chart.series.push(new am4charts.LineSeries());series1.dataFields.valueY = "ay";series1.dataFields.dateX = "date";series1.dataFields.value = "aValue";series1.strokeOpacity = 0;series1.cursorTooltipEnabled = false;
var bullet1 = series1.bullets.push(new am4charts.CircleBullet());bullet1.tooltipText = "x:{valueX} y:{valueY}";bullet1.strokeOpacity = 0;bullet1.circle.radius = 10;
bullet1.adapter.add("fill", function (fill, target) { return chart.colors.getIndex(target.dataItem.index);});
bullet1.events.on("inited", function (event) { animateExpand1(event.target);});
function animateExpand1(bullet) { let animation = bullet.animate({ property: "scale", to: 1.5 }, 500); animation.events.on("animationended", function () { animateCollapse1(bullet); });}
function animateCollapse1(bullet) { let animation = bullet.animate({ property: "scale", to: 1 }, 100); animation.events.on("animationended", function () { animateExpand1(bullet); });}
let secondCircle = bullet1.createChild(am4core.Circle);secondCircle.radius = bullet1.circle.radius;
secondCircle.events.on("inited", function (event) { animateExpand2(event.target);});
function animateExpand2(bullet) { let animation = bullet.animate( [ { property: "scale", to: 3 }, { property: "opacity", from: 0.5, to: 0 } ], 500 ); animation.events.on("animationended", function () { animateCollapse2(bullet); });}
function animateCollapse2(bullet) { let animation = bullet.animate({ property: "scale", to: 1 }, 100); animation.events.on("animationended", function () { animateExpand2(bullet); });}
// Add scrollbarschart.scrollbarX = new am4core.Scrollbar();chart.scrollbarY = new am4core.Scrollbar();
// Add cursorchart.cursor = new am4charts.XYCursor();chart.cursor.behavior = "zoomXY";<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;}animated-bulletsExample #2
Section titled “Example #2”Open in:New tab
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { date: new Date(2018, 3, 20), value: 90 }, { date: new Date(2018, 3, 21), value: 102 }, { date: new Date(2018, 3, 22), value: 65 }, { date: new Date(2018, 3, 23), value: 62 }, { date: new Date(2018, 3, 24), value: 55 }, { date: new Date(2018, 3, 25), value: 81, disabled: false }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// Create value axisvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar lineSeries = chart.series.push(new am4charts.LineSeries());lineSeries.dataFields.valueY = "value";lineSeries.dataFields.dateX = "date";lineSeries.name = "Sales";lineSeries.strokeWidth = 3;lineSeries.strokeDasharray = "5,4";
// Add simple bulletvar bullet = lineSeries.bullets.push(new am4charts.CircleBullet());bullet.disabled = true;bullet.propertyFields.disabled = "disabled";
let secondCircle = bullet.createChild(am4core.Circle);secondCircle.radius = 5;//secondCircle.fill = am4core.color("#ff0000")
bullet.events.on("inited", (event) => { animateBullet(event.target.circle);});
function animateBullet(bullet) { let animation = bullet.animate( [ { property: "scale", from: 1, to: 5 }, { property: "opacity", from: 1, to: 0 } ], 1000, am4core.ease.circleOut ); animation.events.on("animationended", (event) => { animateBullet(event.target.object); });}<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: 300px;}animated-bullets-2