Skip to content

1049010: Corrected and updated the chart skills. #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Keerthivasan-Ramamoorthy wants to merge 3 commits into
base: main
Choose a base branch
from
Open

1049010: Corrected and updated the chart skills. #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1eb8707
1049010 - Corrected and updated the chart skills.
Keerthivasan-Ramamoorthy Aug 24, 2026
858b4d8
1049010: Updated changes for skill files.
YokeshSF4393 Aug 25, 2026
840cdb3
1049010 - Corrected and updated the chart skills.
Keerthivasan-Ramamoorthy Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,097 changes: 524 additions & 573 deletions .github/skills/syncfusion-blazor-toolkit-charts/SKILL.md
View file
Open in desktop

Large diffs are not rendered by default.

1,205 changes: 197 additions & 1,008 deletions ...ncfusion-blazor-toolkit-charts/references/accessibility-internationalization.md
View file
Open in desktop

Large diffs are not rendered by default.

943 changes: 128 additions & 815 deletions .github/skills/syncfusion-blazor-toolkit-charts/references/advanced-features.md
View file
Open in desktop

Large diffs are not rendered by default.

370 changes: 151 additions & 219 deletions .github/skills/syncfusion-blazor-toolkit-charts/references/api-reference.md
View file
Open in desktop

Large diffs are not rendered by default.

1,230 changes: 184 additions & 1,046 deletions .github/skills/syncfusion-blazor-toolkit-charts/references/appearance-styling.md
View file
Open in desktop

Large diffs are not rendered by default.

1,016 changes: 160 additions & 856 deletions .github/skills/syncfusion-blazor-toolkit-charts/references/axes-and-scales.md
View file
Open in desktop

Large diffs are not rendered by default.

74 changes: 33 additions & 41 deletions .github/skills/syncfusion-blazor-toolkit-charts/references/chart-types-common.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Common Chart Types
# Common Chart Types

> **Verified against source** — series-type & shape enums verified
> against `src/Base/Enumeration.cs`. Last source audit: **2026-08-24**.

## Table of Contents

Expand Down Expand Up @@ -87,19 +90,12 @@ Line charts visualize time-dependent data by connecting data points with lines,
</SfChart>

@code {
public class ChartData
{
public string Month { get; set; }
public double Sales { get; set; }
}

public List<ChartData> SalesData = new List<ChartData>
public record ChartData(string Month, double Sales);

private readonly List<ChartData> SalesData = new()
{
new ChartData { Month = "Jan", Sales = 35 },
new ChartData { Month = "Feb", Sales = 28 },
new ChartData { Month = "Mar", Sales = 34 },
new ChartData { Month = "Apr", Sales = 32 },
new ChartData { Month = "May", Sales = 40 }
new("Jan", 35), new("Feb", 28), new("Mar", 34),
new("Apr", 32), new("May", 40)
};
}
```
Expand Down Expand Up @@ -160,18 +156,13 @@ Display different colors for each line segment:
</ChartSeries>

@code {
public class ColoredChartData
{
public string Month { get; set; }
public double Value { get; set; }
public string Color { get; set; }
}

public List<ColoredChartData> ColoredData = new List<ColoredChartData>
public record ColoredChartData(string Month, double Value, string Color);

private readonly List<ColoredChartData> ColoredData = new()
{
new ColoredChartData { Month = "Jan", Value = 35, Color = "#1f77b4" },
new ColoredChartData { Month = "Feb", Value = 28, Color = "#ff7f0e" },
new ColoredChartData { Month = "Mar", Value = 34, Color = "#2ca02c" }
new("Jan", 35, "#1f77b4"),
new("Feb", 28, "#ff7f0e"),
new("Mar", 34, "#2ca02c")
};
}
```
Expand All @@ -190,7 +181,7 @@ Area charts fill the region below the line, emphasizing magnitude and trends ove
<SfChart>
<ChartPrimaryXAxis Minimum="1900" Maximum="2000" EdgeLabelPlacement="EdgeLabelPlacement.Shift"></ChartPrimaryXAxis>

