Skip to content

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

Description

@ncd76

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions