Known-issues

[Joelius300]

Static assets from the library can't be consumed in a server-side blazor application

Even though the static assets in the library are correctly placed, they can only be consumed by client-side projects currently. We hope that this changes in the future previews.
If you're using server-side blazor or there is some issue with the static-asset-consumption, you should manually download the files from here, put them in the wwwroot folder of your project and directly reference them (forget _content in that case).

MissingMethodException when using client-side blazor

Currently there seems to be a serialization issue for client-side projects. It's related to this bug from json.net.
Sadly there isn't really much we can do about this since we currently rely on json.net.
Thanks @SeppPenner for presenting a workaround that actually works. See this comment for how to do it and some more after that if you want details.
This bug will be entirely fixed either in an update of json.net, (blazor) or when the migration from Newtonsoft.Json to System.Text.Json is complete.

[EtienneLorthoy]

Hi ! Concerning the serialization issue for client-side projects, any chance you add [JsonObject(MemberSerialization.OptIn)] attribute to serializable classes as a workaround ?

[Joelius300]

Hey. I'm sorry but I believe that isn't really possible. That would require me to manually add this attribute to 20-50 classes. This is already quite a bunch of attributes but you have to keep in mind that I would also have to add the JsonPropertyAttribute on all properties that are supposed to be serialized and I believe there are more than 200 of these. Not only is that a fair bit of work that could be invested elsewhere, it would also pollute the project to the point where every single class and their properties have at least one attribute :(

If you're using it currently your best bet is waiting until the migration from Newtonsoft.Json to System.Text.Json is complete. I cannot do it completely yet because there are some pending additions and bugfixes for the new serializer. Once all the required ones pass or we have a workaround for everything, I can remove the json.net dependencies.
Maybe json.net publishes a bugfix for this before I'm done with the migration but seeing that the issue was opened in march and didn't really have any activity since, I doubt it :/

I'm really sorry about this bug but I believe there isn't really something I can do currently. If you find another workaround that doesn't require that much work and doesn't pollute the project as much, by all means, tell me :)

[SeppPenner]

Adding @using System.ComponentModel and private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsPieChart)); like this:

@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart
@using ChartJs.Blazor.ChartJS.Common.Properties
@using System.ComponentModel

<ChartJsPieChart @ref="pieChartJs" Config="@config" Width="300" Height="300" />

@code {
    private PieChartConfig config;
    private ChartJsPieChart pieChartJs;

    private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsPieChart));

    protected override void OnInit()
    {
        config = new PieChartConfig
        {
            CanvasId = "myFirstPieChart",
            Options = new PieChartOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Sample chart from Blazor"
                },
                Responsive = true,
                Animation = new DoughnutAnimation
                {
                    AnimateRotate = true,
                    AnimateScale = true
                }
            }
        };

        config.Data.Labels = new List<string> { "A", "B", "C", "D" };

        var pieSet = new PieChartDataset
        {
            BackgroundColor = new[] { "#ff6384", "#55ee84", "#4463ff", "#efefef" },
            Data = new List<int> { 4, 5, 6, 7 },                // this will be removed and shouldn't be possible
            Label = "Light Red",
            BorderWidth = 0,
            HoverBackgroundColor = new[] { "#f06384" },
            HoverBorderColor = new[] { "#f06384" },
            HoverBorderWidth = new[] { 1 },
            BorderColor = "#ffffff",
        };

        config.Data.Datasets = new List<PieChartDataset>();    // this will be removed and shouldn't be possible
        config.Data.Datasets.Add(pieSet);
    }
}

seems to resolve the problem (shows a valid object in the Browser debugging console), but does not draw the chart.

[EtienneLorthoy]

@Joelius300 , make sens I understand. I'll add the attribute to charts I wanted to draw on my side and wait for the fix.

@SeppPenner , same result here, no more error but no chart neither.

[Joelius300]

Interestingly, this workaround works perfectly fine for me. I will post the two pages I tested below.

I'm using a standard client-side blazor application created and used with preview7. I did not do anything special to this project so I would suggest you to upgrade your SDK to the newest preview and update all your dependencies in the current project. Hopefully this will help you fix this issue.

LineChart