<ChartSeries DataSource="@PopulationData"
<ChartSeries DataSource="@PopulationData"
XName="Year"
YName="Population"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Area">
Expand Down Expand Up @@ -248,9 +239,9 @@ Area charts fill the region below the line, emphasizing magnitude and trends ove
YName="Value"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.MultiColoredArea">
<ChartSegments>
<ChartSegment Value="2007" Color="blue" />
<ChartSegment Value="2009" Color="red" />
<ChartSegment Color="green"></ChartSegment>
<ChartSegment Value="2007" Color="blue" />
<ChartSegment Value="2009" Color="red" />
<ChartSegment Color="green"></ChartSegment>
</ChartSegments>
</ChartSeries>
```
Expand All @@ -269,7 +260,7 @@ Column charts compare values across categories using vertical bars. Most common
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@SalesData"
<ChartSeries DataSource="@SalesData"
XName="Month"
YName="Sales"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Column">
Expand Down Expand Up @@ -328,7 +319,7 @@ Column charts compare values across categories using vertical bars. Most common

<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@SalesData"
<ChartSeries DataSource="@SalesData"
XName="Month"
YName="Sales"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Column">
Expand Down Expand Up @@ -382,7 +373,7 @@ Bar charts display horizontal bars for comparing categories. Ideal when category
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@SalesData"
<ChartSeries DataSource="@SalesData"
XName="Product"
YName="Sales"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Bar">
Expand Down Expand Up @@ -422,7 +413,7 @@ Spline charts draw smooth curves through data points using cubic spline interpol
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@TemperatureData"
<ChartSeries DataSource="@TemperatureData"
XName="Month"
YName="Temperature"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Spline">
Expand Down Expand Up @@ -462,7 +453,7 @@ Combines smooth curves of spline charts with filled areas. Shows trends with smo
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@Data"
<ChartSeries DataSource="@Data"
XName="Month"
YName="Value"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.SplineArea">
Expand Down Expand Up @@ -491,7 +482,7 @@ Step line charts display data as a series of horizontal and vertical line segmen
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@StockData"
<ChartSeries DataSource="@StockData"
XName="Date"
YName="Price"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.StepLine">
Expand All @@ -513,7 +504,7 @@ Step area charts combine stepped lines with filled areas below. Shows discrete c
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeries DataSource="@Data"
<ChartSeries DataSource="@Data"
XName="Category"
YName="Value"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.StepArea">
Expand Down Expand Up @@ -547,19 +538,20 @@ All chart types support empty point handling for `null`, `double.NaN`, or `undef
XName="Month"
YName="Value"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Line">
<ChartEmptyPointSettings Mode="EmptyPointMode.Average"
<ChartEmptyPointSettings Mode="Syncfusion.Blazor.Toolkit.EmptyPointMode.Average"
Fill="red">
<ChartEmptyPointBorder Color="green" Width="2"></ChartEmptyPointBorder>
<ChartEmptyPointBorder Color="green" Width="2"></ChartEmptyPointBorder>
</ChartEmptyPointSettings>
<ChartMarker Visible="true" Width="7" Height="7"></ChartMarker>
</ChartSeries>
```

**Empty Point Modes:**
**Empty Point Modes:** (source order — verified at
`src/Base/Enumeration.cs:1062`)
- `Gap` (default) - Leave gap in series
- `Zero` - Plot as zero value
- `Average` - Use average of adjacent points
- `Drop` - Drop the point entirely
- `Average` - Use average of adjacent points

---

Expand Down Expand Up @@ -648,14 +640,14 @@ Display multiple chart types together:
<ChartLegendSettings Visible="true"></ChartLegendSettings>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>

<ChartSeries DataSource="@ActualSales"
<ChartSeries DataSource="@ActualSales"
Name="Actual"
XName="Month"
YName="Sales"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Column">
</ChartSeries>

<ChartSeries DataSource="@TargetSales"
<ChartSeries DataSource="@TargetSales"
Name="Target"
XName="Month"
YName="Sales"
Expand Down
88 changes: 46 additions & 42 deletions ...b/skills/syncfusion-blazor-toolkit-charts/references/chart-types-specialized.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Specialized Blazor Chart Types Reference
# Specialized Blazor Chart Types Reference

> **Verified against source** — series-type & shape enums verified
> against `src/Base/Enumeration.cs`. Last source audit: **2026-08-24**.

A comprehensive guide to implementing specialized Syncfusion Blazor chart types including stacked, scatter, and bubble charts. This document is self-contained with complete examples and best practices.

Expand Down Expand Up @@ -34,7 +37,7 @@ A comprehensive guide to implementing specialized Syncfusion Blazor chart types
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" />

<ChartSeries DataSource="@RevenueData"
<ChartSeries DataSource="@RevenueData"
XName="Year"
YName="ProductA"
Name="Product A"
Expand All @@ -44,7 +47,7 @@ A comprehensive guide to implementing specialized Syncfusion Blazor chart types
<ChartSeriesBorder Width="2" Color="black" />
</ChartSeries>

<ChartSeries DataSource="@RevenueData"
<ChartSeries DataSource="@RevenueData"
XName="Year"
YName="ProductB"
Name="Product B"
Expand All @@ -54,7 +57,7 @@ A comprehensive guide to implementing specialized Syncfusion Blazor chart types
<ChartSeriesBorder Width="2" Color="black" />
</ChartSeries>

<ChartSeries DataSource="@RevenueData"
<ChartSeries DataSource="@RevenueData"
XName="Year"
YName="ProductC"
Name="Product C"
Expand All @@ -65,24 +68,18 @@ A comprehensive guide to implementing specialized Syncfusion Blazor chart types
</ChartSeries>

<ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6">
<ChartStackLabelFont FontWeight="600" Color="blue" />
<ChartStackLabelFont FontWeight="600" Color="blue" />
</ChartStackLabelSettings>
</SfChart>

@code {
public class StackedData
{
public double Year { get; set; }
public double ProductA { get; set; }
public double ProductB { get; set; }
public double ProductC { get; set; }
}
public record StackedData(double Year, double ProductA, double ProductB, double ProductC);

public List<StackedData> RevenueData = new List<StackedData>
private readonly List<StackedData> RevenueData = new()
{
new StackedData { Year = 2020, ProductA = 0.61, ProductB = 0.03, ProductC = 0.48 },
new StackedData { Year = 2021, ProductA = 0.81, ProductB = 0.05, ProductC = 0.53 },
new StackedData { Year = 2022, ProductA = 0.91, ProductB = 0.06, ProductC = 0.57 }
new(2020, 0.61, 0.03, 0.48),
new(2021, 0.81, 0.05, 0.53),
new(2022, 0.91, 0.06, 0.57)
};
}
```
Expand Down Expand Up @@ -118,25 +115,38 @@ A comprehensive guide to implementing specialized Syncfusion Blazor chart types
```cshtml
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" />
fix th <ChartSeries DataSource="@ScatterData"
XName="Country"
YName="GoldMedals"

<ChartSeries DataSource="@ScatterData"
XName="Country"
YName="GoldMedals"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Scatter"
Fill="green"
Opacity="0.5">
<ChartMarker Height="10" Width="10" Shape="ChartShape.Triangle" />
<ChartMarker Height="10" Width="10" Shape="Syncfusion.Blazor.Toolkit.ChartShape.Triangle" />
</ChartSeries>
<ChartSeries DataSource="@ScatterData"
XName="Country"
YName="SilverMedals"

<ChartSeries DataSource="@ScatterData"
XName="Country"
YName="SilverMedals"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Scatter"
Fill="blue"
Opacity="0.5">
<ChartMarker Height="10" Width="10" Shape="ChartShape.Rectangle" />
<ChartMarker Height="10" Width="10" Shape="Syncfusion.Blazor.Toolkit.ChartShape.Rectangle" />
</ChartSeries>
</SfChart>

@code {
public record ScatterPoint(string Country, double GoldMedals, double SilverMedals);

private readonly List<ScatterPoint> ScatterData = new()
{
new("USA", 39, 41),
new("China", 38, 32),
new("Japan", 27, 14),
new("UK", 22, 20),
new("Australia", 17, 7)
};
}
```

