Bar Chart infinite "zoom"

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]

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?

[Joelius300]

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