bollam_rohith
bollam_rohith

Reputation: 384

Add animation to bar in data sorting bar chart Highcharts

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:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/datasorting/labels-animation

In the above fiddle code animation was added in setData()..but i cannot use setData() in angular.

THANKS in advance!!!

Upvotes: 1

Views: 310

Answers (1)

Mateusz Kornecki
Mateusz Kornecki

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

Related Questions