Here is what I have attempted:
highchartsLeaderBoard = Highcharts;
chartOptionsLeaderBoard={
chart: {
reflow:false,
type: 'bar',
marginLeft: 80,
width: 500,
borderWidth:0,
backgroundColor:'transparent',
},
plotOptions: {
bar: {
borderWidth:0,
},
},
title: {
text: 'LeaderBoard',
},
credits:{
enabled:false
},
yAxis: {
visible:false,
title: {
text: ''
}
},
xAxis: {
type: 'category',
min: 0,
labels: {
animate: true,
duration:5000
}
},
legend: {
enabled: false
},
series: [{
zoneAxis: 'x',
zones: [{
value: 1,
color: '#ff4d40'
}],
dataLabels: {
enabled: true,
format: '{y:,.0f}',
borderWidth:0,
color:'white',
style:{
textOutline:0
}
},
dataSorting: {
enabled: true,
sortKey: 'y',
animate: true,
duration:5000
},
data:[],
}]
}
this.chartOptionsLeaderBoard.series[0].data.push(array)
I am looking to achieve a sliding animation effect similar to the bars in this example:
In the provided code animation was implemented using setData(), however, due to limitations in angular, I cannot use setData().
Thank you in advance!!!