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.