TypeError: Cannot set property 'font' of null

gyto23 commented 4 years ago

Having issue when installed the deferred plugin and inserted as

Chart.defaults.global.defaultFontFamily = "'Nunito Sans', sans-serif";

chartObj = new Chart(refChart, {
        type: chartType,
        data: {
          labels: chartLabels,
          datasets: chartDataset,
        },
        plugins: [
          ChartColorSchemes,
          ChartDeferred,
        ],
        options: _merge({
          plugins: {
            colorschemes: {
              scheme: "office.Breeze6",
              custom: customColorSchema,
              fillAlpha: 1,
            },
            deferred: {
              xOffset: 150,
              yOffset: "50%",
              delay: 500,
            },
          },
        }, chartOptions),
      });

chart.js version is 2.9.3 deferred plugin version is 1.0.1

any clue how to solve it?

BR0kEN- commented 3 years ago

The cause of this issue is described in #13 and fixed in #14. Here is the code to reproduce the behavior:

<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<canvas id="chart1"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1"></script>
<script type="module">
  const chart1 = document.getElementById('chart1');
  const delay = 500;
  const chart = new Chart(chart1.getContext('2d'), {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }],
    },
    options: {
      plugins: {
        deferred: {
          delay,
        },
      },
    },
  });

  // Destroy before render occurs.
  setTimeout(() => chart.destroy(), delay / 2);
</script>
</body>
</html>

simonbrunel commented 3 years ago

@BR0kEN- Thanks for the repro code.

I figured out later that it was the same issue, closing as duplicate.

chartjs / chartjs-plugin-deferred

TypeError: Cannot set property 'font' of null #16