fix(react-ui): step curve, scrolling x-axis labels, donut and radar hover in the D3 charts

[i-subham23]

Follow-up to #1248 and #1263. Fixes TH-2661, TH-2662, TH-2663 and TH-2664: the chart issues QA raised in #qa after comparing the D3 charts with the Recharts ones.

Changes

Step curve

• Area and line share one variant → curve mapping, seriesCurve in shared/cartesian/seriesGeometry.ts.
• "step" is now d3 curveStep (it was curveStepAfter), which the D3 mini charts already use.
• Unknown variants and streaming placeholders still fall back to "natural".

Scrolling labels (utils/xAxisLabelLayout.ts, hooks/cartesian/useChartDimensions.ts)

• The scrolling layout starts from the density width (72px by default). It widens a category until every label wraps in full, between words, into the lines the label band holds (one line for tickVariant="singleLine").
• A category grows to at most 3× its usual width and never past half the visible plot, so at least two always show at once.
• A label that can't show in full within that (a 60-character identifier, a sentence) doesn't widen anything. It breaks mid-word and truncates as before, with the full text on hover.
• Neighbouring labels keep an 8px gap, but the gap never makes a chart that fits start to scroll.
• Bar labels are drawn under the band (80% of the category), so BarChart passes labelShare and categories are sized for that.
• The label band now counts lines at that same width, so a bar label is no longer cut a line short.
• The scroll buttons step one widened category at a time.
• The tickVariant JSDoc now says how scrolling and condensed charts differ.

Donut (PieChart, PieSlices)

• The coloured band runs from 90% to 100% of the radius. The sunk track wedges run from the hole (28% of the band's inner radius) to the band. Both take the slice's corner radius.
• Band and track share one pad radius, so each gap runs straight through both.
• Works for circular and semicircular donuts.
• Slices are 0.5° apart, as the Recharts donut always was: it ignored paddingAngle. paddingAngle still sets the pie's gaps, and its JSDoc now says so.
• Hover covers the whole wedge and pops band and track out together.

Radar hover

• Each series gets the line and area charts' hover dot (a foreground ring around a dot in the series colour), drawn above every series.
• The dots are always-mounted FadeFollowers. They glide from axis to axis on the crosshair spring and fade over 120ms.
• With showDots on, the vertex dots still show the hover as before.
• The dot styles moved into an active-dot-styles mixin shared with the line and area crosshair, so the line and area CSS is unchanged.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
openui-docs	Ready	Preview	Sep 30, 2026 8:56am UTC