Possible plugin lifecycle regression in Chart.js 4.5.1 causing chartjs-plugin-datalabels to draw before internal labels are prepared

Aperta
  • Qualcosa non va?
#12,269 8 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia in src/core/core.plugins.js confrontando il comportamento di PluginService._init e delle notifiche tra Chart.js 4.5.0 e 4.5.1. Prova a creare una riproduzione minima con chartjs-plugin-datalabels 2.2.0 a partire dalla configurazione segnalata e traccia gli hook setup, update e draw. Il lavoro è completato quando la regressione del ciclo di vita è confermata o esclusa e viene documentato un errore riproducibile o un test di regressione mirato.

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

Descrizione

type: bug
Expected behavior

After upgrading from Chart.js 4.5.0 to 4.5.1, charts using chartjs-plugin-datalabels 2.2.0 can fail during render with:

TypeError: can't access property "length", labels is undefined

The stack points into chartjs-plugin-datalabels.js during its draw/layout step, where it expects a prepared labels array.

The same chart configuration works with Chart.js 4.5.0.

Suspicious Chart.js change
The likely related change is in src/core/core.plugins.js.

In 4.5.0, PluginService initialized _init as an empty array:

constructor() {
this._init = [];
}

In 4.5.1, _init is initialized as undefined, and plugin notifications return early if beforeInit has not populated it:

constructor() {
this._init = undefined;
}

notify(chart, hook, args, filter) {
if (hook === 'beforeInit') {
this._init = this._createDescriptors(chart, true);
this._notify(this._init, chart, 'install');
}

if (this._init === undefined) {
return;
}

...
}

Hypothesis
Some plugin lifecycle notifications may be skipped, so chartjs-plugin-datalabels does not receive the update hooks it uses to build its internal label layout, but later still reaches its draw hook. That leaves its internal labels undefined and causes the crash.

Environment
Chart.js: 4.5.1
Working version: 4.5.0
Plugin: chartjs-plugin-datalabels 2.2.0
Browser: include browser/version if known
Chart type: include the failing chart type, e.g. bar/pie

Minimal symptom
The failing plugin line is equivalent to:

for (i = 0, ilen = labels.length; i < ilen; ++i) {

where labels is unexpectedly undefined.

Current behavior

Question
Was the PluginService._init === undefined guard intended to skip all plugin hooks before beforeInit, and could it cause inline/per-chart plugins such as ChartDataLabels to miss setup hooks but still receive draw hooks?

I tried to create a minimal CodePen using Chart.js 4.5.1 and chartjs-plugin-datalabels 2.2.0, but I have not been able to reproduce the error outside our REDCap page yet. The issue may depend on our page lifecycle or how the charts are created in that environment.

I understand this may not be actionable without a reproduction, but I wanted to ask whether the PluginService._init change in 4.5.1 could plausibly cause plugin setup hooks to be skipped while later draw hooks still run.

Reproducible sample

https://www.chartjs.org/dist/master/chart.umd.min.js

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.5.1

Browser name and version

No response

Link to your project

No response

Lingua principale
JavaScript
Stelle
67.8k
Fork
12k
Merge medio
6h 15m
PR unite (30g)
3

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

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/Chart.js

Tutte le issue di chartjs/Chart.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.