Responsive width sizing seems to be broken

Describe the bug

When resizing the window to be larger, then shrinking the window again, the canvas element maintains its largest size.

Which Blazor project type is your bug related to?

• Server-Side

Which charts does this bug apply to?

all charts

To Reproduce

Steps to reproduce the behavior:

1. Using this version of ChartJSBlazor ‘1.1.0’.
2. Run this code with Responsive = true and MaintainAspectRatio = false
3. Resize window to a large size
4. Resize window to a small size

Expected behavior

The chart resizes properly to fit its container

Screenshots

Code example

Please provide full code examples below where possible to make it easier for the developers to check your issues.
Please also add the working JavaScript equivalent so we can see what you were trying to achieve.

        _config = new PieConfig
        {
            Options = new PieOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Sample chart from Blazor"
                },
                Animation = new ArcAnimation
                {
                    AnimateRotate = true,
                    AnimateScale = true
                },
                Responsive = true,
                MaintainAspectRatio = false
            }
        };

        _config.Data.Labels.AddRange(new[] { "A", "B", "C", "D" });

        var pieSet = new PieDataset
        {
            BackgroundColor = new[] { ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString() },
            BorderWidth = 0,
            HoverBackgroundColor = ColorUtil.RandomColorString(),
            HoverBorderColor = ColorUtil.RandomColorString(),
            HoverBorderWidth = 1,
            BorderColor = "#ffffff",
        };

        pieSet.Data.AddRange(new double[] { 4, 5, 6, 7 });
        _config.Data.Datasets.Add(pieSet);

[FlsZen]

I found myself in a similar situation where the chart wasn’t reacting to the narrowing of the window. Wrapping the chart in a div similar to what @swGLS mentioned, and similar to what Chart.js docs state, made it become responsive to the width narrowing. To get it to display nicely on my page, I wound up using a wrapper like this:

<div style="position: relative; height:350px; width:80%; margin-left: auto; margin-right: auto;">
    <Chart Config="@_chart" />
</div>

I’m not sure if there’s some general solution that ChartJs.Blazor can provide. Chart.js seems to leave responsiveness up to the developer so this library may also have to pass the responsibility along as well.

[Joelius300]

This issue is still open because we couldn’t find the cause nor a (non-hacky) solution. But the pointer to the relative container might just be it. The fact that you managed to fix it with that is enough for me to close this now. If other people experience the same issue, they should comment below 😃