mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
684 stars 152 forks source link

Charts render only once #1

Closed FeeSaver closed 5 years ago

FeeSaver commented 5 years ago

Hello it seems like this package is broken after last blazor update. Atleast for server-side projects. In last version of Blazor changelog there is "fixed" Serialize server-side renders. https://github.com/aspnet/Blazor/releases

I dont know if its bug in blazor or in this package because I know very little about js but other things work for now. If its bug in blazor please tell them whats going on because I have no idea.

What happens: If I open a page with chart it appear and I can update it or change it without issue. But when I go to different page and then come back the chart never show. The chart have the default name "myFirstPieChart" and that seems to be issue because very simple workaround for this is just to change the CanvasId everytime then it show fine. I dont know how you render the chart but it seems like blazor thinks its already rendered or something like that.

protected override void OnInit()
{
    pieChartConfig = pieChartConfig ?? new PieChartConfig
    {
        CanvasId = "myFirstPieChart" + new Random().Next(),
        Options = new PieChartOptions
        {
            Text = "Sample chart from Blazor",
            Display = true,
            Responsive = true,
            Animation = new DoughnutAnimation { AnimateRotate = true, AnimateScale = true }
        },
        Data = new PieChartData
        {
            Labels = new List<string> { "A", "B", "C", "D" },
            Datasets = new List<PieChartDataset>
        {
            new PieChartDataset
            {
                BackgroundColor = new[] {"#ff6384", "#55ee84", "#4463ff", "#efefef"},
                Data = new List<int> {4, 5, 6, 7},
                Label = "Light Red",
                BorderWidth = 0,
                HoverBackgroundColor = new[] {"#f06384"},
                HoverBorderColor = new[] {"#f06384"},
                HoverBorderWidth = new[] {1}, BorderColor = "#ffffff",
            }
        }
        }
    };
}
mariusmuntean commented 5 years ago

This is a known issue (to me at least) which I should have documented. I don't have a good solution to this. My current remedy is to call the chart's Reload() method in the page's OnAfterRender() method.

Please see the Getting Started Guide in the WiKi.