bug(Chart): Responsive attribute only work when the window become wider, but not work when the window become narrow.

[ice6]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

my code:

<div class="w-100">
<Chart ChartType="ChartType.Bar" Responsive="true" 
OnInitAsync="() => OnInitAspectRatio(true)" 
Title="SKU" Height="500px" Width="100%" /> 
</div>

when the window become wider, it works very well.
but when the window become narrow, the chart keep same size.

Expected Behavior

when the window become narrow, the chart can also change its own size to fit the parent container.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

No response

Anything else?

No response

[bb-auto[bot]]

@ice6 Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[ArgoZhang]

@ice6 please show the detail about OnInitAspectRatio(true)

[ice6]

@ice6 please show the detail about OnInitAspectRatio(true)

    private async Task<ChartDataSource> OnInitAspectRatio(bool stacked)
    {
        var products = await WarehouseService.GetAllProductsAsync();
        products = products.Where(p => !p.Hide).ToList();

        var topLabels = new string[] { "SKU数量", "库存数量" };
        var ds = new ChartDataSource();
        ds.Options.Title = "SKU/库存 统计";
        ds.Options.X.Title = "产品分类";
        ds.Options.Y.Title = "件数";
        ds.Options.X.Stacked = stacked;
        ds.Options.Y.Stacked = stacked;
        ds.Labels = products.Select(p => p.Name);

        for (var labelIndex = 0; labelIndex < topLabels.Length; labelIndex++)
        {
            int index = labelIndex;// prevent closure(闭包)
            var label = topLabels[index];
            ds.Data.Add(new ChartDataset()
            {
                Label = label,
                Data = products.Select(p => index == 0 ? p.SkuCount : p.TotalStock).Cast<object>()
            });
        }
        return ds;
    }

before narrow the window

after narrow the window

until I narrow it down as mobile, it becomes responsive :)

[ArgoZhang]

@ice6 hi. could you submit a mini-pro-project for this? I think there are other problems. I can find the cause based on your project.

https://www.blazor.zone/chart/line works fine.

[ice6]

@ArgoZhang Hi, I finally fix my problem. I changed the Width attribute from Width="100%" to Width="99%". And It works now. I think there is no need to submit a mini-pro-project now. Thanks.

<div class="row g-3 mt-2">
    <div class="col-12 d-flex justify-content-center">
        <Chart ChartType="ChartType.Bar" Responsive="true" OnInitAsync="() => OnInitAspectRatio(true)" Title="SKU/库存 统计" Height="500px" Width="99%" />
    </div>
</div>

Nothing else changed.

[ArgoZhang]

@ice6 Although the problem is solved, I don't think it is the best solution. :)

[ice6]

@ArgoZhang sure, it is not. I'm catching up. I am quite sure it is a bug, because the same problem occurs on the doc site.

https://www.blazor.zone/chart/bar

[ArgoZhang]

@ice6 The followingcharts are made in this way. The above charts are responsive, you can take a closer look

[ice6]

@ArgoZhang ok, thank you. I will take a source code level closer look :)

[ArgoZhang]

<Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitAspectRatio(true)" Title="Aspect Ratio Demo" Height="500px" Width="500px" />

lock the ratio by setting Height or Width. the ChartOptions parameter Responsive or MaintainAspectRatio default value is true