Chart can render to its container size. You can set the size inline or through CSS as demonstrated below.
@using Syncfusion.Blazor.Charts
<div style="width:650px; height:350px;">
<SfChart Title="Inflation - Consumer Price" Width="650" Height="350">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@ConsumerDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> ConsumerDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 26 },
new ChartData { X= "AUS", YValue= 26 },
new ChartData { X= "IND", YValue= 26 },
new ChartData { X= "DEN", YValue= 26 },
new ChartData { X= "MEX", YValue= 26 },
};
}
You can also set size for chart directly through Width
and
Height
properties.
In Pixel
You can set the size of chart in pixel as demonstrated below.
@using Syncfusion.Blazor.Charts
<SfChart Title="Inflation - Consumer Price" Width="650px" Height="350px">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@ConsumerDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> ConsumerDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 26 },
new ChartData { X= "AUS", YValue= 26 },
new ChartData { X= "IND", YValue= 26 },
new ChartData { X= "DEN", YValue= 26 },
new ChartData { X= "MEX", YValue= 26 },
};
}
In Percentage
By setting value in percentage, chart gets its dimension with respect to its container. For example, when the height is ‘50%’, chart renders to half of the container height.
@using Syncfusion.Blazor.Charts
<SfChart Title="Inflation - Consumer Price" Width="80%" height="90%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@ConsumerDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
}
public List<ChartData> ConsumerDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 26 },
new ChartData { X= "AUS", YValue= 26 },
new ChartData { X= "IND", YValue= 26 },
new ChartData { X= "DEN", YValue= 26 },
new ChartData { X= "MEX", YValue= 26 },
};
}
Note: When you do not specify the size, it takes
450px
as the height and window size as its width.