Data labels plugin

[PizzaConsole]

I think it would be very useful to integrate: https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html
Thoughts?

[larschristensen20]

This datalabels plugin can already be used with the project in its current state.

Heres how I do it in blazor-server:

Include the dataplugins cdn in your _Host.cshtml after the <script> tag for ChartJsBlazor.
<script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>

Make a setup completed callback function in the .razor page you use the chart in:

private async Task SetupCompletedCallback() =>   await jSRuntime.InvokeVoidAsync("generalInterop.datalabelsConfig", 
 config.CanvasId, CreateAsHorizontal);

This method is set in your chart tag
<Chart @ref="barGraph" Config="@_config" Width="600" Height="450" SetupCompletedCallback="@SetupCompletedCallback" />

And this is the method in the "generalInterop" (I also replace . with ,):

datalabelsConfig: function (canvasID, horizontal) {
        let chart = window.ChartJsInterop.BlazorCharts.get(canvasID);

        if (horizontal) {
            chart.options.plugins.datalabels.align = 'right';
            chart.options.plugins.datalabels.anchor = 'end';
            chart.options.plugins.datalabels.clamp = true;
            chart.options.plugins.datalabels.font.weight = 'bold';

        } else {
            chart.options.plugins.datalabels.align = 'top';
            chart.options.plugins.datalabels.anchor = 'end';
            chart.options.plugins.datalabels.clamp = true;
            chart.options.plugins.datalabels.font.weight = 'bold';

        }
        //Tooltip decimal separator
        chart.options.tooltips.callbacks.label = function (tooltipItem, data) {
            let dataset = data.datasets[tooltipItem.datasetIndex];

            // return formatted string here
            return "Forbrug i m\xB3: " + Number(dataset.data[tooltipItem.index]).toFixed(3).toLocaleString().replace(".", ",");
        }

        //Datalabel decimal separator
        chart.options.plugins.datalabels.formatter = function (value, context) {
            // return formatted string here

            if (value > 0) {
                return Number(value).toFixed(3).toLocaleString().replace(".", ",");
            } else {
                return "";
            }
        }

        chart.update();
    }

I also use this method for toggling the datalabels on and off after chart render:

hideDataLabels: function (canvasID, hide) {
        let chart = window.ChartJsInterop.BlazorCharts.get(canvasID);
        if (hide) {
            chart.options.plugins.datalabels.display = false;
        } else {
            chart.options.plugins.datalabels.display = true;
        }
    }

Heres the corresponding razor page method:

    private void CheckIfShowDataLabels()
    {
        try
        {
            if (!ShowDataLabels)
            {
                ShowDataLabels = true;
                jSRuntime.InvokeVoidAsync("generalInterop.hideDataLabels", _config.CanvasId, true);
            }
            else
            {
                ShowDataLabels = false;
                jSRuntime.InvokeVoidAsync("generalInterop.hideDataLabels", _config.CanvasId, false);
                StateHasChanged();
            }
        }
        catch (Exception ex)
        {

        }
    }

And the input to control the enabling / disabling.
<input type="checkbox" Class="custom-control-input" checked @onclick="CheckIfShowDataLabels" id="showDataLabels" />

[PizzaConsole]

Thank you very much for this example!!!

[MSchwaerzel]

Hi @larschristensen20 ,
is it possible to provide a full working example for using the datalabels plugin?

If I try it like you wrote, I get an error after calling "generalInterop.datalabelsConfig", that says that "chart" does not have an "chart.options.plugins.datalabels.align" property.
Do I need to register the plugin somewhere after adding the script tag?

[larschristensen20]

@MSchwaerzel Did you manage to figure it out?
According to this, the plugin should register itself globally. I also checked all the versions, and the align property should be there whether you run 0.7.x, 1.0.x or 2.0.x.

[MSchwaerzel]

Hi, thanks for replying.
Yes the issue could be solved.