Charts added using charts.js are not animating on page load (or at any other time). #276

kknd4eva · 2021-08-29T10:35:52Z

I love this template by the way, but for some reason I can't get any of my added charts to animated as they should when the page loads. An example of one of my pages is below. I would expect line-chart-orders to animate on page load using the javascript provided. But the chart is static. It doesn't matter what animation options I try to use, this happens for any chart and chart type (I've experimented with a few). Is there something disabled globally in this dashboard package for some reason?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>
        Sales Order Monitor - {% block title %}{% endblock %}
    </title>
    <style type="text/css">
        chartdiv {
            /*width:calc(100vw - 40px);*/
            width: 293px;
            /*height: calc(100vh - 40px);*/
            height: 186px;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            margin: 20px;
        }
    </style>
    <style type="text/css">
        chartdivlong {
            /*width:calc(100vw - 40px);*/
            /*width: 1172px;*/
            /*height: calc(100vh - 40px);*/
            /*height: 744px;*/
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            margin: 20px;
        }
    </style>
    <style>
        #loader {
            transition: all 0.3s ease-in-out;
            opacity: 1;
            visibility: visible;
            position: fixed;
            height: 100vh;
            width: 100%;
            background: #fff;
            z-index: 90000;
        }

        #loader.fadeOut {
            opacity: 0;
            visibility: hidden;
        }

        .spinner {
            width: 40px;
            height: 40px;
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            background-color: #333;
            border-radius: 100%;
            -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
            animation: sk-scaleout 1.0s infinite ease-in-out;
        }

        @-webkit-keyframes sk-scaleout {
            0% {
                -webkit-transform: scale(0)
            }

            100% {
                -webkit-transform: scale(1.0);
                opacity: 0;
            }
        }

        @keyframes sk-scaleout {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
                opacity: 0;
            }
        }
    </style>
    <link href="/static/assets/style.css" rel="stylesheet">

    <!-- Specific Page CSS goes HERE -->
    {% block stylesheets %}{% endblock stylesheets %}

</head>

