JavaScript TypeScript / ES6 ...
<style >
#chartdiv {
width : 100% ;
height : 500px ;
}
</style >
<script src ="https://cdn.amcharts.com/lib/4/core.js" > </script >
<script src ="https://cdn.amcharts.com/lib/4/charts.js" > </script >
<script src ="https://cdn.amcharts.com/lib/4/themes/animated.js" > </script >
<script >
am4core.ready (function ( ) {
am4core.useTheme (am4themes_animated);
var chart = am4core.create ("chartdiv" , am4charts.XYChart );
chart.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
}];
var dateAxis = chart.xAxes .push (new am4charts.DateAxis ());
var valueAxis = chart.yAxes .push (new am4charts.ValueAxis ());
var 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" ;
var bullet = lineSeries.bullets .push (new am4charts.CircleBullet ());
bullet.disabled = true ;
bullet.propertyFields .disabled = "disabled" ;
var secondCircle = bullet.createChild (am4core.Circle );
secondCircle.radius = 6 ;
secondCircle.fill = chart.colors .getIndex (8 );
bullet.events .on ("inited" , function (event ){
animateBullet (event.target .circle );
})
function animateBullet (bullet ) {
var animation = bullet.animate ([{ property : "scale" , from : 1 , to : 5 }, { property : "opacity" , from : 1 , to : 0 }], 1000 , am4core.ease .circleOut );
animation.events .on ("animationended" , function (event ){
animateBullet (event.target .object );
})
}
});
</script >
<div id ="chartdiv" > </div >
import * as am4core from "@amcharts/amcharts4/core" ;
import * as am4charts from "@amcharts/amcharts4/charts" ;
import am4themes_animated from "@amcharts/amcharts4/themes/animated" ;
am4core.useTheme (am4themes_animated);
let chart = am4core.create ("chartdiv" , am4charts.XYChart );
chart.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
}];
let dateAxis = chart.xAxes .push (new am4charts.DateAxis ());
let valueAxis = chart.yAxes .push (new am4charts.ValueAxis ());
let 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" ;
let bullet = lineSeries.bullets .push (new am4charts.CircleBullet ());
bullet.disabled = true ;
bullet.propertyFields .disabled = "disabled" ;
let secondCircle = bullet.createChild (am4core.Circle );
secondCircle.radius = 6 ;
secondCircle.fill = chart.colors .getIndex (8 );
bullet.events .on ("inited" , function (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" , function (event ){
animateBullet (event.target .object );
})
}