Deferred animation not working in React

[chang-steven]

Hi,

I'm using chart.js (2.7.1) / chartjs-plugin-deferred (1.0.0) / react-chartjs-2 (2.7.0). My line chart is displayed at the bottom of my page, but the animation happens immediately on page load.

Here are my options, my y-axis ticks work, so not sure why the plugins do not.

const options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      plugins: {
        deferred: {
          enabled: true,
          xOffset: 150,
          yOffset: '50%',
          delay: 500
        }
      }
    };

Any thoughts? Do I need to import chartjs-plugin-deferred?

My current imports are:

import React from 'react';
import { Line } from 'react-chartjs-2';
import { connect } from 'react-redux';

[simonbrunel]

I'm not familiar with react-chartjs-2 and don't know how to integrate Chart.js plugin with it. You may need to explicitly import this plugin as described in chartjs/chartjs-plugin-datalabels#14

import React from 'react';
import { Line } from 'react-chartjs-2';
import { connect } from 'react-redux';
import 'chartjs-plugin-deferred';

How do you include chartjs-plugin-deferred in your project?

[chang-steven]

Yes, that worked, it seems that I did need to explicitly import it. Thanks!