chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.69k stars 11.92k forks source link

3.0.0 Animations documentation #7223

Closed stockiNail closed 4 years ago

stockiNail commented 4 years ago

Documentation Is:

New animation engine

Reading the current documentation about new animation engine into v 3.0.0, I 'm a little confused about how the options object should be managed and some new concepts are not explained well. I'm writing here what I understood and what it's not clear to me.

Animations modes

The animation mode should be a animation options with specific configuration. It's not clear when the out of the box modes will be called (which which phase of chart drawing or resize). It's also possible to create own modes. Any name convention in order do not override "properties" of the animation properties (for instance duration)? And if the modes are coming the way to configure animations, why to mix modes and properties in the animation options? Maybe properties should be collected into a default mode to be more consistent. In the default animation mode, visibleoptions is mentioned. What is it? Why isn't that mentioned into the list of animation options properties?

Collections

It's not clear what it means to add or remove properties from animation standpoint. For instance, the default for number is ['x', 'y', 'borderWidth', 'radius', 'tension'] but how those properties are used to affect the animation? Furthermore there is from property but the from could be different from every single properties item (xcould have different range of borderWidth). Having a look to new samples, it's not clear the y property definition here. Maybe could be explained into the doc.

Callbacks

Having a look to new samples, the animation object (whole configuration) can be provided by callback (here the sample), but this is completely missing from documentation.

Hint

I suggest to add more documentation how to configure the animation engine, adding pieces of code if needed in order to have a clear picture about all (or at least almost) cases.

stockiNail commented 4 years ago

@benmccann thank you very much!

benmccann commented 4 years ago

@kurkle just added a lot to the animation documentation, so I'm going to say this is fixed now

https://www.chartjs.org/docs/master/configuration/animations/

stockiNail commented 4 years ago

@kurkle @benmccann thank you! If I may just another remark. I think the callback to provide the animation object is not mentioned but maybe I'm wrong.

benmccann commented 4 years ago

Ah, I thought the callback was addressed by this: https://www.chartjs.org/docs/master/configuration/animations/#animation-callbacks

But I think maybe you're referring to the fact that the options are scriptable. The docs do say "These keys are also Scriptable", but it doesn't have its own "Scriptable" column like the other docs. I don't know if there's a better way to make this clearer?

stockiNail commented 4 years ago

@benmccann I'm referring to sample loop.html where the animation options (whole object) if returned by a callback (as scriptable option).

options: {
    animation: (context) => {
        if (context.active) {
            return {
                radius: {
                    duration: 400,
                    loop: true
                }
            };
        }
        return Chart.defaults.animation;
    },

This sounds new feature, not available on 2.9.3.