microsoft
diff --git a/‎SKILL.md‎
Lines changed: 1 addition & 0 deletions b/‎SKILL.md‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎docs/_pipeline/apps/charting/App.cs‎
Lines changed: 69 additions & 0 deletions b/‎docs/_pipeline/apps/charting/App.cs‎
Lines changed: 69 additions & 0 deletions
diff --git a/‎docs/_pipeline/apps/charting/doc-manifest.yaml‎
Lines changed: 10 additions & 0 deletions b/‎docs/_pipeline/apps/charting/doc-manifest.yaml‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎docs/_pipeline/templates/charting.md.dt‎
Lines changed: 46 additions & 0 deletions b/‎docs/_pipeline/templates/charting.md.dt‎
Lines changed: 46 additions & 0 deletions
diff --git a/‎docs/guide/charting.md‎
Lines changed: 66 additions & 0 deletions b/‎docs/guide/charting.md‎
Lines changed: 66 additions & 0 deletions
diff --git a/‎docs/guide/images/charting/accessible-chart.png‎
65.3 KB b/‎docs/guide/images/charting/accessible-chart.png‎
65.3 KB
diff --git a/‎docs/guide/images/charting/axis-tick-view.png‎
48.9 KB b/‎docs/guide/images/charting/axis-tick-view.png‎
48.9 KB
diff --git a/‎docs/guide/images/charting/pie-label-view.png‎
99.2 KB b/‎docs/guide/images/charting/pie-label-view.png‎
99.2 KB
diff --git a/‎samples/ReactorCharting.Gallery/GalleryHelpers.cs‎
Lines changed: 1 addition & 1 deletion b/‎samples/ReactorCharting.Gallery/GalleryHelpers.cs‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎samples/ReactorCharting.Gallery/Icons/BrowserSharePie.svg‎
Lines changed: 6 additions & 0 deletions b/‎samples/ReactorCharting.Gallery/Icons/BrowserSharePie.svg‎
Lines changed: 6 additions & 0 deletions
@@ -25,6 +25,7 @@ re-renders automatically. No XAML. No data binding. No ViewModels.
 | [`skills/navigation.md`](skills/navigation.md) | Multi-page apps, sidebar/tab navigation, routes, deep linking, page transitions, caching. `UseNavigation`, `NavigationHost`, `NavigationView`, `TabView`. |
 | [`skills/forms.md`](skills/forms.md) | Data-entry screens, validation, masked/formatted input. `UseValidationContext`, `FormField`, `MaskEngine`, `InputFormatter`. |
 | [`skills/input.md`](skills/input.md) | Gestures, pointer events, drag-and-drop, focus management. `OnPan`, `OnPinch`, `OnRotate`, `OnDragStarting`, `UseElementFocus`. |
+| [`skills/charts.md`](skills/charts.md) | Data visualization — choosing a chart type (incl. donut, `TreeChart`, `ForceGraph`), the chart DSL, the `LabelView` / `XTickLabelView` / `YTickLabelView` extension points for icon-plus-text and rich labels, plus the visualization-best-practices rules to refuse to break. |
 | [`skills/dsl-reference.md`](skills/dsl-reference.md) | Look up signatures — every factory, modifier, and enum in the DSL. |
 
 ## Project Setup
 
@@ -193,6 +193,73 @@ public override Element Render()
 }
 // </snippet:dynamic-data>
 
