mykola-digtiar / chartjs-plugin-piechart-outlabels

Highly customizable Chart.js plugin that displays labels outside the pie/doughnut chart.
https://piechart-outlabels.netlify.com/sample/
MIT License
52 stars 39 forks source link

Animation bug when coupled with plugin deferred #18

Open chrispahm opened 4 years ago

chrispahm commented 4 years ago

Hey there, thanks for the amazing plugin!

I noticed that when the outlabeledPie chart type is used in combination with the deferred plugin, the animation of the chart first goes counter-clockwise, then waits for the defferer, and then spins clockwise again. Unfortuntately, that doesn't look good and also defeats the purpose of the deferred option. Kapture 2020-05-12 at 12 12 14

See Fiddle

The issue can be 'fixed' by setting an animation duration of 1ms, and then updating the animation duration with a setTimeout function:

var options = {
  responsive: false,
  animation: {
    duration: 1
  },
  legend: {
    position: 'bottom'
  },
  plugins: {
    deferred: {
      delay: 500
    }
  } 
}

window.setTimeout(() => {
  window.myPieChart.options.animation.duration = 1500
}, 10)

which gives the following result Kapture 2020-05-12 at 12 14 14 see this Fiddle for working example

As this is a mere hack, it would be nice to have it working in the repo instead!