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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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