Skip to content

fix(annotations): clamp point annotation label x within chart bounds (Fixes #5106) - #5276

Open
waterWang wants to merge 1 commit into
apexcharts:mainfrom
waterWang:fix/point-annotation-label-boundary
Open

fix(annotations): clamp point annotation label x within chart bounds (Fixes #5106)#5276
waterWang wants to merge 1 commit into
apexcharts:mainfrom
waterWang:fix/point-annotation-label-boundary

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Description

Fixes #5106 — Point annotation labels near the left or right chart boundary are cut off when the label text extends beyond the chart area.

Problem

When a point annotation has a long label text and is positioned near the left or right edge of the chart, the label extends beyond the chart's grid bounds and gets clipped (hidden) by the SVG viewport.

Fix

Measure the label text width using before rendering, then clamp the label x position to keep it within the chart's grid boundaries:

  • textAnchor = "start" (default): clamp x to [0, gridWidth - labelWidth]
  • textAnchor = "end": clamp x to [labelWidth, gridWidth]
  • textAnchor = "middle": clamp x to [labelWidth/2, gridWidth - labelWidth/2]

Test

Added 3 new tests in the boundary-clamping describe block:

  • Right-edge label: verify x is clamped to less than gridWidth
  • Left-edge label: verify x is clamped to >= 0
  • Already-fitting label: verify x is > 0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Point annotation labels are cut of

1 participant