Search results
Sparkline Dimensions
14 Apr 2021 / 2 minutes to read
Size for container
The Sparkline Charts can be rendered to its container size. You can set the size through inline or CSS as demonstrated in the following code.
@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 }
};
}
Size for sparkline
You can also set the size for Sparkline Charts directly using the Width and Height properties.
In pixel
You can set the size for Sparkline Charts in pixels as demonstrated in the following code.
@using Syncfusion.Blazor.Charts
<SfSparkline XName="Year"
YName="Population"
TValue="PopulationReport"
DataSource="PopulationData"
Width="350px"
Height="150px">
</SfSparkline>Refer code block to know the property value of
populationData.
In percentage
By setting values in percentage, the Sparkline Charts get their dimension with respect to their containers. For example, when the height is set to ‘50%’, Sparkline Chart is rendered to half of its container width.
@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>Refer code block to know the property value of
populationData.
Thank you for your feedback and comments.We will rectify this as soon as possible!