Reputation: 384
What i tried:
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 want animation like how bars in this are sliding:
In the above fiddle code animation was added in setData()..but i cannot use setData() in angular.
THANKS in advance!!!
Upvotes: 1
Views: 310
Reputation: 775
To perform an update / setData while working with the highcharts & highchart-angular wrapper, you need to update the chartOptions (as you did) and then set the updateFlag
to true.
Docs references:
https://github.com/highcharts/highcharts-angular
Live example
https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update
Upvotes: 1