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

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.

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);
            });
        })
    }
});
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<canvas id="myChart1" height="300" width="500"></canvas>

So, imagine that the code for the function onAnimationComplete is available in a JavaScript in the project where I use the component.

Another example is ticks: in this case there is a callback for ticks that I like to link to a JavaScript code (this code is working on JSFiddle)

var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
    datasets: [{
      label: '# of Votes',
      xAxisID: 'xAxis1',
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  options: {
    scales: {
      xAxes: [{
          id: 'xAxis1',
          type: "category",
          ticks: {
            callback: function(label) {
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              return month;
            }
          }
        },
        {
          id: 'xAxis2',
          type: "category",
          gridLines: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
          ticks: {
            callback: function(label) {
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              if (month === "February") {
                return year;
              } else {
                return "";
              }
            }
          }
        }
      ],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script>

<canvas id="c" width="400" height="300"></canvas>

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source