Pie Chart Animation

[bushra376]

Is it possible to remove ONLY the easingIn/easingOut animation from the pie chart ? I want to keep the animation where the pie rotates clockwise and draws out its slices but i want to remove the easing animation from it all together. How can i accomplish that ?

[rafalS]

Hi bushra376,

Welcome to our forum and thanks for contacting us.
Could you describe more precisely, which animation would you like to disable?

We can rely on this jsFiddle: https://jsfiddle.net/BlackLabel/8ftbdp7m

Best regards!

[bushra376]

So when i run the code, and the chart is loaded initially, it zooms into view from the background. That's the animation i want to remove but if i set the plotOptions.series.animation to false, it also removes the animation of the pie chart getting drawn in a clockwise direction. Is it possible to remove the zooming in animation of the chart but to keep the clockwise drawing animation in tact ?

[https://jsfiddle.net/9dgfak2u/]

[rafalS]

Something like this?

https://jsfiddle.net/BlackLabel/me32cf1u

The idea is to wrap the animate method:

Code: Select all

(function(H) {
  H.wrap(H.seriesTypes.pie.prototype, 'animate', function(proceed, init) {
    var series = this,
      points = series.points,
      startAngleRad = series.startAngleRad;

    if (!init) {
      points.forEach(function(point) {
        var graphic = point.graphic,
          args = point.shapeArgs;

        if (graphic) {
          // start values
          graphic.attr({
            // animate from inner radius (#779)
            r: args.r || (series.center[3] / 2),
            start: startAngleRad,
            end: startAngleRad
          });

          // animate
          graphic.animate({
            r: args.r,
            start: args.start,
            end: args.end
          }, series.options.animation);
        }
      });

      // delete this function to allow it only once
      series.animate = null;
    }
  })
})(Highcharts)

Best regards!

[bushra376]

Thank you that is exactly the animation i want. But this is in Javascript, how do i wrap the animate method in React. I have a code that looks as follows:

Code: Select all

class PieChart extends React.Component {

    render() {
     const val = {
       option: {
            chart: [{
                 type: 'pie',
            }],
            series: [{
                   data: [5, 3, 7]
            }],
       },
     };

       return (
          <Chart {...val} />
       )
    }
}

[rafalS]

bushra376,

Could you provide with an online demo of your chart? You can use CodeSandbox online editor, it works with React.

Regards.

[bushra376]

Hi,

I have created a sandBox with the pie chart in it : https://codesandbox.io/s/mo1n471m5j

[rafalS]

Ok, then it is enough to paste this code into Chart.js: https://codesandbox.io/s/vjwzmjnv77

[bushra376]

I cannot make a change in the Chart.js file. Is there some way to make it happen by writing code in the index.js file ?

[rafalS]

Yes, you just need to build a bridge to the Highcharts core:

Code: Select all

var Highcharts = require("highcharts");

Demo: https://codesandbox.io/s/54nppv9llk

Regards.

[pouyababaie]

Something like this?

https://jsfiddle.net/BlackLabel/me32cf1u

The idea is to wrap the animate method:

Code: Select all

(function(H) {
  H.wrap(H.seriesTypes.pie.prototype, 'animate', function(proceed, init) {
    var series = this,
      points = series.points,
      startAngleRad = series.startAngleRad;

    if (!init) {
      points.forEach(function(point) {
        var graphic = point.graphic,
          args = point.shapeArgs;

        if (graphic) {
          // start values
          graphic.attr({
            // animate from inner radius (#779)
            r: args.r || (series.center[3] / 2),
            start: startAngleRad,
            end: startAngleRad
          });

          // animate
          graphic.animate({
            r: args.r,
            start: args.start,
            end: args.end
          }, series.options.animation);
        }
      });

      // delete this function to allow it only once
      series.animate = null;
    }
  })
})(Highcharts)

Best regards!

Is There a way to put this loading effect within a loop?
like in

Code: Select all

 setInterval() 

??

[dawid.d]

Hi pouyababaie,

Welcome to our forum and thanks for contacting us with your question!

The animate method takes a callback as the third argument, which is called after the animation is finished. You can loop this animation like this, see the demo below.

API: https://api.highcharts.com/class-refere ... nt#animate
Demo: https://jsfiddle.net/BlackLabel/3c7b41su/

I hope you will find it useful
Best regards!

[pouyababaie]

Hi pouyababaie,

Welcome to our forum and thanks for contacting us with your question!

The animate method takes a callback as the third argument, which is called after the animation is finished. You can loop this animation like this, see the demo below.

API: https://api.highcharts.com/class-refere ... nt#animate
Demo: https://jsfiddle.net/BlackLabel/3c7b41su/

I hope you will find it useful
Best regards!

Thank you dawid.d , the concept is great and it did help me find another way of thinking to redraw the chart.

I'm not familiar with Highchart pure js functionality , I'm using it as a package in angular13 and couldn't find the API for what you said.

I want to redraw the chart from and array of data arrays and it should have a 2500 ms wait.

I came with this idea , when the chart is completed , redraw the chart with the next value given from an another array after 2.5 seconds.

I hope you could help me with my problem

Best rigards!

[dawid.d]

Hi,

If you only want to update the data in the series, it would be better to use the update method. See in the demo below, I use it in the setInterval callback.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

If I may clarify any issues/matters I am available at your convenience.
Kind regards!