Search results

Sparkline Types

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.

@using Syncfusion.EJ2.Blazor.Charts

<EjsSparkline DataSource="@populationData"
              TValue="PopulationReport"
              XName="Year"
              YName="Population"
              Width="200px"
              Height="150px"
              Type="SparklineType.Line">
</EjsSparkline>

@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.

@using Syncfusion.EJ2.Blazor.Charts

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

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.

@using Syncfusion.EJ2.Blazor.Charts

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

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.

@using Syncfusion.EJ2.Blazor.Charts

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

Sparkline Charts with WinLoss type

Area

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

@using Syncfusion.EJ2.Blazor.Charts

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

Refer code block to know the property value of populationData.

Sparkline Charts with Area Type Sample