<body class="app">
    <!-- @TOC -->
    <!-- =================================================== -->
    <!--
      + @Page Loader
      + @App Content
          - #Left Sidebar
              > $Sidebar Header
              > $Sidebar Menu

          - #Main
              > $Topbar
              > $App Screen Content
    -->

    <!-- @Page Loader -->
    <!-- =================================================== -->
    <div id="loader">
        <div class="spinner"></div>
    </div>

    <script>
        window.addEventListener('load', function load() {
            const loader = document.getElementById('loader');
            setTimeout(function () {
                loader.classList.add('fadeOut');
            }, 300);
        });
    </script>

    <!-- @App Content -->
    <!-- =================================================== -->
    <div>

        {% include 'includes/sidebar.html' %}

        <!-- #Main ============================ -->
        <div class="page-container">

            {% include 'includes/navigation.html' %}

            <!-- ### $App Screen Content ### -->
            <main class="main-content bgc-grey-100">
                <div id="mainContent">
                    {% block content %}
                    <div class="row gap-20">
                        <!-- #Toatl Visits ==================== -->
                        <div class="col-md-6">
                            <div class="layers bd bgc-white p-20">
                                <div class="layer w-100 mB-10">
                                    <h6 class="lh-1">Today's Orders By Type</h6>
                                    <div class="chartdiv">
                                        <canvas id="ordersByTypeChart" width="273" height="229"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="layers bd bgc-white p-20">
                                <div class="bgc-white-500 c-grey p-20">
                                    <div class="peers ai-c jc-sb gap-10">
                                        <div class="peer peer-greed">
                                            <h5>Avg Basket Size</h5>
                                            <p class="mB-0">Quantity</p>
                                        </div>
                                        <div class="peer">
                                            <h1 class="text-end">{{qty}} items</h1>
                                        </div>
                                        <div class="peer">
                                            <i class="c-indigo-500 ti-briefcase" style="font-size: 5.73em;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="layers bd bgc-white p-20">
                                <div class="bgc-white-500 c-grey p-20">
                                    <div class="peers ai-c jc-sb gap-10">
                                        <div class="peer peer-greed">
                                            <h5>Avg Basket Variety</h5>
                                            <p class="mB-0">Distinct Products</p>
                                        </div>
                                        <div class="peer">
                                            <h1 class="text-end">{{sku}} SKUs</h1>
                                        </div>
                                        <div class="peer">
                                            <i class="c-indigo-500 ti-briefcase" style="font-size: 5.73em;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="layers bd bgc-white p-20">
                                <div class="layer w-100 mB-10">
                                    <h6 class="lh-1">Orders Per Day (Past 30 Days)</h6>
                                    <div class="layer w-100 p-20">
                                        <div class="chartdivlong">
                                            <canvas id="line-chart-orders" width="1172" height="500"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endblock content %}
                    </div>
            </main>
            {% include 'includes/footer.html' %}

        </div>
        <script type="text/javascript" src="/static/assets/vendor.js"></script>
        <script type="text/javascript" src="/static/assets/bundle.js"></script>

        <!-- Specific Page JS goes HERE -->
        {% block javascripts %}
        <script>
            const labels = [
                'ClickAndCollect',
                'ClickAndDeliver',
                'Redirect'
            ];
            const data = {
                labels: labels,
                datasets: [{
                    label: 'Orders by type',
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    data: {{ ordersByType | tojson }},
                }]
                };

            const config = {
                type: 'pie',
                data: data,
                animationEnabled: true,
                animation: {easing: 'easeInCirc'},
                options: {
                    maintainAspectRatio: false,
                    layout: { padding: { right: 10 } },
                }
            };

            var myChart = new Chart(
                document.getElementById('ordersByTypeChart'),
                config
            );
        </script>
        <script>
            const labels2 = {{ by_day_label | tojson }};
            const data2 = {
                labels: labels2,
                datasets: [{
                    label: 'Orders',
                    borderColor: "rgb(255, 205, 86)",
                    fill: false,
                    data: {{ by_day | tojson }},
                    }]
                };

            const config2 = {
                type: 'line',
                data: data2,
                animationEnabled: true,
                options: {
                    animations: {
                        tension: {
                            duration: 1000,
                            easing: 'linear',
                            from: 1,
                            to: 0,
                            loop: true
                        }
                    },
                    maintainAspectRatio: false,
                    layout: { padding: { right: 10 } },
                    scales: {
                    x: {
                        grid: {
                        drawOnChartArea:false
                        }
                    },
                    y: {
                        grid: {
                        drawOnChartArea:false
                        }
                    }
                }
            }
        };

            var myChart2 = new Chart(
                document.getElementById('line-chart-orders'),
                config2
            );
        </script>
        {% endblock javascripts %}

</body>

</html>

The text was updated successfully, but these errors were encountered:

jepperaskdk · 2022-08-27T19:22:07Z

From this issue: chartjs/Chart.js#5560

It explains that the animation may not work when fired immediately, and content not yet having a size. In this case, probably because of the loader-icon of this theme.
You should be able to get an animation if you delay creating the chart, until you know it has been given a size. You can try adding a timeout like this:

setTimeout(() => {
    var myChart2 = new Chart(
        document.getElementById('line-chart-orders'),
        config2
    );
], 1000);

Maybe there's a clever way to do it without an explicit timeout.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Charts added using charts.js are not animating on page load (or at any other time). #276

Charts added using charts.js are not animating on page load (or at any other time). #276

kknd4eva commented Aug 29, 2021 •

edited

Loading

jepperaskdk commented Aug 27, 2022

Charts added using charts.js are not animating on page load (or at any other time). #276

Charts added using charts.js are not animating on page load (or at any other time). #276

Comments

kknd4eva commented Aug 29, 2021 • edited Loading

jepperaskdk commented Aug 27, 2022

kknd4eva commented Aug 29, 2021 •

edited

Loading