Skip to content

[charts-premium] Add highlight to the RadialLineChart#22156

Open
alexfauquette wants to merge 90 commits intomui:masterfrom
alexfauquette:radia-interaction
Open

[charts-premium] Add highlight to the RadialLineChart#22156
alexfauquette wants to merge 90 commits intomui:masterfrom
alexfauquette:radia-interaction

Conversation

@alexfauquette
Copy link
Copy Markdown
Member

@alexfauquette alexfauquette commented Apr 22, 2026

This PR is already large enough. I will add the support for continuous scales in a follow up.

Here is the result of the closest points for a rotation scale with point type with/without area

image

Stuff learned

D3 radial line

I thought the D3 radial lines was a smart semantic adaptation. But it's not the case. It just takes as an input (angle, radius) and transform them into x,y.

I'm hesitant to restrain the curve options for the radial line to the few that make sens 'lines' | 'natural' | 'catmul'

image

Is an angle between 2 angles

A way to know if an angle $\alpha$ is between two angles $\theta_1$, $\theta_2$ is to do

clamp($\alpha - \theta_1$) < clamp($\theta_2 - \theta_1$) with clamp a function that returns a normalized angle in $[0; 2\pi )$

Another method if you have points and not directly angles is to use vector products.

Is an angle between 2 points

For 2 vectors in 2D $u$ and $v$ the vector product $u \wedge v$ is $u_x v_y-u_y v_x$ and its sign indicates if the smallest angle going from $u$ to $v$ goes in the direct or reverse rotation.

So to know if the angle of a point $x$ is between $u$ and $v$ you can test $u \wedge x \ge 0$ and $x \wedge v \ge 0$

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 23, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 23, 2026
@alexfauquette alexfauquette marked this pull request as ready for review April 23, 2026 14:56
@alexfauquette alexfauquette requested a review from Copilot April 23, 2026 14:56
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds highlight/interaction support to the Premium RadialLineChart by introducing a dedicated highlight plot/element and enabling position-based item picking for radial line/area series. The PR also extends internal utilities to support angle-based curve evaluation and improves polar axis index handling.

Changes:

  • Add RadialLineHighlightPlot / RadialLineHighlightElement and wire them into RadialLineChart rendering and slots.
  • Implement radialLine getItemAtPosition (curve-aware, including area picking) and expose related internals/utilities (evaluateCurveAtAngle, getPolarAxisIndex, clampAngleRad, etc.).
  • Update docs/API pages/demos to document and showcase highlight support.

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
scripts/x-charts-premium.exports.json Exposes new RadialLine highlight components in the premium export surface.
scripts/buildApiDocs/chartsSettings/index.ts Skips API doc annotation for the new highlight element source file.
packages/x-charts/src/models/seriesType/line.ts Moves curve prop to LineSeriesType (and documents it there).
packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/index.ts Re-exports polar interaction selectors for consumption via the plugin index.
packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.ts Refactors ordinal polar axis index computation and adds full-circle handling.
packages/x-charts/src/internals/index.ts Exports additional internals (getPolarAxisIndex, clampAngle, getSymbol, EPSILON, evaluateCurveAtAngle).
packages/x-charts/src/LineChart/seriesConfig/getSeriesWithDefaultValues.ts Defaultizes curve for line series (monotoneX).
packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts Adds evaluateCurveAtAngle and supporting math helpers for angle-based evaluation.
packages/x-charts-premium/src/models/seriesType/radialLine.ts Adds curve to radial line series type (docs say default is linear).
packages/x-charts-premium/src/internals/index.ts Exposes premium internal getRadialLineItemAtPosition.
packages/x-charts-premium/src/RadialLineChart/seriesConfig/index.ts Registers getItemAtPosition for radialLine series config.
packages/x-charts-premium/src/RadialLineChart/seriesConfig/getSeriesWithDefaultValues.ts Defaultizes radial line curve (currently to natural).
packages/x-charts-premium/src/RadialLineChart/seriesConfig/getItemAtPosition.ts Implements radial line/area hit-testing using angle-based curve evaluation.
packages/x-charts-premium/src/RadialLineChart/radialLineClasses.ts Adds highlight utility class key.
packages/x-charts-premium/src/RadialLineChart/index.ts Exports the new highlight plot/element from the RadialLineChart entrypoint.
packages/x-charts-premium/src/RadialLineChart/RadialMarkPlot.tsx Applies highlight/fade state to marks.
packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightPlot.tsx New plot rendering highlighted item markers based on interaction state.
packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightElement.tsx New element component for rendering the highlighted mark shape.
packages/x-charts-premium/src/RadialLineChart/RadialLineChart.tsx Wires RadialLineHighlightPlot into the chart and extends slots/slotProps.
packages/x-charts-premium/src/RadialLineChart/RadialLine.tsx Applies highlight/fade state to line paths.
packages/x-charts-premium/src/RadialLineChart/RadialArea.tsx Applies highlight/fade state to area paths.
docs/translations/api-docs/charts/radial-line-highlight-plot/radial-line-highlight-plot.json Adds translation scaffold for the new API page.
docs/translations/api-docs/charts/radial-line-chart/radial-line-chart.json Adds slot translation entry for radialLineHighlight.
docs/public/static/error-codes.json Adds a new error code message for unsupported polar continuous axis indexing.
docs/pages/x/api/charts/radial-line-highlight-plot.json Adds generated API page metadata for RadialLineHighlightPlot.
docs/pages/x/api/charts/radial-line-highlight-plot.js Adds the docs page route for the new API page.
docs/pages/x/api/charts/radial-line-chart.json Adds the radialLineHighlight slot in the chart API JSON.
docs/data/chartsApiPages.ts Registers the new API page in the charts API pages list.
docs/data/charts/radial-lines/radial-lines.md Documents highlight support and adds the new demo.
docs/data/charts/radial-lines/ElementHighlights.tsx Adds a TS demo showcasing highlightScope and area toggle.
docs/data/charts/radial-lines/ElementHighlights.js Adds a JS demo showcasing highlightScope and area toggle.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts Outdated
Comment thread packages/x-charts-premium/src/RadialLineChart/seriesConfig/index.ts Outdated
Comment thread packages/x-charts-premium/src/RadialLineChart/seriesConfig/getItemAtPosition.ts Outdated
Comment thread packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts
Comment thread docs/data/charts/radial-lines/radial-lines.md Outdated
Comment thread packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts Outdated
Comment thread packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts Outdated
Comment thread packages/x-charts-premium/src/models/seriesType/radialLine.ts
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 24, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

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

Labels

plan: Premium Impact at least one Premium user. PR: out-of-date The pull request has merge conflicts and can't be merged. scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants