How can I link a custom function to a ChartJs via Blazor?

Question

I'm working on a facade for ChartJs for Blazor (see GitHub). What I like to do is add JavaScript function to extend ChartJs. I don't know how to link a function in the UI side with the JavaScript in the Blazor component.

For example, in the following code I customize the graph with a custom code in the onAnimationComplete.

<canvas id="myChart1" height="300" width="500"></canvas>  
<canvas id="myChart2" height="300" width="500"></canvas>  
  
var chartData = {  
    labels: ["January", "February", "March", "April", "May", "June"],  
    datasets: [  
        {  
            fillColor: "#79D1CF",  
            strokeColor: "#79D1CF",  
            data: [60, 80, 81, 56, 55, 40]  
        }  
    ]  
};  
  
var ctx = document.getElementById("myChart1").getContext("2d");  
var myLine = new Chart(ctx).Line(chartData, {  
    showTooltips: false,  
    onAnimationComplete: function () {  
  
        var ctx = this.chart.ctx;  
        ctx.font = this.scale.font;  
        ctx.fillStyle = this.scale.textColor  
        ctx.textAlign = "center";  
        ctx.textBaseline = "bottom";  
  
        this.datasets.forEach(function (dataset) {  
            dataset.points.forEach(function (points) {  
                ctx.fillText(points.value, points.x, points.y - 10);  
            });  
        })  
    }  
});  
  
var ctx = document.getElementById("myChart2").getContext("2d");  
var myBar = new Chart(ctx).Bar(chartData, {  
    showTooltips: false,  
    onAnimationComplete: function () {  
  
        var ctx = this.chart.ctx;  
        ctx.font = this.scale.font;  
        ctx.fillStyle = this.scale.textColor  
        ctx.textAlign = "center";  
        ctx.textBaseline = "bottom";  
  
        this.datasets.forEach(function (dataset) {  
            dataset.bars.forEach(function (bar) {  
                ctx.fillText(bar.value, bar.x, bar.y - 5);  
            });  
        })  
    }  
});  

So, imagine that the code for the function onAnimationComplete is available in a JavaScript in the project where I use the component. The some for ticks or any other property.

How can I tell my Blazor ChartJs component that I want to use that function?

Answer 1

Hi @Enrico Rossini ,

What I like to do is add JavaScript function to extend ChartJs. I don't know how to link a function in the UI side with the JavaScript in the Blazor component.
So, imagine that the code for the function onAnimationComplete is available in a JavaScript in the project where I use the component. The some for ticks or any other property.
How can I tell my Blazor ChartJs component that I want to use that function?

For the JS function, you need to add them inside the closing </body> tag of wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml (Blazor Server).

[Note] When create the Chat object, if using your code, it will show the Uncaught TypeError: (intermediate value).Line is not a function error. So I change the code to use the type and data attribute.

Then, in the Blazor component, you need to inject the IJSRuntime and call one of the following methods:

• IJSRuntime.InvokeAsync
• JSRuntimeExtensions.InvokeAsync
• JSRuntimeExtensions.InvokeVoidAsync

Code like this:

You can view the source code from here: 203008-code.txt

Then, the result like this:

More detail information see Call JavaScript functions from .NET methods in ASP.NET Core Blazor

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

The javascript should implement a method called createChart(options) method that blazer can call via interop:

function createChart(options) {  
    var ctx = document.getElementById(options.chartId).getContext("2d");
    var myLine = new Chart(ctx).Line(options.chartData, {
        showTooltips: false,
        onAnimationComplete: window[options.onAnimationComplete]
     });
}    

then call like:

await JS.InvokeVoidAsync("createChart", new 
{
    canvasId = "myChart1",
    onAnimationComplete =  "function1”,
    chartData =  new 
    {
        labels = new string[] {"January", "February", "March", "April", "May", "June"},
        datasets = new object[] 
        {
            new 
            {
                fillColor = "#79D1CF",
                strokeColor = "#79D1CF",
                data = new int[] {60, 80, 81, 56, 55, 40}
            }
        }
    }
});