'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 |
|---|
