ChartJs.Blazor

The interop layer allows Chart.js events (like onClick, onHover, or legend filters) to trigger code in Blazor. It supports two types of handlers via the IMethodHandler interface:

1. JavaScript Functions: If methodName is provided in a format like Namespace.FunctionName, the interop looks for window['Namespace']['FunctionName'].
2. DotNet Delegates: If the handler contains a handlerReference (DotNetObjectReference), the interop invokes the specified C# method.

Important Behaviors:

• Async vs Sync: C# delegates that do not return a value are invoked using invokeMethodAsync.
• Server-Side Blazor Limitation: C# delegates that do return a value (synchronous interop) are only supported on the Client-side (WebAssembly). On Server-side Blazor, these will fall back to the default Chart.js handler because the server-side dispatcher does not support synchronous interop calls.
• Argument Serialization: Arguments passed to C# delegates are stringified using a custom replacer that ignores circular references to prevent errors during the Blazor interop boundary crossing.

Client-side Blazor projects may encounter a bug in JSON.NET related to reflection. Use one of the following workarounds:

Option 1: Use a Linker.xml (Preferred)

Add a Linker.xml file to the root of your client-side project to prevent the Mono linker from stripping necessary constructors. Set the build action to BlazorLinkerDescriptor (or add it via .csproj).

Example .csproj entry:

<ItemGroup>
    <BlazorLinkerDescriptor Include="Linker.xml" />
</ItemGroup>

Example Linker.xml content:

<?xml version="1.0" encoding="UTF-8" ?>
<linker>
    <assembly fullname="mscorlib">
        <type fullname="System.Threading.WasmRuntime" />
    </assembly>
    <assembly fullname="System.Core">
        <type fullname="System.Linq.Expressions*" />
    </assembly>
    <assembly fullname="ChartJs.Blazor.Sample.ClientSide" />
    <assembly fullname="System">
        <type fullname="System.ComponentModel.ReferenceConverter">
            <method signature="System.Void .ctor(System.Type)" />
        </type>
    </assembly>
</linker>

Option 2: Manual ReferenceConverter invocation

Manually invoke the ReferenceConverter constructor in your code to ensure it isn't optimized away:

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

To create a chart, follow these steps:

1. Add the specific chart namespace (e.g., @using ChartJs.Blazor.PieChart) to your component.
2. Add the <Chart> component to your markup, passing a configuration object to the Config parameter.
3. Initialize the configuration object in the @code block, defining Options, Data.Labels, and Data.Datasets.

@using ChartJs.Blazor
@using ChartJs.Blazor.PieChart

<Chart Config="_config"></Chart>

@code {
    private PieConfig _config;

    protected override void OnInitialized()
    {
        _config = new PieConfig
        {
            Options = new PieOptions
            {
                Responsive = true,
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "ChartJs.Blazor Pie Chart"
                }
            }
        };

        foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" })
        {
            _config.Data.Labels.Add(color);
        }

        PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
        {
            BackgroundColor = new[]
            {
                ColorUtil.ColorHexString(255, 99, 132),
                ColorUtil.ColorHexString(255, 205, 86),
                ColorUtil.ColorHexString(75, 192, 192),
                ColorUtil.ColorHexString(54, 162, 235),
            }
        };

        _config.Data.Datasets.Add(dataset);
    }
}

The ChartJsInterop class provides the primary interface for managing Chart.js instances from Blazor. It handles both the initial creation of a chart and subsequent updates to existing charts.

• setupChart(config): Initializes a new chart using the provided ChartConfiguration. If a chart with the same canvasId already exists, it automatically redirects to updateChart instead.
• updateChart(config): Updates an existing chart. It performs a smart merge of datasets and labels to preserve array references, which helps maintain smooth Chart.js animations. It also extends existing options with new ones provided in the config (note: it does not delete existing options).

To ensure smooth updates, datasets should include an id property so the interop can match new datasets to existing ones.

// Conceptual usage of the interop methods
// setupChart(config: ChartConfiguration): boolean
// updateChart(config: ChartConfiguration): boolean