Chartjs-Chartjs creating equilvant background like in chartjs.org

by

0👍

✅

That doesn’t work because, the syntax being used for that example is for an older version (1.x) of Chart.js, but you seem to be using the latest version of the library.

Here is the updated syntax that works perfectly well with latest version (2.7.1) of Chart.js :

var data = [],
   barsCount = 50,
   labels = new Array(barsCount),
   updateDelayMax = 500,
   $id = function(id) {
      return document.getElementById(id);
   },
   random = function(max) {
      return Math.round(Math.random() * 100)
   },
   helpers = Chart.helpers;

Chart.defaults.global.responsive = true;

for (var i = barsCount - 1; i >= 0; i--) {
   data.push(Math.round(Math.random() * 100));
};

new Chart($id('hero-bar'), {
   type: 'bar',
   data: {
      labels: labels,
      datasets: [{
         backgroundColor: '#2B303B',
         data: data
      }]
   },
   options: {
      legend: false,
      scales: {
         yAxes: [{
            display: false
         }]
      },
      tooltips: false,
      animation: {
         onComplete: function() {
            // Get scope of the hero chart during updates
            var heroChart = this,
               timeout;
            // Stop this running every time the update is fired
            this.options.animation.onComplete = randomUpdate;

            this.options.animation.eeasing = 'easeOutQuint';

            randomUpdate();

            function randomUpdate() {
               heroChart.stop();
               clearTimeout(timeout);
               // Get a random bar
               timeout = setTimeout(function() {
                  var randomNumberOfBars = Math.floor(Math.random() * barsCount),
                     i;
                  for (i = randomNumberOfBars - 1; i >= 0; i--) {
                     heroChart.data.datasets[0].data[Math.floor(Math.random() * barsCount)] = Math.round(Math.random() * 100);
                  };
                  heroChart.update();
               }, Math.random() * updateDelayMax * 2);
            };
         }
      }
   }
});

see a working example.

Leave a comment