1005021: Updated the UG documentations getting started content according to component rendering.

[Sittiq3586]

Description

Changes for the Chart , Maps , Stock and accumulation chart getting started documentation.
Fix minor grammar and wording issues across Blazor Chart

Code Studio usage(Mandatory)

• Code Studio used in this PR/MR?

  • Yes
  • No

• If Yes: Primary use (choose one)

  • Generate new content
  • Refactor/improve existing content
  • Review assistance (explanations/summaries)
  • Other:

• Outcome

  • Saved time
  • Neutral
  • Cost time

• If “Cost time” explain in short (1 or 2 lines):

Type of Change

• New documentation page
• Update to existing documentation
• Bug fix (broken links, typos, formatting issues)
• Structural change (folders, navigation, index)
• Content improvement (clarity, examples, screenshots)
• Other (please describe):

Reviewer Checklist (Mandatory)

• Reviewed the provided Code Studio usages related information
• Content changes follow UG/Documentation guidelines
• All provided information reviewed and verified
• Links and previews checked

[Keerthivasan-Ramamoorthy]

2. Quick Start Experience
   Item Chart Accumulation Chart Stock Chart Maps
   Copy-paste-ready final code block ✅ ✅ ✅ ✅
   Minimal steps to first render ✅ ✅ ✅ ⚠️
   Preview sample link ✅ ✅ ✅ ✅
   Issue — Maps has an extra "dead render" step:
   The Maps page shows an empty snippet with a note saying "Maps will not display any content", and then follows with a second step to add GeoJSON. This two-step approach splits what should be a single "add the component with data" step and may confuse beginners. Chart, Accumulation Chart, and Stock Chart all go straight to the full working component.

Recommendation: Merge the empty step and the GeoJSON step into a single "Add Syncfusion Blazor Maps component" step, showing the complete ready-to-run markup immediately.

3. Step-by-Step Clarity
   Issue — "Populate with data" split across two code blocks (Chart & Stock Chart):

Chart: First shows the data model/list in a separate @code block, then shows the complete Razor markup in a second block. This is redundant since the complete block at the end already contains both.
Stock Chart: Same split pattern — @code block first, then the markup.
Accumulation Chart handles this cleanly: one single complete code block with both markup and @code.
Recommendation: Follow the Accumulation Chart pattern — show one self-contained, complete Home.razor code block. Remove the intermediate partial snippets.

4. Code Quality & Simplicity
   Issue — Chart: mismatched field name in prose description:

"map the data fields Month and Sales to the series XName and YName"

But the actual property in the model is SalesValue, not Sales. The description says Sales while the code uses SalesValue. This will confuse beginners.

Fix needed in getting-started-with-web-app.md (Chart):

Change: "map the data fields Month and Sales"
To: "map the data fields Month and SalesValue"

Issue — Stock Chart: YName="Close" is redundant for candle series:
The Stock Chart sample sets both YName="Close" and Close="Close" on . For a Candle series, YName is not meaningful (it uses High/Low/Open/Close). Consider removing YName="Close" to avoid confusion.

5. Blazor Best Practices
   Item Chart Accumulation Chart Stock Chart Maps
   @rendermode InteractiveAuto shown ✅ ✅ ✅ ✅
   AddSyncfusionBlazor() shown ✅ ✅ ✅ ✅
   No unnecessary lifecycle methods ✅ ✅ ✅ ✅
   All four pages follow Blazor best practices correctly. No issues.

6. Consistency Across Controls
   Item Chart Accum. Chart Stock Chart Maps
   H1 capitalisation style Web App Blazor Web App Blazor Web App Blazor Web App
   Section heading: Install packages ## Install... ### Install... (H3!) ## Install... ## Install...
   .NET CLI code tab label BlazorApp BlazorWebApp BlazorWebApp BlazorWebApp
   Theme CSS included ❌ ❌ ✅ ❌
   Theme NuGet included ❌ ✅ ✅ ❌
   "See also" links Blazor Web App ✅ Blazor Web App ✅ Old Server/WASM links ⚠️ Blazor Web App ✅
   Issues found:

