Add slide in/out animation

[msteiger]

Feature Proposal

I have a long list of data sets with identical x/y axes. The sets can be iterated through using "prev/next" buttons and the chart view will replace the content and update instantly. To make it look more natural, I want to slide the data in/out to the left and right.

Today, chartjs. supports transition animations of the values from (0..x) which looks like a bit like unfolding/zooming in. What I want is a transition from (x-chartWidth..x), ie. all data points move with the same speed to their final position.

Possible Implementation

I started hacking a workaround solution based on the rendering context's translate() operation in draw() and updating the translation offset in an animation callback handler, but the callback didn't get enough information, eg. the animation type is missing.

Afaics, it needs to be implemented in chart.js and can't go in a plugin, but I might be wrong. I could try implementing it myself, if you agree to accept this, but I would need some help, e.g. how to specify the config parameters.

[kurkle]

Should already be possible.

See https://www.chartjs.org/docs/latest/samples/animations/drop.html for a similar example, but modifying the from of the element's y-coordinate.

Disclaimer: I did not do any testing.

[msteiger]

Thanks for the hint, Jukka! It's a bit hard to see, since the animation is really fast, but it looks like it transitions from 0 to undefined (=final value), no? The code just sets the from value to zero (actually -10 in the code) if the context matches and ensures that it happens only once by setting a custom property. Maybe I'm missing something here?

[msteiger]

I think that I found a good solution: similar to the example you provided, I came up with this:

from: (ctx: ScriptableContext<'line'> | any) => {
  if (ctx.type === 'data' && ctx.mode === 'default') {
    return (ctx.element.x "+ <or> -" ctx.chart.chartArea.width);
  }
  return undefined;
}

Just one small thing: I believe that the fields mode and type should be added here, so they can be used in TypeScript properly: https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L18-L26