Search results

Sparkline Chart Types

14 Apr 2021 / 2 minutes to read

Different types of shapes can be used to represent the Sparkline Charts. You can change the type of Sparkline Charts by setting the Type property. Sparkline Charts supports the following types:

  • Line
  • Column
  • Win-Loss
  • Pie
  • Area

The following code sample shows different types of Sparkline Charts.

Line

The Line type is used to render the Sparkline Charts series as line.

Copied to clipboard
@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;
    public int Population;
};
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 }
};
}

Sparkline Charts with Line Type

Column

The Column type is used to render the Sparkline Charts series as column.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="PopulationData"
          TValue="PopulationReport"
          XName="Year"
          YName="Population"
          Width="70%"
          Height="100px"
          Type="SparklineType.Column">
</SfSparkline>

Refer code block to know the property value of PopulationData.

Sparkline Charts with Column Type

Pie

The Pie type is used to render the Sparkline Charts series as pie.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="PopulationData"
          TValue="PopulationReport"
          XName="Year"
          YName="Population"
          Width="70%"
          Height="200px"
          Type="SparklineType.Pie">
</SfSparkline>

Refer code block to know the property value of PopulationData.

Sparkline Charts with Pie type

WinLoss

The WinLoss type is used to render the Sparkline Charts series as WinLoss.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="new int[]{12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10}"
          Width="50%"
          Height="200px"
          Type="SparklineType.WinLoss">
</SfSparkline>

Sparkline Charts with WinLoss type

Area

The Area type is used to render the Sparkline Charts series as area.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfSparkline DataSource="PopulationData"
          TValue="PopulationReport"
          XName="Year"
          YName="Population"
          Width="70%"
          Height="100px"
          Type="SparklineType.Area">
</SfSparkline>

Refer code block to know the property value of PopulationData.

Sparkline Charts with Area Type Sample