Bar Chart infinite "zoom"

[manuel-rw]

Describe the bug

I wanted a bar chart to display the average visit time of customers. The chart has no data and a simple config without any special values. After the component is loaded, a zoom similar affect appears and the chart gets bigger and bigger, until my browser chrashes or hangs up.

Which Blazor project type is your bug related to?

• Server-Side

Which charts does this bug apply to?

• Bar Char (ChartJsBarChart)

To Reproduce

Steps to reproduce the behavior:

1. Using this version of ChartJSBlazor '1.1.0'.
2. Create a component and insert the tag for the bar chart
3. Create class variables
4. Modify the config in the OnInizalized method as i did

Expected behavior

A chart appears that doesn't change its size and fits into the right box (the left has already a chart)

Screenshots

https://ibb.co/71v940m (look after i click at the right side. This is the one i'm talking about)

Additional context / logging

I found out, that the page does act correctly when i comment out the bar chart component and its config. I copied the exact same config as in the examples in the repo, but i still had the same issue.

Code example

Here is my component with the failing chart:

@using ChartJs.Blazor.ChartJS.BarChart
@using ChartJs.Blazor.ChartJS.Common.Wrappers
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.BarChart.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.Util

<ChartJsBarChart @ref="_barChart"
                  Config="@(_barChartConfig)"
                  Width="200"
                  Height="125" />

@code {
    // here are some parameters to pass data

    private BarConfig _barChartConfig;
    private ChartJsBarChart _barChart;
    private BarDataset<Int32Wrapper> _barDataSet;

    protected override void OnInitialized() {
        /*
        here i process some data. There is no await tho.
        same issue happens if i comment this one out.
        */

        _barChartConfig = new BarConfig {
            Options = new BarOptions {
                Title = new OptionsTitle {
                    Display = true,
                    Text = "Simple Bar Chart"
                },
                /*
                Scales = new BarScales
                {
                    XAxes = new List<CartesianAxis>
                    {
                        new BarCategoryAxis
                        {
                            BarPercentage = 0.5,
                            BarThickness = BarThickness.Flex
                        }
                    },
                    YAxes = new List<CartesianAxis>
                    {
                        new BarLinearCartesianAxis
                        {
                            Ticks = new LinearCartesianTicks
                            {
                                BeginAtZero = true
                            }
                        }
                    }
                }*/
            }
        };

        @*

            _barChartConfig.Data.Labels = ages.Keys.ToList().Select(x => x.ToString()).ToList();

            _barDataSet = new BarDataset<Int32Wrapper>
            {
                Label = "My double dataset",
                BackgroundColor = new[] { ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString() },
                BorderWidth = 0,
                HoverBackgroundColor = ColorUtil.RandomColorString(),
                HoverBorderColor = ColorUtil.RandomColorString(),
                HoverBorderWidth = 1,
                BorderColor = "#ffffff"
            };

            // here i would like to add the data. I commented it out, nothing changes if so
            _barDataSet.AddRange(ages.Values.ToList().Wrap());
            _barChartConfig.Data.Datasets.Add(_barDataSet);
        *@
    }
}

This is the parent component where both are merged into one page:

<div class="dashboard-provider-analyze-grid">
    <MatCard>
        <MatCardContent>
            <MatHeadline6>TEST 1</MatHeadline6>
            <VisitorChart Provider="Provider"/>
        </MatCardContent>
    </MatCard>
    <MatCard>
        <MatCardContent>
            <MatHeadline6>TEST 2</MatHeadline6>
            <!-- Below is the failing component -->
            <VisitDurationChart Provider="Provider"/>
        </MatCardContent>
    </MatCard>
</div>

The only relevant css i use:

.dashboard-provider-infection-grid {
    display: grid;
    grid-template-columns: 70% auto;
    grid-gap: 12px;
}

I also use MatBlazor, but this shouldn't be any issue. https://www.matblazor.com Thanks for all help in advance

[Joelius300]

Thank you for the report.

This is likely an issue with responsiveness and perhaps the nesting of unnecessary divs on our part.
Could you try with the current master? There won't be many changes until 2.0 releases and I did some work regarding responsiveness but there are still issues (see 54f317f and #128).

[manuel-rw]

It seems like your guess is the case. I replaced the code in the parent component by a simple one just calling my chart:

<VisitDurationChart Provider="Provider" />

@code {
    [Parameter]
    public Provider Provider { get; set; }
}

The "Responsive" Property is still enabled but the behaviour is this time corect (no size change). This unwanted behaviour maybe occures due to overrides in the stylesheet (for example from the MatBlazor style)? Also setting the property to false resolves the problem and no weird change happens anymore.

[Joelius300]

Interesting. Did you manage to fix it in the actual scenario with that information?
It would be nice to have a standalone repro with the 2.0 version of the library. Could you maybe create one?
If you want you can wait until 2.0 is released so you don't have to manually download and reference the project.

Ps. rot13(Ivh resbht ve Tvoo, v jrvff jv tuüqref vfpu :))

[manuel-rw]

Yes this little trick works for me fine - except the size doesn't match anymore with the parent container (especially on weird monitors and of course phone displays). If anybody is experiencing the same issue, set responsive to false and create multiple css media queries where you set the size manually depending on the size of the screen, this will work until it's fixed. I don't have the time currently to do a repo with 2.0, but if this might fix the issue, i'll do it this weekend.

[Joelius300]

Hey, I just released version 2.0. Can you try to reproduce the issue with that version and post the full repro here?

[manuel-rw]

Thank you for publishing 2.0. I tried it out and still got the same issue. At least i can confirm, the code does look much better than with 1.0 :). I invited you to my respository, since it's a private project (you should be able to read everything, it's on german). Let me know if you have any questions. The project is not for production purposes and has many security issues, don't let you bother by them.

[Joelius300]

I do have access to your repository but it's still a complete project. Could you maybe reduce it to a minimal sample which reproduces the error?

[manuel-rw]

I created a second project in the solution. Please check it out (you have to pull again).

[Joelius300]

Hey @Manicraft1001

Sorry to get back to you this late and not even with good news.. I'm leaving this community. Thank you for your understanding.

I don't have a solution for your issue but it has to be something related to positioning and sizing of the parent container because this "zooming" is all done by Chart.js and our library shouldn't interfere with that. MatBlazor might though as it is using CSS and definitely impacts sizing and positioning.

Best of luck in figuring it out 😄

[manuel-rw]

Thank you @Joelius300 for your message. I'll mark the issue as closed since i figured out another way which works fine. It seems to be that the main issue was caused by Matblazor. Thank you for your help.