+/// <summary>
+/// Demonstrates <see cref="PieChartElement{T}.LabelView"/> — replace the built-in
+/// text slice label with any Element. The string LabelAccessor is still passed so
+/// screen readers describe the slice correctly.
+/// </summary>
+class PieLabelViewDemo : Component
+{
+    public override Element Render()
+    {
+        var data = new CategoryData[]
+        {
+            new("Engineering", 42), new("Sales", 25),
+            new("Marketing", 18),   new("Support", 15)
+        };
+
+        return VStack(12,
+            SubHeading("Pie LabelView"),
+            // <snippet:pie-label-view>
+            // Percent rendered inside the slice. The string label accessor
+            // is still passed so screen readers describe the slice.
+            PieChart(data, d => d.Value, d => d.Name)
+                .Title("Team Distribution")
+                .Width(300).Height(300)
+                .InnerRadius(50).PadAngle(0.02)
+                .LabelView((d, layout) =>
+                    TextBlock($"{layout.Fraction:P0}")
+                        .FontSize(12).Bold().Foreground("White"))
+            // </snippet:pie-label-view>
+        ).Padding(24);
+    }
+}
+
+/// <summary>
+/// Demonstrates <see cref="ChartElement{T}.XTickLabelView"/> — replace the numeric
+/// X-axis tick label with any Element.
+/// </summary>
+class AxisTickViewDemo : Component
+{
+    public override Element Render()
+    {
+        var data = new SalesPoint[]
+        {
+            new(1, 120), new(2, 180), new(3, 150),
+            new(4, 220), new(5, 310), new(6, 280)
+        };
+
+        string[] months = { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
+
+        return VStack(12,
+            SubHeading("Axis XTickLabelView"),
+            // <snippet:axis-tick-view>
+            // X axis ticks: render month name plus a caption per tick.
+            LineChart(data, d => d.Month, d => d.Revenue)
+                .Title("Revenue by Month")
+                .SeriesName("Revenue")
+                .Width(600).Height(220)
+                .Stroke("#0078D4").StrokeWidth(2.5)
+                .ShowGrid(true).ShowAxes(true)
+                .XTickLabelView(t => VStack(2,
+                    TextBlock(months[Math.Clamp((int)t - 1, 0, months.Length - 1)])
+                        .FontSize(11).SemiBold(),
+                    TextBlock("month").FontSize(8).Opacity(0.6)))
+            // </snippet:axis-tick-view>
+        ).Padding(24);
+    }
+}
+
 // <snippet:accessible-chart>
 /// <summary>
 /// Canonical accessible chart pattern — demonstrates all recommended accessibility
@@ -251,6 +318,8 @@ public override Element Render()
                 Component<PieChartDemo>(),
                 Component<CombinedChartDemo>(),
                 Component<DynamicDataDemo>(),
+                Component<PieLabelViewDemo>(),
+                Component<AxisTickViewDemo>(),
                 Component<AccessibleChartDemo>()
             ).Padding(24)
         );
 
@@ -35,6 +35,16 @@ screenshots:
     component: DynamicDataDemo
     region: client
     format: png
+  - id: pie-label-view
+    description: "Pie chart with percent rendered inside each slice via LabelView"
+    component: PieLabelViewDemo
+    region: client
+    format: png
+  - id: axis-tick-view
+    description: "Line chart with month-name axis ticks via XTickLabelView"
+    component: AxisTickViewDemo
+    region: client
+    format: png
   - id: accessible-chart
     description: "Accessible chart with screen-reader annotations and keyboard navigation"
     component: AccessibleChartDemo
 
@@ -123,6 +123,52 @@ diffs the old and new element trees and patches only what changed:
 For high-frequency updates (60fps streaming), use `OnReady` to get a
 handle that exposes the underlying `Canvas` for direct manipulation.
 
