Radzen 7, RadzenChart within RadzenTab in Dialog is rendered incorrectly on first view

Radzen.Blazor Components
1

I display RadzenCharts in RadzenTabs in a dialog (using .OpenAsync()). After upgrading to Radzen 7 the chart in the first tab is initially shown way too small. If I switch tabs back and forth the chart is rendered in the correct size. Changing the dialog size by dragging its corner will also display the chart in the correct size. I tried DialogService.Refresh() in OnAfterRenderAsync as a temporary workaround but it does not work.

Dummy code looks like this:

<RadzenRow>
    <RadzenColumn>
        <RadzenTabs>
            <Tabs>
                <RadzenTabsItem Text="Some chart">
                    @* <RadzenText TextStyle="TextStyle.H6">Some Chart Text</RadzenText> *@
                    <RadzenChart>
                    </RadzenChart>
                </RadzenTabsItem>
            </Tabs>
        </RadzenTabs>
    </RadzenColumn>
</RadzenRow>

Any ideas? Thanks!

2

Hi @Murmelmann,

We are not sure what could be causing this. Could it be old theme CSS files? If you are using a premium theme you need to update it.

In any case you can provide a reproduction by editing some of the online demos and pasting the code here.

3

I am using the free theme

4

Then we would need a reproduction.

5

Here you go. I actually dont use the inline dialog but a separate component, but the bug occurs here as well. Resize the dialog and the chart will show properly.

@inject DialogService DialogService
@using System.Globalization


<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text="Dialog with inline Blazor content" ButtonStyle="ButtonStyle.Secondary" Click=@ShowInlineDialog />
</div>

@code {
 bool smooth = false;
    bool sharedTooltip = true;
    bool showDataLabels = false;
    bool showMarkers = true;

    class DataItem
    {
        public string Date { get; set; }
        public double Revenue { get; set; }
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] revenue2023 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 234000
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 269000
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 233000
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 244000
        },
        new DataItem
        {
            Date = "May",
            Revenue = 214000
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 253000
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 274000
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 284000
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 273000
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 282000
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 289000
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 294000
        }
    };

    DataItem[] revenue2024 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 334000
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 369000
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 333000
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 344000
        },
        new DataItem
        {
            Date = "May",
            Revenue = 314000
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 353000
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 374000
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 384000
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 373000
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 382000
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 389000
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 394000
        }
    };

    async Task ShowInlineDialog()
    {
        var result = await DialogService.OpenAsync("Simple Dialog", ds =>
        @<RadzenRow>
    <RadzenColumn>
        <RadzenTabs>
            <Tabs>
                <RadzenTabsItem Text="Some chart">

 <RadzenChart>
        <RadzenChartTooltipOptions Shared="@sharedTooltip" />
        <RadzenLineSeries Smooth="@smooth" Data="@revenue2023" CategoryProperty="Date" Title="2023" LineType="LineType.Dashed" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Square" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" />
        </RadzenLineSeries>
        <RadzenLineSeries Smooth="@smooth" Data="@revenue2024" CategoryProperty="Date" Title="2024" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Circle" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" />
        </RadzenLineSeries>
        <RadzenCategoryAxis Padding="20" />
        <RadzenValueAxis Formatter="@FormatAsUSD">
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Revenue in USD" />
        </RadzenValueAxis>
    </RadzenChart>
                </RadzenTabsItem>
            </Tabs>
        </RadzenTabs>
    </RadzenColumn>
</RadzenRow>, new() { Resizable = true});
    }
}
6

Thanks! Seems to be caused by the animation which was introduced in v7. The chart can't calculate its size at the time it is initialized because the dialog is animating. Here are two workarounds until we find a reliable solution:

  1. Disable the dialog animation via this CSS (this will keep the v6 behavior but the dialog would no longer animate):
    <style>
.rz-dialog.rz-open {
   animation: none !important;
}
</style>
  2. To keep the animation set the width and height of the chart in pixels:
    <RadzenChart style="width: 500px; height: 400px;">
7

Found a third option - to disable the scaling part of the animation via this CSS:

@keyframes rz-dialog-open {
  from {
    transform: none !important;
    opacity: 0;
  }
  to {
    transform: none !important;
    opacity: 1;
  }
}

Still will try to find a solution.

8

Okay thanks. I will likely temporarily disable the dialog animation.

9

Can i apply this style to a single dialog? i tried DialogOptions CssClass but it did not work.

<style>
.rz-dialog.rz-open {
   animation: none !important;
}
</style>
10

You can try something like this:

.rz-dialog.rz-open:has(.rz-chart) {
    animation: none !important;
}
11

That works fine. Thanks!