Chart.js 2.1.2 Bar Chart Animation Issue

Question

I have a bar chart in chart.js 2.1.2 which I just upgraded from 1.something. In 1.something, you could specify when to animate the bar chart. Essentially, I load the chart on page load and then set a timer to update the data and redraw the chart every 5 seconds without requiring the user to reload the page. I would like for the bar chart to only animate on the initial load and not in subsequent refreshes. In version 1.something you just needed to change the animation property of the bar chart when refreshing it. In version 2.1.2, I don't see a way to do that. At this point, I would be happy if I could disable the animation of the bar chart entirely. However, I also have other pie charts on the page which the animation settings are working so I don't want to change the animation settings globally.

HTML (Excerpt)

<div class="text-center">
  <div class="row">
    <div id="regbyhour-container" class="col-sm-12">
      <h4>Registrations by Hour</h4>
      <canvas id="regbyhour"></canvas>
    </div>
  </div>
</div>

Javascript

        <script type="text/javascript">
            var barData = defineBarDataArray();

            $(function () {
                // Global Chart Options
                Chart.defaults.global.legend.display = false;
                Chart.defaults.global.maintainAspectRatio = true;
                // Bar Chart Options
                Chart.defaults.bar.scaleBeginAtZero = false;

                updateBarChart(true)

                setInterval(function () {
                    updateBarChart(false)
                }, 5000);
            });

            function defineBarDataArray() {
                return {
                    labels: [],
                    datasets: [{
                        label: "Registrations",
                        backgroundColor: "rgba(151,187,205,0.5)",
                        borderColor: "rgba(151,187,205,0.8)",
                        borderWidth: 3,
                        data: []
                    }]
                };
            };

            function drawRegByHourChart(animate) {

                $("#regbyhour").remove();
                $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');

                var context = $("#regbyhour");
                var chart = new Chart(context, {
                    type: 'bar',
                    data: barData
                    // Need to enable or disable animation here based on animate parameter
                });
            };

            function updateBarChart(animate) {
                barData = defineBarDataArray();
                barData.labels.push("12:00 PM");
                barData.labels.push("1:00 PM");
                barData.labels.push("2:00 PM");
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                drawRegByHourChart(animate);
            };
        </script>

I don't see anything in the documentation here that says you can specify the animation options like you can with a pie chart. What am I missing?

Brian Swart Brian Swart · Accepted Answer · 2016-05-18T16:54:49

I ended up posting this as a bug on the chart.js GitHub page since I didn't get any responses here. Following the suggestion from etimberg I changed the drawRegByHourChart function from this:

function drawRegByHourChart(animate) {

            $("#regbyhour").remove();
            $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');

            var context = $("#regbyhour");
            var chart = new Chart(context, {
                type: 'bar',
                data: barData
                // Need to enable or disable animation here based on animate parameter
            });
        };

To this:

function drawRegByHourChart(animate) {

        $("#regbyhour").remove();
        $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');

        var context = $("#regbyhour");
        var chart = new Chart(context, {
            type: 'bar',
            data: barData
        });
        if (!animate) {
            chart.update(0);
        }
    };

Chart.js 2.1.2 Bar Chart Animation Issue

1 Answers