Chart.js v3 Fade Animation in delay

I'm trying to create a Chart with Chart.js. I Got everything to work as I want it to, only thing left is that the Animation always floats from the bottom up into position. I just want a Fade-In animation, but couldn't find anything on how to do this.

Is it even possible to do a Fade Animation in Chart.js? Here is my Code so far: #code

EDIT:

I got v3 to work, but a function, I created for this Chart doesn't work properly now. I start the Chart Animation 1s after its scrolled in view. By that time the Line chart is hidden and only the bar charts appear. After another 1.5s the Line is supposed to fade in on its spot. I used to do this by giving the Line hidden at first and after a delay unhide it and update the chart. Updating the Chart now resets the Bar animation too. In v2 it didn't do this. Is there a way to play the animations shortly after another?

Also due to the Update the Plugin Datalabels doesn't work anymore. Is there a alternative in v3?

Here is my Code again:

<div class="chartcontainer">
    <div class="chartcontainer--inner">
        <script src="https://unpkg.com/chart.js@3.0.0-beta/dist/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred"></script>
        <style type="text/css">
            @media screen and (min-width: 1100px) {
                #myChart {min-height: 540px}
            }
            .chartcontainer {max-width: 67.625rem; margin-right: auto; margin-left: auto; overflow: hidden;}
            @media screen and (max-width: 700px){
                .chartcontainer--inner {width: 50rem;}
                .chartcontainer {overflow: scroll;}

            }
        </style>
        <canvas id="myChart"></canvas>
        <script type="text/javascript">
            var inView = false;

            function isScrolledIntoView(elem)
            {
                var docViewTop = $(window).scrollTop();
                var docViewBottom = docViewTop + $(window).height();

                var elemTop = $(elem).offset().top;
                var elemBottom = elemTop + $(elem).height();

                return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
            }

            $(window).scroll(function() {
                if (isScrolledIntoView('#myChart') && !inView) {
                    // if (inView) { return; }
                    inView = true;

               console.log('in View: '+ inView);
                    
                    setTimeout(function(){

                        var ctx = document.getElementById('myChart').getContext('2d');
                        myChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: ['2018', '2019', '2020'],
                                datasets: [{
                                    label: ['a'],
                                    data: [7.1, 6.6, 6.6],
                                    backgroundColor: [
                                        '#05368b',
                                        '#05368b',
                                        '#05368b'
                                    ],
                                    order: 2
                                },{
                                    label: ['b'],
                                    data: [6.5, 6.4, 6.7],
                                    backgroundColor: [
                                        '#1792d7',
                                        '#1792d7',
                                        '#1792d7'
                                    ],
                                    order: 2
                                },{
                                    label: ['c'],
                                    data: [6.1, 5.8, 6.1],
                                    backgroundColor: [
                                        '#6c2475',
                                        '#6c2475',
                                        '#6c2475'
                                    ],
                                    order: 2
                                },{
                                    label: ['d'],
                                    data: [5.7, 5.8, 5.8],
                                    backgroundColor: [
                                        '#0d60b5',
                                        '#0d60b5',
                                        '#0d60b5'
                                    ],
                                    order: 2
                                },{
                                    label: ['e'],
                                    data: [4.3, 6.1, 6.3],
                                    type: 'line',
                                    lineTension: 0.4,
                                    borderColor: "#f48d3b",
                                    fill: false,
                                    pointBackgroundColor: function() {
                                        var color = "rgba(244, 141, 59, 1)";
                                        console.log(color);
                                        return color;
                                    },
                                    pointRadius: function(context) {
                                        var width = context.chart.width;
                                        var size = Math.round(width / 42);
                                        console.log(size);
                                        return size
                                    },
                                    borderWidth: 1,
                                    order: 1,
                                    hidden: true,
                                    borderWidth: 5
                                }]
                            },
                            options: {
                                tooltips: {enabled: false},
                                hover: {mode: null},
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        },
                                        gridLines: {
                                            color: '#eee'
                                        }
                                    }],
                                    xAxes: [{
                                        gridLines: {
                                            color: '#eee'
                                        }
                                    }]
                                },
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        padding: 20
                                    }
                                },
                                plugins: {
                                    datalabels: {
                                        align: 'top',
                                        anchor: 'start',
                                        color: 'white',
                                        // offset: 6,
                                        font: function(context) {
                                            var width = context.chart.width;
                                            var size = Math.round(width / 42);
                                            return {
                                                size: size
                                            };
                                        }
                                    }
                                }
                            }
                        });


                    }, 1000);

                    setTimeout(function(){
                        console.log(myChart.config.data.datasets[4].hidden);
                        myChart.config.data.datasets[4].hidden = false;
                        myChart.config.options.animation = {numbers: { duration: 0 },colors: {type: "color",duration: 1000,from: "transparent",}};
                        myChart.update();
                    }, 2500);


                } else {
                    // inView = false;  
                }
            });
        </script>
    </div>
</div>

from Chart.js v3 Fade Animation in delay