c3js / c3js/c3

Dataset appear animation is different for new and existing elements

Open
#226 2 comments 0 reactions 0 assignees View on GitHub
C-feature-request
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

This is a pretty minor issue, and it may be the designed behaviour, but seems a little odd to me so I thought I'd raise it.

I have a simple donut with 6 or 7 data sets, one of which is larger significantly larger than the others. When I click on the key for the large entry, the disappear animation is cool: the existing element fades out, then the remaining slices spread out to fill the gap.

If I then click the key for the large entry again, it reappears.
However, the animations for the fade in of the new entry, and the shrinking of the existing slices seem to run in parallel. The result is that you can see the slices moving behind the new one. Now it could be that the fade in animation is shorter than the slice resizing, it is a little hard to be sure.

As I say, it is clearly quite a minor issue, but I think it would look ever so slightly better if the appearance was either:
a. The opposite of the disappear i.e. the slices shrink to make way for the new entry, and then it fades in. (Serialize the animations).
b. Rather than fading in the new entry, 'grow' the new entry. That is, pretend it was increasing from a value of 0% to it's final percentage, filling the gap as the other slices move out of the way. As all slices would be undergoing the same animation it would look consistent.

If suggestion b is used, then it may be worth considering the same sort of thing for disappearance - i.e. shrink the slice to zero rather than fading it out.

Hopefully my explanation makes sense.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.