Dimensions in Blazor Sparkline Component

4 Nov 20252 minutes to read

Size for the Container

The size of the Blazor Sparkline Chart is determined by its container. You can set the size inline or via CSS.

@using Syncfusion.Blazor.Charts

<div style="width:650px; height:350px;">
    <SfSparkline XName="Year" YName="Population" TValue="PopulationReport" DataSource="PopulationData"></SfSparkline>
</div>

@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 }
    };
}

Blazor Sparkline Chart with Container Size

Size for Sparkline

Set the Width and Height properties to define the Sparkline Chart’s size.

In Pixels

Specify the Sparkline Chart size in pixels.

@using Syncfusion.Blazor.Charts

<SfSparkline XName="Year"
              YName="Population"
              TValue="PopulationReport"
              DataSource="PopulationData"
              Width="350px"
              Height="150px">
</SfSparkline>

NOTE

Refer to the code block for the populationData property value.

Changing Blazor Sparkline Chart Size in Pixel

In Percentage

Set values in percentage to size the Sparkline Chart relative to its container. For example, setting height to “50%” renders the chart at half the container’s height.

@using Syncfusion.Blazor.Charts

<div style="width:650px; height:350px;">
    <SfSparkline XName="Year"
                  YName="Population"
                  TValue="PopulationReport"
                  DataSource="PopulationData"
                  Width="50%"
                  Height="80%">
    </SfSparkline>
</div>

NOTE

Refer to the code block for the populationData property value.

Changing Blazor Sparkline Chart Size in Percentage