I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work. The best I can do is change the font of the chart. Here is my code.
var options = {
//Boolean - If we show the scale above the chart data
scaleOverlay: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: null,
//Number - The value jump in the hard coded scale
scaleStepWidth: null,
//Number - The scale starting value
scaleStartValue: null,
//String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth: 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels: true,
//Interpolated JS string - can access value
scaleLabel: "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily: "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize: 12,
//String - Scale label font weight style
scaleFontStyle: "normal",
//String - Scale label font colour
scaleFontColor: "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Whether to animate the chart
animation: false,
//Number - Number of animation steps
animationSteps: 60,
//String - Animation easing effect
animationEasing: "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete: null
}
Chart Data labels and points are arrays.
var chartData = {
labels: labels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: points
}
]
}
var ctx = $("#" + item.logon).get(0).getContext("2d");
var chart = new Chart(ctx).Line(chartData, options);
This is done with JSON data and after the call I have:
$("canvas").each(function (i, item) {
var context = $(this).get(0).getContext("2d");
context.textBaseline = 'top';
context.fillText('Test', 0, 0);
});
The graphs just load normally without any text. If I use the context.font then all of the labels on each canvas is changed. I have turned off loading animation. Any ideas?
The example below would enable a title of 'Custom Chart Title' on the chart that is created. const chart = new Chart(ctx, { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'Custom Chart Title' } } } }); Copied!
Click the chart, and then click the Chart Design tab. Click Add Chart Element > Chart Title, and then click the title option that you want. Type the title in the Chart Title box. To format the title, select the text in the title box, and then on the Home tab, under Font, select the formatting that you want.
The chart legend displays data about the datasets that are appearing on the chart.
Instead of drawing on the canvas, I simply add a label around the element
<label for = "idOfCanvas">
Your Label<br />
<canvas></canvas>
</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With