---
Expand All @@ -149,7 +159,7 @@ fix th <ChartSeries DataSource="@ScatterData"

```cshtml
<SfChart>
<ChartSeries DataSource="@PopulationData"
<ChartSeries DataSource="@PopulationData"
XName="LiteracyRate"
YName="GrowthRate"
Size="Population"
Expand All @@ -160,18 +170,12 @@ fix th <ChartSeries DataSource="@ScatterData"
</SfChart>

@code {
public class BubbleData
{
public double LiteracyRate { get; set; }
public double GrowthRate { get; set; }
public double Population { get; set; }
public string Country { get; set; }
}
public record BubbleData(double LiteracyRate, double GrowthRate, double Population, string Country);

public List<BubbleData> PopulationData = new List<BubbleData>
private readonly List<BubbleData> PopulationData = new()
{
new BubbleData { LiteracyRate = 92.2, GrowthRate = 7.8, Population = 1.347, Country = "China" },
new BubbleData { LiteracyRate = 74, GrowthRate = 6.5, Population = 1.241, Country = "India" }
new(92.2, 7.8, 1.347, "China"),
new(74.0, 6.5, 1.241, "India")
};
}
```
Expand All @@ -183,7 +187,7 @@ fix th <ChartSeries DataSource="@ScatterData"
**Apply to any chart type**:
```cshtml
<SfChart IsTransposed="true">
<ChartSeries DataSource="@Data"
<ChartSeries DataSource="@Data"
XName="X"
YName="Y"
Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Spline" />
Expand All @@ -196,7 +200,7 @@ fix th <ChartSeries DataSource="@ScatterData"

### Empty Point Handling
```cshtml
<ChartEmptyPointSettings Mode="EmptyPointMode.Average" Fill="#FFDE59">
<ChartEmptyPointSettings Mode="Syncfusion.Blazor.Toolkit.EmptyPointMode.Average" Fill="#FFDE59">
<ChartEmptyPointBorder Color="red" Width="2" />
</ChartEmptyPointSettings>
```
Expand Down Expand Up @@ -269,6 +273,6 @@ fix th <ChartSeries DataSource="@ScatterData"

---

**Document Version**: 1.0
**Last Updated**: March 2026
**Total Lines**: ~390
**Document Version:** 1.1
**Last Source Audit:** 2026-08-24
**Total Lines:** ~388
Loading