const { Chart, Animate, Util, G } = F2;
// register an animation called delayScaleInY
Animate.registerAnimation('delayScaleInY', function(shape, animateCfg) {
const box = shape.getBBox(); // get the bounding box of the shape
const origin = shape.get('origin'); // get the drawing data of the shape
const points = origin.points; // the points that compose of each column
const centerX = (box.minX + box.maxX) / 2;
if (points[0].y - points[1].y <= 0) { // when the point is below 0
[ 't', centerX, centerY ],
[ 't', -centerX, -centerY ]
]); // use matrix transformation to change the origin state of the shape. scaleY.
const index = shape.get('index');
let delay = animateCfg.delay; // get the animation configuration
if (Util.isFunction(delay)) {
delay = animateCfg.delay(index); // set delay time according to the index
const easing = animateCfg.easing; // get the animation configuration
const matrix = shape.getMatrix(); // get the current matrix
const endMatrix = G.Matrix.transform(matrix, [
[ 't', centerX, centerY ],
[ 't', -centerX, -centerY ]
]); // the matrix for the final state of the shape
duration: animateCfg.duration
for (let i = 0; i < 50; i++) {
y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
const chart = new Chart({
pixelRatio: window.devicePixelRatio
.color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055')
.animate({ // customize animation configuration
animation: 'delayScaleInY', // use the registered animation name
easing: 'elasticOut', // easing function
} // delay time for each shape according to index