Search results

Sparkline Dimensions

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.EJ2.Blazor.Charts

<div style="width:650px; height:350px;">
    <EjsSparkline XName="Year" YName="Population" TValue="PopulationReport" DataSource="@populationData"></EjsSparkline>
</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 }
    };
}

Sparkline Charts with Container Sample

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.EJ2.Blazor.Charts

<EjsSparkline XName="Year"
              YName="Population"
              TValue="PopulationReport"
              DataSource="@populationData"
              Width="350px"
              Height="150px">
</EjsSparkline>

Refer code block to know the property value of populationData.

Sparkline Charts with size in pixel

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.EJ2.Blazor.Charts

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

Refer code block to know the property value of populationData.

Sparkline Charts with size in percentage