Chart extension - register plugin

[kachna96]

Hi all, I would like to ask about Charts - currently we have a simple doughnut chart and we are thinking about adding a text inside, similarly to this image

I found a SO answer saying that it could be done in Chart.js with registering some custom plugins https://stackoverflow.com/a/43940327/5825567
My question is if it is possible to do in Blazorise charts? I've looked into source code and haven't found any method which I would be able to use, but maybe I overlooked something ...
Thank you!

[stsrki]

I have quickly tested to see how it could work. You need to execute the JS script directly after you include chart.js in the index.html to register custom plugins.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
        Chart.pluginService.register({
            beforeDraw: function (chart) {
                var width = chart.chart.width,
                    height = chart.chart.height,
                    ctx = chart.chart.ctx;
                ctx.restore();
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em sans-serif";
                ctx.textBaseline = "middle";
                var text = chart.config.options.elements.center.text,
                    textX = Math.round((width - ctx.measureText(text).width) / 2),
                    textY = height / 2;
                ctx.fillText(text, textX, textY);
                ctx.save();
            }
        });
    </script>

And for the options, you can define them as anonymous object:

<Chart @ref="doughnutChart" Type="ChartType.Doughnut" TItem="double" OptionsObject="@chartOptions" />
@code {
    object chartOptions = new
    {
        Elements = new
        {
            Center = new
            {
                Text = "50%"
            }
        },
        CutoutPercentage = 75,
        Legend = new
        {
            Display = false
        }
    };
}

Result

[kachna96]

Works like a charm, thank you!