Chart.js on animation end callback - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Chart.js on animation end callback

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>chartjs | 2.6 | Animation completion callbacks</title> 
   </head> 
   <body translate="no"> 
      <canvas id="canvas"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
      <script>
      var ctx = $("#canvas")[0].getContext("2d");
var data = {//from  w  w w  . j a  v  a2  s  .  c  om
  datasets: [
    {
      label: "Scatter Dataset",
      data: [
        {
          x: moment("01:00:00", "HH:mm:ss"),
          y: 0
        },
        {
          x: moment("01:00:01", "HH:mm:ss"),
          y: 10
        },
        {
          x: moment("01:00:02", "HH:mm:ss"),
          y: 5
        },
        {
          x: moment("01:00:05", "HH:mm:ss"),
          y: 25
        },
        {
          x: moment("01:00:08", "HH:mm:ss"),
          y: 5
        },
        {
          x: moment("01:00:09", "HH:mm:ss"),
          y: 30
        },
        {
          x: moment("01:00:12", "HH:mm:ss"),
          y: 45
        }
      ]
    }
  ]
};
var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    animation: {
      duration: 1000,
      onComplete: function(animation) {
        console.log("onAnimationComplete");
      }
    },
    scales: {
      xAxes: [
        {
          scaleLabel: {
            display: true
          },
          type: "time",
          time: {
            unit: "second",
            displayFormats: {
              second: "mm:ss"
            }
          },
          position: "bottom"
        }
      ]
    }
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials