Animates bar chart with animated transition

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Animated Bar Chart</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width:800px;height:600px;"></div>

    <script>
        // Data for the bar chart
        var x = ['A', 'B', 'C', 'D'];
        var y = [10, 15, 7, 12];

        // Create initial data with zero values
        var data = [{
            type: 'bar',
            x: x,
            y: [0, 0, 0, 0],
            marker: {
                color: 'rgb(55, 83, 109)'
            }
        }];

        // Layout configuration
        var layout = {
            title: 'Animated Bar Chart',
            xaxis: {
                title: 'Categories'
            },
            yaxis: {
                title: 'Values', range: [0, Math.max(...y) * 1.2]
            },
            showlegend: false
        };

        // Create the initial plot
        Plotly.newPlot('myDiv', data, layout);

        // Animate to the final values
        Plotly.animate('myDiv', {
            data: [{
                y: y
            }],
            traces: [0],
            layout: {}
        }, {
            transition: {
                duration: 2000,
                easing: 'cubic-in-out'
            },
            frame: {
                duration: 2000,
                redraw: false
            }
        });
    </script>
</body>
</html>