Animation `delay` property actually controls `duration`

[dudewad]

Due to time limitations and the fact that the starting templates are out of date and/or broken (the ng2-charts one is broken), I can't provide a reproduction. Sorry, I don't have time to try to figure out/fix broken reproduction templates.

My issue is that using the delay animation property as a scripted callback seems to control the duration of the animation instead. Here is a bar chart's options configuration:

const duration = 1000;

const config = {
  type: 'bar',
  // .... other config options
  options: {
    animation: {
      x: {
        delay(ctx: ScriptableContext<'bar'>) {
          return ctx.dataIndex / dataset.data.length * duration * 100;
        },
        duration() { return duration },
        easing: 'easeOutQuint',
        type: 'number',
      },
      y: false,
    },
    indexAxis: 'y',
    plugins: {
      legend: { display: false },
    },
  },
};

Take note that y axis animations are disabled, and x axis "delay" does indeed control something - its just that the returned value controls the length of the animation for that underlying data point, not the delay until it starts.

[dudewad]

I closed this because I thought I was misunderstanding things but this actually looks like a correct configuration. The x-axis value of a vertical chart should be animated, and there should be a delay before starting each bar's animation. Instead, they all start at the same time, but end at the respective time they would have ended at had they started at the right time.

Effectively, delay is controlling duration.

[santam85]

hey @dudewad Have you read the issue template? there is no rendering logic in this library, we just wrap Chart.js in an Angular-friendly way. See their documentation at https://www.chartjs.org/docs/latest/ and if you still think there is a bug, open it on their repository (https://github.com/chartjs/Chart.js/issues), feel free to link this one.