How can I set the duration of animations?

[tomhalley]

I've got a chart where the X series is time. I need to draw a vertical line that moves from left to right, and I need to be able to customize the time the animation takes for the line to move from one series to the next. So for example, if the X series is seconds, I need the line to take 1 second to move to the next column. How can I achieve this?

[stockiNail]

I could set the duration option to annotation plugin options:

    plugins: {
      annotation: {
        animations: {
          numbers: {
            duration: 1000
          }
        },
        annotations: {
          annotation
        }
      }
    }

Maybe you need the "initial animation" which is not implemented yet, that means currently the animation is activated on the annotations redrawing/updating the chart (with the exception for the labels and polygons which are animated since the first drawing).

The animation at initialization phase will be added by the following PR: #755

[tomhalley]

I've tried the above code, but it doesn't have any noticeable effect. If you watch the below video, you'll see that the line is moving in about 200ms, but ideally, it would be moving continuously from left to right.

ezgif.com-gif-maker.mp4

[stockiNail]

can you provide a codepen or another reproducible sample?

[tomhalley]

I take it back, that has actually worked, but I think it might be the easing that's breaking it. If I increase it to 3000, or down to 100, I can see the animation speed changing. is there any way to disable the animation easing?

[tomhalley]

Also, I can't see anything about duration in the documentation here. Is this up to date?

[tomhalley]

Ah finally got there. It wasn't clear that the animations under annotation took exactly the same properties as the animations in the base ChartJS package. To get what I wanted, my config looked like this:

  plugins: {
    annotation: {
      animations: {
        numbers: {
          duration: frame > 0 ? 1000 : 0,
          easing: null, <----- this one right here officer
        },
      },
      annotations: {
        line1: {
          type: "line",
          xMin: frame,
          xMax: frame,
          borderColor: "#6b778c",
          borderWidth: 2,
        },
      },
    },

[stockiNail]

Ah finally got there. It wasn't clear that the animations under annotation took exactly the same properties as the animations in the base ChartJS package.

@tomhalley glad to hear you found the solution. The documentation is mentioning that

Animations options configures which element properties are animated and how, with the same configuration of chart.js .

The plugin doesn't have any own animation engine but it's using the CHART.JS.
I don't know if it could be explained better.