+## Custom Label Elements
+
+Most charts only need the string-based label APIs (`AxisLabel`,
+`LabelAccessor`, `DataLabel`). Reach for the `*View` extensions only when
+plain text isn't enough — for icon-plus-text ticks, multi-line labels with
+mixed typography, or rendering a slice's percent inside the slice itself.
+
+### Pie slice labels
+
+`LabelView` replaces the built-in text label on each pie slice. The delegate
+receives the slice's data item plus a `PieSliceLayout` describing its
+geometry, and returns any Element:
+
+```csharp snippet="charting/pie-label-view"
+```
+
+![Pie chart with the percent rendered inside each slice](screenshot://charting/pie-label-view)
+
+`PieSliceLayout` exposes the slice's `Index`, `Value`, `Fraction`,
+`CentroidX`/`CentroidY`, `StartAngle`/`EndAngle`, `InnerRadius`/`OuterRadius`,
+and the resolved palette `Color` so a label can echo slice geometry without
+recomputing it.
+
+### Axis tick labels
+
+`XTickLabelView` and `YTickLabelView` replace the numeric tick labels with
+any Element. Each delegate receives the tick's domain value:
+
+```csharp snippet="charting/axis-tick-view"
+```
+
+![Line chart with month-name axis ticks](screenshot://charting/axis-tick-view)
+
+| Method | Purpose |
+|--------|---------|
+| `PieChartElement<T>.LabelView(Func<T, PieSliceLayout, Element>)` | Replace the built-in slice text with any Element, anchored on the slice centroid |
+| `ChartElement<T>.XTickLabelView(Func<double, Element>)` | Replace the X-axis tick label, horizontally centered on the tick |
+| `ChartElement<T>.YTickLabelView(Func<double, Element>)` | Replace the Y-axis tick label, right-anchored to the axis edge |
+
+The element you return is auto-anchored — you don't need a known size at
+construction time, and the chart re-positions on layout. It is also rendered
+non-interactive and hidden from the UIA tree, so the chart's structured
+accessibility description (see below) stays canonical. Always keep the
+string `LabelAccessor` (pie) or `DataLabel` (line/bar/area) set when you use
+a `*View` override; that's what screen readers read.
+
 ## Chart Accessibility
 
 Charts are fully accessible out of the box. Add `.Title()` and
 
@@ -272,6 +272,72 @@ class DynamicDataDemo : Component
 For high-frequency updates (60fps streaming), use `OnReady` to get a
 handle that exposes the underlying `Canvas` for direct manipulation.
 
+## Custom Label Elements
+
+Most charts only need the string-based label APIs (`AxisLabel`,
+`LabelAccessor`, `DataLabel`). Reach for the `*View` extensions only when
+plain text isn't enough — for icon-plus-text ticks, multi-line labels with
+mixed typography, or rendering a slice's percent inside the slice itself.
+
+### Pie slice labels
+
+`LabelView` replaces the built-in text label on each pie slice. The delegate
+receives the slice's data item plus a `PieSliceLayout` describing its
+geometry, and returns any Element:
+
+```csharp
+// Percent rendered inside the slice. The string label accessor
+// is still passed so screen readers describe the slice.
+PieChart(data, d => d.Value, d => d.Name)
+    .Title("Team Distribution")
+    .Width(300).Height(300)
+    .InnerRadius(50).PadAngle(0.02)
+    .LabelView((d, layout) =>
+        TextBlock($"{layout.Fraction:P0}")
+            .FontSize(12).Bold().Foreground("White"))
+```
+
+![Pie chart with the percent rendered inside each slice](images/charting/pie-label-view.png)
+
+`PieSliceLayout` exposes the slice's `Index`, `Value`, `Fraction`,
+`CentroidX`/`CentroidY`, `StartAngle`/`EndAngle`, `InnerRadius`/`OuterRadius`,
+and the resolved palette `Color` so a label can echo slice geometry without
+recomputing it.
+
+### Axis tick labels
+
+`XTickLabelView` and `YTickLabelView` replace the numeric tick labels with
+any Element. Each delegate receives the tick's domain value:
+
+```csharp
+// X axis ticks: render month name plus a caption per tick.
+LineChart(data, d => d.Month, d => d.Revenue)
+    .Title("Revenue by Month")
+    .SeriesName("Revenue")
+    .Width(600).Height(220)
+    .Stroke("#0078D4").StrokeWidth(2.5)
+    .ShowGrid(true).ShowAxes(true)
+    .XTickLabelView(t => VStack(2,
+        TextBlock(months[Math.Clamp((int)t - 1, 0, months.Length - 1)])
+            .FontSize(11).SemiBold(),
+        TextBlock("month").FontSize(8).Opacity(0.6)))
+```
+
+![Line chart with month-name axis ticks](images/charting/axis-tick-view.png)
+
+| Method | Purpose |
+|--------|---------|
+| `PieChartElement<T>.LabelView(Func<T, PieSliceLayout, Element>)` | Replace the built-in slice text with any Element, anchored on the slice centroid |
+| `ChartElement<T>.XTickLabelView(Func<double, Element>)` | Replace the X-axis tick label, horizontally centered on the tick |
+| `ChartElement<T>.YTickLabelView(Func<double, Element>)` | Replace the Y-axis tick label, right-anchored to the axis edge |
+
+The element you return is auto-anchored — you don't need a known size at
+construction time, and the chart re-positions on layout. It is also rendered
+non-interactive and hidden from the UIA tree, so the chart's structured
+accessibility description (see below) stays canonical. Always keep the
+string `LabelAccessor` (pie) or `DataLabel` (line/bar/area) set when you use
+a `*View` override; that's what screen readers read.
+
 ## Chart Accessibility
 
 Charts are fully accessible out of the box. Add `.Title()` and
 
@@ -18,5 +18,5 @@ public abstract class GallerySample
     public abstract Element Render();
 
     /// <summary>SVG icon filename (without extension), derived from class name.</summary>
-    public string IconName => GetType().Name.Replace("Sample", "");
+    public virtual string IconName => GetType().Name.Replace("Sample", "");
 }
Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,5 @@ public abstract class GallerySample`
`18`	`18`	`public abstract Element Render();`
`19`	`19`
`20`	`20`	`/// <summary>SVG icon filename (without extension), derived from class name.</summary>`
`21`		`- public string IconName => GetType().Name.Replace("Sample", "");`
	`21`	`+ public virtual string IconName => GetType().Name.Replace("Sample", "");`
`22`	`22`	`}`