Accumulation Chart — "Install packages" is H3 (###) instead of H2 (##) — breaks the visual hierarchy and is inconsistent with the other three.

Chart — H1 title mismatch: # Getting Started with Blazor Chart Component in Web App — all others say in Blazor Web App. Missing the word "Blazor".

Chart — CLI project name inconsistency: Uses BlazorApp (VS Code tab) and BlazorApp (.NET CLI tab). All other three use BlazorWebApp consistently.

Stock Chart — "See also" links are outdated: Points to old blazor-server-side-visual-studio and blazor-server-side-dotnet-cli links. Should match the other three pages which link to blazor-webassembly-app and blazor-web-app.

Stock Chart — front matter uses control: key instead of component: used by the other three. Minor but worth aligning.

7. Explanation & Guidance
   Item Chart Accumulation Chart Stock Chart Maps
   Key component tags explained ⚠️ ⚠️ ⚠️ ⚠️
   Shared gap across all four: The component tags (, , , ) are introduced in code blocks without any sentence explaining their purpose. Adding even a one-line description (e.g., "Use ChartSeriesCollection to define one or more data series to plot") would greatly help first-time users.

8. First-Time User Experience
   Chart — two-step data binding is confusing for beginners:
   Step 1 shows a standalone data model block (no component wrapper), and Step 2 shows the full component. A beginner doesn't know where to put Step 1's code in their file. The Accumulation Chart solves this by showing one complete block.

Maps — the empty component warning breaks flow:
Showing and saying "this won't show anything" is a negative first experience. The Getting Started page should go straight to a map that renders on first run.

9. Rendering Validation
   All four pages include a {% previewsample %} block with a live Blazor Playground link. No rendering issues were found in the documented steps, except:

Maps: the final "Bind data source" section does not produce a visible rendered output. It only defines data and explains ShapePropertyPath/ShapeDataPath without showing the final combined markup. The section ends without a complete, runnable code block — the reader is pointed to a separate page. This leaves the Getting Started page incomplete as a standalone guide.
Recommendation: Add a final complete Home.razor code block in Maps that combines the GeoJSON layer + data source + shape data path binding, so the page is fully self-contained.

10. Improvement Suggestions Summary

File Issue Suggested Fix

1 All four No theme CSS in Chart/Accum/Maps Add Syncfusion.Blazor.Themes NuGet + CSS to match Stock Chart pattern
2 Chart Prose says Sales but code has SalesValue Fix prose: change Month and Sales → Month and SalesValue
3 Chart H1 missing "Blazor" — in Web App Change to in Blazor Web App
4 Chart CLI uses BlazorApp instead of BlazorWebApp Change to BlazorWebApp for consistency
5 Chart Data split across two code blocks Merge into one complete Home.razor block (like Accum. Chart)
6 Accumulation Chart ### Install heading is H3, should be H2 Change ### → ##
7 Stock Chart YName="Close" redundant on Candle series Remove YName attribute from
8 Stock Chart "See also" links are outdated Replace with standard Blazor Web App / WASM links
9 Stock Chart Data split across two code blocks Merge into one complete Home.razor block
10 Stock Chart Front matter uses control: not component: Align to component: Stock Chart
11 Maps Empty step with "won't display" note Remove empty step; go directly to GeoJSON-bound component
12 Maps Data binding section has no final complete code block Add combined final Home.razor snippet with layer + data source
13 All four Component child tags not explained Add 1-line description for ChartSeriesCollection, MapsLayers, etc.
⏱️ Estimated Time to First Render
Control Current Steps to Render Verdict
Chart ~7 steps ✅ Within 5–10 min
Accumulation Chart ~7 steps ✅ Within 5–10 min
Stock Chart ~8 steps (data split) ⚠️ Could feel longer due to split
Maps ~9 steps (empty render + data source split) ⚠️ Exceeds smooth 5–10 min experience
🏆 Priority Fixes (High Impact, Low Effort)
Fix the Sales → SalesValue typo in Chart — correctness issue.
Fix the H3 ### Install heading in Accumulation Chart — structural inconsistency.
Remove the empty step in Maps — UX improvement.
Fix outdated "See also" links in Stock Chart — broken guidance.
Align theme CSS/NuGet across all four — consistency and completeness.
Finished with 1 step
The review is complete. Would you like me to apply any of these fixes directly to the files, or would you like me to prepare a standardized minimal template for all four controls to ensure perfect structural consistency going forward?

Claude Sonnet 4.6 • 3x

[SyncfusionBuild]

Build Status: INPROGRESS 🔃
Build Location: 1005021-chart-hf

[SyncfusionBuild]

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1005021-chart-hf
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

[SyncfusionBuild]

Build Status: INPROGRESS 🔃
Build Location: 1005021-chart-hf

[SyncfusionBuild]

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1005021-chart-hf
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0