Charts are overflowing on dashboard layout panels by 30px

[Jake]

When displaying a chart element in a dashboard layout, the height of the chart is 30px greater than the height of the dashboard panel's container. 

As seen in the image, these charts should be 30 pixels shorter to fit properly in the dashboard panels. This issue arose after updating to version 22.1.39 from 21.1.41

[Prasanth Madhaiyan]

Hi Jake,

Greetings from Syncfusion support.

We have validated your reported requirement in the Blazor Dashboard Layout component by preparing a sample using the details you shared. We understand that you are facing an overflow issue when rendering the Chart component inside the Dashboard Layout panel. To overcome this issue, please refer to the below code snippets to resolve the reported problem at your end.

[Index.razor]

 

<div class="content">

    <SfDashboardLayout Columns="6" CellSpacing="@(new double[]{10 ,10 })">

        <DashboardLayoutPanels>

            <DashboardLayoutPanel SizeX="4" SizeY="2">

                <HeaderTemplate><div class='header'> Customers Count </div></HeaderTemplate>

                <ContentTemplate>

                    <div style="height:100%; width:100%;">

                        <SfChart ID="linechart" @ref="linechartObj">

                            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">

                            </ChartPrimaryXAxis>

                            <ChartSeriesCollection>

                                <ChartSeries DataSource="@DataSource" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">

                                    <ChartMarker Visible="true">

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">

                                        </ChartDataLabel>

                                    </ChartMarker>

                                </ChartSeries>

                            </ChartSeriesCollection>

                        </SfChart>

                    </div>

                </ContentTemplate>

            </DashboardLayoutPanel>

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

@code

{

    SfChart? linechartObj;

 

    …

 

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        await Task.Delay(3000); // simulate the async operations

        this.linechartObj?.RefreshAsync();

    }

}

 

<style>

    #linechart {

        height: 100% !important;

        width: 100% !important;

    }

</style>

For your reference, we have attached the sample and documentation.

Documentation: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started#panels-with-components

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDashboardLayout_d7bdda0d.zip

[Jake]

Hi Prasanth,

The height still seems to be incorrect with these changes made. 

Here is a new screenshot of how it looks after these changes.

[Prasanth Madhaiyan]

Hi Jake,

Based on the shared details, we understand that you are still facing the overflow issue when rendering the Chart component inside the Dashboard Layout panel. Whether you are rendering the chart component inside the Dashboard panel on a separate page or on the same page, you are making the refresh call properly for the Chart component at your end.

If possible, could you please replicate the issue in the previously shared sample or share the issue-replicated sample? This will help us reproduce the exact issue you're facing on our end. Once we have these details, we will check them and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

[Jake]

Hi Prasanth,

The following code (copied and simplified from the Syncfusion Blazor Dashboardlayout demo) is producing the bug.

@page "/dashboard-layout/overview"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Charts
<div class="control-section">
<SfDashboardLayout @ref="dashboardObject" Columns="8" CellSpacing="@Spacing" CellAspectRatio="@Ratio">
<DashboardLayoutPanels>


<DashboardLayoutPanel Column="0" Row="1" SizeX="4" SizeY="3">
<HeaderTemplate>
<span class="title">Income - Expense</span>
</HeaderTemplate>
<ContentTemplate>
<SfChart Height="100%" Width="100%" Theme="@Theme">
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" LabelFormat="MMM" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis LabelFormat="${value}" Minimum="1000" Maximum="9000" Interval="2000">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@IncomeExpenseData" Name="Income" XName="Period" Width="2"
 Opacity="0.5" YName="Income" Type="ChartSeriesType.SplineArea" Fill="#00BCD7">
</ChartSeries>
<ChartSeries DataSource="@IncomeExpenseData" Name="Expense" XName="Period" Width="2"
 Opacity="0.5" YName="Expense" Type="ChartSeriesType.SplineArea" Fill="#CDDE1F">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</ContentTemplate>
</DashboardLayoutPanel>


</DashboardLayoutPanels>
</SfDashboardLayout>
</div>
@code {
SfDashboardLayout dashboardObject;
private Theme Theme { get; set; }
private double[] Spacing = new double[] { 15, 15 };
private double Ratio = 160 / 100;


private List<IncomeExpense> IncomeExpenseData = new List<IncomeExpense>
{
new IncomeExpense { Period = new DateTime(2021, 01, 01), Income = 7490, Expense = 6973 },
new IncomeExpense { Period = new DateTime(2021, 02, 01), Income = 6840, Expense = 6060 },
new IncomeExpense { Period = new DateTime(2021, 03, 01), Income = 6060, Expense = 5500 },
new IncomeExpense { Period = new DateTime(2012, 04, 01), Income = 8190, Expense = 7059 },
new IncomeExpense { Period = new DateTime(2021, 05, 01), Income = 7320, Expense = 6333 },
new IncomeExpense { Period = new DateTime(2021, 06, 01), Income = 7380, Expense = 6135 }
};
private class IncomeExpense
{
public DateTime Period { get; set; }
public int Income { get; set; }
public int Expense { get; set; }
}
}

How the page looks:
 

[Prasanth Madhaiyan]

Hi Jake,

Based on the shared details, we have prepared the sample using the provided code snippets, and the Chart component is rendered without any overflow of the panel at our end. Also, checking your attached screenshot, the chart component is rendered properly inside the panel.

For your reference, we have attached the sample.

We are quite unclear about the exact issue you are facing on your end. And already, we shared the solution regarding the panel content overflow, and we have done the same in the demo too. So, please share the exact issue you are facing on your end. Based on that, we will check and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDashboardLayoutSample_4032e171.zip