chartjs / chartjs/chartjs-plugin-annotation

Bug: IndexSizeError: negative radius passed to canvas.arc when drawing box/label with non-positive size

Open
#986 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
623
Forks
377
PR merge metrics
No merged PRs in 30d

Description

When an annotation box (or label background) is drawn with a non-positive width/height — e.g. chart area briefly collapsed during layout/resize — the plugin clamps borderRadius with:

clamp(corners, 0, Math.min(w, h) / 2)

If w or h is negative, that max is negative, so even borderRadius: 0 becomes negative. Chart.js then calls ctx.arc(..., radius, ...) and the browser throws:

IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (…) is negative.

Where
Plugin: chartjs-plugin-annotation v3.0.1
Stack: annotation draw → addRoundedRectPath → CanvasRenderingContext2D.arc

Triggered in our app during chart expand/collapse / layout thrash (plot area briefly invalid)

Suggestion: Clamp radius with a non-negative max, e.g. Math.max(0, Math.min(w, h) / 2), or skip drawing when w <= 0 or h <= 0.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.