feat(chart): fix pie/doughnut palette, add real Chart.js, add doc screenshots

- Fix per-segment color assignment for pie/doughnut charts in ChartConfigBuilder
- Replace chart.min.js placeholder with real Chart.js v4.4.8 (201KB)
- Add Playwright-generated screenshots for all 8 chart types to docs/images/chart/
- Add Chart Type Gallery section to Chart.md documentation
- Remove palette limitation warnings (bug is now fixed)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: csharpfritz

.ai-team/agents/beast/history.md

@@ -36,4 +36,6 @@
 - **Chart doc is first JS interop component:** The Chart component is unique in the library — it's the first to use JavaScript interop (Chart.js via ES module import). The doc template needed a new "HTML Output Exception" admonition pattern to explain why `<canvas>` replaces `<img>`. This pattern should be reused for any future components that deviate from identical HTML output.
 - **DeferredControls.md updated for partial implementation:** Chart moved from fully-deferred to partially-implemented. The DeferredControls page now has a dual role: documenting controls not implemented at all (Substitution, Xml) AND documenting unsupported sub-features of implemented controls (27 unsupported chart types). This "partially implemented" pattern may apply to future controls.
 - **Child component docs pattern:** Chart introduces a multi-component documentation pattern (Chart, ChartSeries, ChartArea, ChartLegend, ChartTitle) with separate parameter tables for each. This nested-component doc approach should be used for any future components with required child components.
+- **Chart Type Gallery added:** Added a "Chart Type Gallery" section to `docs/DataControls/Chart.md` between "Chart Palettes" and "Web Forms Features NOT Supported". Contains 8 subsections (Column, Line, Bar, Pie, Doughnut, Area, Scatter, Stacked Column) each with a screenshot, `SeriesChartType` enum value, and 1-2 sentence usage guidance. Includes `!!! warning` admonitions on Pie and Doughnut for the Phase 1 palette limitation (single series color instead of per-segment colors).
+- **Chart image path convention:** Chart screenshots live at `docs/images/chart/chart-{type}.png` (lowercase, hyphenated). Referenced from Chart.md using relative paths: `../images/chart/chart-{type}.png`. This `docs/images/{component}/` pattern should be used for any future component screenshots.
 

.ai-team/decisions/inbox/beast-chart-gallery.md

@@ -0,0 +1,5 @@
+### Chart Type Gallery documentation convention
+
+**By:** Beast
+**What:** Added a "Chart Type Gallery" section to `docs/DataControls/Chart.md` showing screenshots of all 8 Phase 1 chart types. Each entry includes: an `### H3` heading, an MkDocs image (`![alt](../images/chart/chart-{type}.png)`), the `SeriesChartType` enum value, and a 1-2 sentence description of when to use that chart type. Pie and Doughnut entries include `!!! warning "Palette Limitation"` admonitions documenting the Phase 1 single-color-per-series issue.
+**Why:** Visual documentation helps migrating developers choose the correct `SeriesChartType` value and understand what each chart type looks like in the Blazor implementation. The palette limitation warnings set expectations and prevent bug reports for known Phase 1 behavior. Image path convention: `docs/images/{component}/` with `chart-{type}.png` naming.

docs/DataControls/Chart.md

@@ -123,6 +123,74 @@ Original Microsoft documentation: [System.Web.UI.DataVisualization.Charting.Char
 
 `None`, `BrightPastel` (default), `Berry`, `Chocolate`, `EarthTones`, `Excel`, `Fire`, `Grayscale`, `Light`, `Pastel`, `SeaGreen`, `SemiTransparent`
 
+## Chart Type Gallery
+
+Below is a visual reference for each of the 8 chart types supported in Phase 1. Use this gallery to choose the right chart type for your data and to see what the Blazor Chart component produces.
+
+### Column
+
+![Column Chart](../images/chart/chart-column.png)
+
+**Enum value:** `SeriesChartType.Column`
+
+The classic vertical bar chart — ideal for comparing discrete categories side by side. Use this when your X-axis represents categories (months, products, regions) and you want to emphasize differences in magnitude. This is the most commonly used chart type in Web Forms applications.
+
+### Line
+
+![Line Chart](../images/chart/chart-line.png)
+
+**Enum value:** `SeriesChartType.Line`
+
+Connects data points with straight line segments, perfect for showing trends over time. Use this when your X-axis represents a continuous or sequential dimension (dates, quarters, versions) and you want to highlight the direction and rate of change. Supports multiple series for comparison.
+
+### Bar
+
+![Bar Chart](../images/chart/chart-bar.png)
+
+**Enum value:** `SeriesChartType.Bar`
+
+A horizontal bar chart — the same concept as Column but rotated 90°. Use this when your category labels are long (e.g., product names, department titles) or when you have many categories that would crowd a vertical axis.
+
+### Pie
+
+![Pie Chart](../images/chart/chart-pie.png)
+
+**Enum value:** `SeriesChartType.Pie`
+
+Displays proportions of a whole as slices of a circle. Use this when you have a single data series and want to show each category's percentage of the total. Best with 3–7 slices — more than that becomes hard to read. Each slice is automatically assigned a distinct color from the active palette.
+
+### Doughnut
+
+![Doughnut Chart](../images/chart/chart-doughnut.png)
+
+**Enum value:** `SeriesChartType.Doughnut`
+
+A ring-shaped variant of the Pie chart with a hollow center. Use this when you want the same part-to-whole visualization as a Pie chart but prefer a cleaner look, or when you want to place a summary value or label in the center area. Each segment receives a distinct palette color automatically.
+
+### Area
+
+![Area Chart](../images/chart/chart-area.png)
+
+**Enum value:** `SeriesChartType.Area`
+
+A Line chart with the region below the line filled in. Use this when you want to emphasize the volume or cumulative total over time, rather than just the trend line. Works well for showing how a value accumulates or for comparing the magnitude of multiple series.
+
+### Scatter
+
+![Scatter Chart](../images/chart/chart-scatter.png)
+
+**Enum value:** `SeriesChartType.Point`
+
+Plots individual data points on an X/Y grid without connecting lines. Use this when both axes represent numeric values and you want to reveal correlations, clusters, or outliers in your data. Note that the Web Forms enum value is `Point`, not `Scatter`.
+
+### Stacked Column
+
+![Stacked Column Chart](../images/chart/chart-stacked-column.png)
+
+**Enum value:** `SeriesChartType.StackedColumn`
+
+Stacks multiple series vertically within each category column. Use this when you want to show both the total value per category and the breakdown of contributing series. Each color band represents one series, and the full column height shows the aggregate.
+
 ## Web Forms Features NOT Supported
 
 ### Chart Types Not Supported (Phase 1)