Skip to content

feat: charts for MAUI and Avalonia - #23

Merged
Shewart merged 3 commits into
mainfrom
feat/charts
Oct 14, 2026
Merged

Shewart merged 3 commits into
mainfrom
feat/charts

Conversation

@Shewart

@Shewart Shewart commented Oct 14, 2026

Copy link
Copy Markdown
Contributor

Adds a chart family for MAUI and Avalonia, drawn by the components themselves (MAUI's GraphicsView, Avalonia's Render) with no charting package.

Changes

Theme

  • ShellToken.Chart1–Chart5 in both themes, on MAUI and Avalonia and in the theme resource file, converted from ShellUI's --chart-1–--chart-5. Charts take their series colors from them

Charts

  • chart: shared core used by every chart: series model, axes with rounded tick values, legend, tooltip under the pointer, 600 ms grow-in animation, redraw on data or theme change, and a small canvas interface each platform implements
  • bar-chart: grouped, stacked or horizontal bars, negative values
  • line-chart: smooth or straight lines, optional dots
  • area-chart: overlapping or stacked areas
  • pie-chart: PieChart and DonutChart, with a value and label in the hole
  • radar-chart: a shape per series on a ringed grid
  • radial-chart: concentric progress rings with a center value
  • Series values and labels can be written in XAML as comma-separated lists (Values="1, 2, 3")
  • The drawing code is the same on both platforms: curves and arcs become point lists, so a canvas only draws lines, polygons and text

Also

  • Registry: 114 entries, 111 CLI targets, 80 families; every chart depends on chart
  • Demos: a Charts category in MAUI and a Charts section in Avalonia, ten examples each
  • Docs: Charts chapter and token table in COMPONENTS.md, roadmap (P7 done), plan
  • Fix found on the way: MAUI's text measurement on Windows is tighter than the drawn glyphs, which clipped chart labels; text is now drawn into a roomy box with the platform's own alignment

Upgrade note

This changes shell. A project whose shell came from an older CLI version needs shellui-native update shell before it adds a chart. This goes into the next release notes, with update button (for button-group) and update calendar (for date-range-picker).

Verification

  • Solution builds 0 warnings / 0 errors on all four MAUI targets; 1083 tests pass; dotnet format check clean
  • bar-chart alone, radial-chart alone and all seven together in a fresh Avalonia app, and all seven in a fresh dotnet new maui app (Windows), build 0/0
  • Both demos checked in dark and light: every chart type, hover (cursor band, hover dots, grown slice, tooltip), adding a series and replacing values from code, theme switch
  • Hit tests return the expected category, slice or ring on both platforms; the animation runs about 30 frames over ~610 ms, and IsAnimated="False" draws at once

Not included

  • Zoom and pan, mixed bar and line charts, click events on a bar or slice

Not tested

  • Real pointer hover on MAUI (hover was driven through the component), touch, Android, iOS and Mac Catalyst (they compile), macOS and Linux, large data sets

Chart1 to Chart5 in both themes, on MAUI and Avalonia and in the theme
resource file, converted from ShellUI's --chart-1 to --chart-5. The
charts take their series colors from them.

This changes the shell utility: a project whose shell came from an older
CLI version needs `shellui-native update shell` before it adds a chart.
Bar, line, area, pie, donut, radar and radial charts, drawn by the
components themselves (MAUI's GraphicsView, Avalonia's Render) with no
charting package.

- chart: the shared core. The series model, axes with rounded tick
  values, the legend, a tooltip under the pointer, a grow-in animation,
  and a small canvas interface each platform implements.
- bar-chart: grouped, stacked or horizontal bars, with negative values.
- line-chart: smooth or straight lines, with optional dots.
- area-chart: overlapping or stacked areas.
- pie-chart: PieChart and DonutChart, with a value and label in the hole.
- radar-chart: a shape per series on a ringed grid.
- radial-chart: concentric progress rings with a centre value.

Series and labels can be written in XAML as comma-separated lists.
Charts redraw when their data or the theme changes. The drawing code is
the same on both platforms: curves and arcs are turned into points, so a
canvas only draws lines, polygons and text.

Not included: zoom and pan, mixed bar and line charts, and click events
on a bar or slice.
@github-actions github-actions Bot added documentation Improvements or additions to documentation templates examples labels Oct 14, 2026
@Shewart
Shewart merged commit f92667d into main Oct 14, 2026
7 checks passed
@Shewart
Shewart deleted the feat/charts branch October 16, 2026 06:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation examples templates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant