Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Setting resizeDelay to non-zero value gives "Cannot read properties of undefined (reading 'left')" on clipArea error

Aperta
  • Qualcosa non va?
#909 7 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@reedhewitt ci sta già lavorando.

Dal 11/3/2026.

  • #985 di @reedhewitt — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Riproduci il problema con il JSFiddle collegato usando Chart.js 4.4.0, chartjs-plugin-annotation 3.0.1 e un resizeDelay diverso da zero. Esamina la funzione Draw in src/annotation.js intorno alle righe 151-167 e l’helper clipArea di Chart.js per capire perché chartArea non è definito. Il lavoro è completato quando il ridimensionamento non produce più l’errore clipArea e l’annotazione continua a essere visualizzata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug

Using [email protected] and [email protected], an error is generated "Cannot read properties of undefined (reading 'left') on clipArea" when the resizeDelay option is set to non-zero.

JSFiddle: here (or just copy and paste this into a new fiddle)

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [1, 2, 3, 4, 5, 6],
      
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },      
      resizeDelay: 100,
      annotation: {
        annotations: {
          box1: {
            // Indicates the type of annotation
            type: 'box',
            xMin: 1,
            xMax: 2,
            yMin: 8,
            yMax: 10,
            backgroundColor: 'rgba(255, 99, 132, 0.25)'
          }
        }
      }
    }
  });
</script>

If you comment and uncomment line 28, resizeDelay: 100, the JSFiddle shows "script error" appear when resizeDelay is set.

The error appears to be in the Draw function

https://github.com/chartjs/chartjs-plugin-annotation/blob/193e4ceba18c4d242e8e7d30bcc2ee78b135894f/src/annotation.js#L151-L167

Where clipArea(ctx, chartArea) is called but chartArea is not yet defined, hence the chart.js helper at
https://github.com/chartjs/Chart.js/blob/master/src/helpers/helpers.canvas.ts#L327
fails.

My guess at a possible solution could be to only draw if ctx and chartArea are defined?

alternatively, it may be one for the maintainers of chartJS to fix for all users of plugin helprs. It only seems to affect chartjs-plugin-annotation however, not other plugins we're currently using such as chartjs-plugin-zoom

Lingua principale
JavaScript
Stelle
623
Fork
377
Merge medio
11h 20m
PR unite (30g)
7

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di chartjs/chartjs-plugin-annotation

Tutte le issue di chartjs/chartjs-plugin-annotation

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.