[Chartjs]-Chartjs Plugin Deferred throws "Uncaught TypeError: Cannot read property 'plugins' of undefined" error

by

2👍

✅

The deffered plugin is not compatible with version 3 of chart.js. To fix your error you will have to downgrade to version 2.9.4

<!DOCTYPE html>
<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">


  <link href="/static/style.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2/dist/chartjs-plugin-deferred.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


</head>


<body>



  <div class="chartcontainer">


    <div class="mx-auto max-w-md">
      <canvas id="A" width="400" height="400"></canvas>
    </div>
    <script>
      var ctx = document.getElementById("A").getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {

          labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
          datasets: [{
            label: "Search interest",
            fill: true,
            data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
            borderColor: 'rgba(55,48,163,0.8)',
            backgroundColor: 'rgba(55,48,163,0.5)',
            pointHoverRadius: 10
          }]
        },

        options: {
          animation: {
            duration: 0
          },
          plugins: {
            legend: {
              display: false,
              positon: "bottom"
            },
            deferred: {

            }
          },
          elements: {
            point: {
              radius: 2
            }
          },

          scales: {
            y: {
              beginAtZero: true,
              display: false,
              max: 100
            },
            x: {
              display: false,
              position: "bottom"
            }
          }
        }
      });
    </script>
  </div>
  <div class="mx-auto max-w-md">
    <canvas id="B" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("B").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>


  <div class="mx-auto max-w-md">
    <canvas id="C" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("C").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>


  <div class="mx-auto max-w-md">
    <canvas id="D" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("D").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>

</body>

EDIT:
With the release of version 2 of the deferred plugin it is compatible with chart.js V3

Leave a comment