@page "/chart"
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.Util.Color
@using ChartJs.Blazor.ChartJS.Common
@using ChartJs.Blazor.ChartJS.Common.Enums
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.LineChart
@using ChartJs.Blazor.ChartJS.LineChart.Axes
@using ChartJs.Blazor.ChartJS.LineChart.Axes.Ticks
@using System.ComponentModel

<h3>ChartExample</h3>

<ChartJsLineChart @ref="_chart" Config="@_config" Height="300" Width="600" />

@code {
private ChartJsLineChart _chart;
private LineChartConfig _config;

private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsLineChart));

protected override void OnInit()
{
    _config = new LineChartConfig
    {
        CanvasId = "my_example_line_chart",
        Options = new LineChartOptions
        {
            Title = new OptionsTitle
            {
                Text = "Example Line-chart"
            },
            Scales = new Scales
            {
                xAxes = new List<CartesianAxis>
                {
                    new LinearCartesianAxis
                    {
                        ScaleLabel = new ScaleLabel
                        {
                            LabelString = "linear X-axis"
                        }
                    }
                },
                yAxes = new List<CartesianAxis>
                {
                    new LinearCartesianAxis
                    {
                        ScaleLabel = new ScaleLabel
                        {
                            LabelString = "linear Y-axis"
                        }
                    }
                }
            }
        }
    };

    var dataset = new LineChartDataset<Point>
    {
        Fill = true,
        BackgroundColor = ColorUtil.ColorHexString(128, 250, 100),
        Label = "Nice point dataset"
    };

    dataset.AddRange(Enumerable.Range(1, 20).Select(i => new Point(i, i - i / 2)));
    _config.Data.Datasets.Add(dataset);
}

}

PieChart (code from comment above)

@page "/pieChartExample"
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart
@using ChartJs.Blazor.ChartJS.Common.Properties
@using System.ComponentModel

<ChartJsPieChart @ref="pieChartJs" Config="@config" Width="600" Height="300" />

@code {
private PieChartConfig config;
private ChartJsPieChart pieChartJs;

private ReferenceConverter ReferenceConverter = new ReferenceConverter(typeof(ChartJsPieChart));

protected override void OnInit()
{
    config = new PieChartConfig
    {
        CanvasId = "myFirstPieChart",
        Options = new PieChartOptions
        {
            Title = new OptionsTitle
            {
                Display = true,
                Text = "Sample chart from Blazor"
            },
            Responsive = true,
            Animation = new DoughnutAnimation
            {
                AnimateRotate = true,
                AnimateScale = true
            }
        }
    };

    config.Data.Labels = new List<string>{ "A", "B", "C", "D" };

    var pieSet = new PieChartDataset
    {
        BackgroundColor = new[] { "#ff6384", "#55ee84", "#4463ff", "#efefef" },
        Data = new List<int>{ 4, 5, 6, 7 },                // this will be removed and shouldn't be possible
        Label = "Light Red",
        BorderWidth = 0,
        HoverBackgroundColor = new[] { "#f06384" },
        HoverBorderColor = new[] { "#f06384" },
        HoverBorderWidth = new[] { 1 },
        BorderColor = "#ffffff",
    };

    config.Data.Datasets = new List<PieChartDataset>();    // this will be removed and shouldn't be possible
    config.Data.Datasets.Add(pieSet);
}
}

[SeppPenner]

Strange... I have all my dependencies up-to-date already...

[EtienneLorthoy]

It worked with Joelius' code and... with mine without changing anything. Looks like a cache issue or something.

But hey working charts yay !

[SeppPenner]

Mhm, I will try to check this again today. For me, it didn't work yesterday.

[SeppPenner]

@Joelius300 It worked for me as well. I had a stupid issue: I put the code you posted into a new Blazor component called DoughnutChart and initialized the ReferenceConverter like this:

private ReferenceConverter converter = new ReferenceConverter(typeof(DoughnutChart));

instead of:

private ReferenceConverter converter = new ReferenceConverter(typeof(ChartJsPieChart));

[SeppPenner]

I have put this information to the wiki: https://github.com/Joelius300/ChartJSBlazor/wiki/Known-issues.

For me, it makes more sense to document this kind of stuff there because it can be found more easily. (The issues are getting long after a while).

[Joelius300]

Good idea. I'll close this issue now as it isn't needed anymore.