Chartjs-Refencing a plugin in ChartJs.Blazor

by

1👍

The answer is put the JavaScript code in a JavaScript file in the wwwroot/css directory. This would be the contents for that file:

export function MakePluginService() {
    Chart.pluginService.register({
        beforeUpdate: function (chartInstance) {
            chartInstance.data.datasets.forEach(function (dataset) {
                if (dataset.label === "CPAP Usage") {
                    dataset.backgroundColor = dataset.data.map(function (data) 
                   {
                        return data < 4 ? '#7d1646' : '#40a37f';
                    })

                }
            })
        }
    });
}

Put it in a file such as PlugInService.js. Add the following lines before the @code section:

 @inject IJSRuntime JSRuntime
 @implements IAsyncDisposable

Then, in the @code section, add the following lines:

private IJSObjectReference? module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", 
            "./PlugInService.js");
        if (module is not null)
        {
            await module.InvokeVoidAsync("MakePluginService");
        }

    }
}

async ValueTask IAsyncDisposable.DisposeAsync()
{
    if (module is not null)
    {
        await module.DisposeAsync();
    }
}

The JavaScript file will be executed after the HTML content is rendered. In the MakePluginService, a ChartJs service will be registered with the Blazor.ChartJs library.

Leave a comment