Chart Types in Blazor Sparkline Component
17 Dec 20222 minutes to read
The different type of shapes can be used to represent the Sparkline Chart, and the type of Sparkline Chart can be changed by specifying the Type property.
Line
The Line chart type is used to render the Sparkline series as line.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="200px" Height="150px" Type="SparklineType.Line">
</SfSparkline>
@code {
public class PopulationReport
{
public int Year { get; set; }
public int Population { get; set; }
};
private List<PopulationReport> PopulationData = new List<PopulationReport> {
new PopulationReport { Year= 2005, Population= 20090440 },
new PopulationReport { Year= 2006, Population= 20264080 },
new PopulationReport { Year= 2007, Population= 20434180 },
new PopulationReport { Year= 2008, Population= 21007310 },
new PopulationReport { Year= 2009, Population= 21262640 },
new PopulationReport { Year= 2010, Population= 21515750 },
new PopulationReport { Year= 2011, Population= 21766710 },
new PopulationReport { Year= 2012, Population= 22015580 },
new PopulationReport { Year= 2013, Population= 22262500 },
new PopulationReport { Year= 2014, Population= 22507620 }
};
}
Column
The Column chart type is used to render the Sparkline series as column.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="150px" Type="SparklineType.Column">
</SfSparkline>
NOTE
Refer to the code block to know about the property value of the PopulationData.
Pie
The Pie chart type is used to render the Sparkline series as pie.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="250px" Type="SparklineType.Pie">
</SfSparkline>
NOTE
Refer to the code block to know about the property value of the PopulationData.
WinLoss
The WinLoss chart type is used to render the Sparkline series as WinLoss.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="new int[]{12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10}" Width="500px" Height="200px" Type="SparklineType.WinLoss">
</SfSparkline>
Area
The Area chart type is used to render the Sparkline series as area.
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="100px" Type="SparklineType.Area">
</SfSparkline>
NOTE
Refer to the code block to know about the property value of the PopulationData.