How to Reduce the Excessive Whitespace Around the Chart
Environment
| Product | Chart for Blazor |
Description
This KB article answers the following questions:
- How to adjust the padding of a Chart in Blazor?
- How to reduce white space around the Chart that is within a Telerik Card?
- How to make the Chart more compact?
Solution
To reduce the whitespace around a Chart, use the Padding parameter of the ChartSeries.
<TelerikCard Width="330px">
<CardHeader>
<CardTitle>Simple Pie Chart</CardTitle>
</CardHeader>
<CardBody>
<TelerikChart Height="300px">
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Pie"
Data="@pieData"
Field="@nameof(MyPieChartModel.SegmentValue)"
CategoryField="@nameof(MyPieChartModel.SegmentName)"
Padding="5">
</ChartSeries>
</ChartSeriesItems>
<ChartLegend Position="ChartLegendPosition.Bottom" Width="300">
</ChartLegend>
</TelerikChart>
</CardBody>
</TelerikCard>
@code {
private List<MyPieChartModel> pieData = new List<MyPieChartModel>
{
new MyPieChartModel
{
SegmentName = "Product 1",
SegmentValue = 2
},
new MyPieChartModel
{
SegmentName = "Product 2",
SegmentValue = 3
},
new MyPieChartModel
{
SegmentName = "Product 3",
SegmentValue = 4
}
};
public class MyPieChartModel
{
public string SegmentName { get; set; }
public double SegmentValue { get; set; }
}
}