5👍
✅
You can to use fillText() Method using Chart.js Version: 2.7.3
Write “Network!” and “Stackoverflow” (with gradient) on the canvas, using fillText():
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Network", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Stackoverflow", 10, 90);
The fillText() method draws filled text on the canvas. The default color of the text is black.
Use the font property to specify font and font size, and use the fillStyle property to render the text in another color/gradient.
My Fiddle example
Update -> You can use Animations Callbacks (onProgress or onComplete) to do that eg:
options: {
animation: {
onProgress: function(animation) {
// code above
}
}
}
Update 2 -> Complete Code
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [2, 2, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
onProgress: function(animation) {
var c = document.getElementById("myChart");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("1 - Network", 45, 30);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("2 - Stackoverflow", 45, 70);
}
}
}
});
full Fiddle
I hope helps!
1👍
Use ChartJS subtitle option:
var ctx = document.getElementById('chart').getContext('2d');
var cfg = {
type: 'bar',
data: {
labels: [1,2,3,4,5],
datasets: [{label:'Frequency',data:[36,23,72,43,27]}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart Title',
padding: {
top: 10,
bottom: 5
},
font: {
size: 16
}
},
subtitle: {
display: true,
text: 'Chart Subtitle',
padding: {
top: 0,
bottom: 30
},
font: {
size: 10,
weight: 'bold'
}
}
}
}
};
var chart = new Chart(ctx, cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>
Source:stackexchange.com