score: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!
score: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: stackoverflow.com
Related Query
- Can I specify a different font size for each row of text in Chart Title?
- chart.js Line chart with different background colors for each section
- Different color for each column in angular-chartjs bar chart
- chart js - Apply different color for each x-axes label
- Add a text as tooltip for each point on a line chart
- chartjs custom y axis values, different text for each one
- Chart is too big. How can I reduce size for the chart in vue js?
- How can I have different values for the chart and the tooltip in chart.js?
- Chart Js reduce text size for label on X axis
- How do I get a different label for each bar in a bar chart in ChartJS?
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- Chart.js Increase font size for higher resolution (i.e. monitor-agnostic chart configuration )
- how can i use inline plugin inner title for chart js?
- Different color for each bar in a bar chart; ChartJS
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js Line-Chart with different Labels for each Dataset
- chartjs datalabels change font and color of text displaying inside pie chart
- Chart js. How to change font styles for "labels" array?
- Chart.js - Line charts with different colors for each border lines
- ChartJS - Line Chart with different size datasets
- Chart js different background for y axis
- Chart js: how can I align the legend and the title
- Chart JS, Choose different Y-axis for different datasets
- Chart.js Radar chart legend label font size doesn't work
- ChartJS V3 Radar chart Label Font Size
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Specify varying thickness of each bar in Chart.js bar chart
More Query from same tag
- Chart.js misreading arrays for labels and axes
- Passing Json using JsonResult not working properly
- Chart.js in Angular Radar Chart
- Highlighting point in all datasets on hover over
- Use react-icons for pointStyles in Chart.js graph on Next.js app
- borderdash options in chart js changes my legend
- Adding image on the top of bar in chartjs
- My chart.js canvas disappears after hide() function
- Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)
- ChartJS canvas not displaying rgba colors in IE, Safari and Firefox
- Chart.js v3.60 - Add % symbol to the end of the tooltip label on a doughnut chart?
- Change bar color depending on value
- Chartjs, scatter with For-Loop
- Chart.js Using A JavaScript Object
- Chartjs: How to create padding between ticks and scale label
- ChartJS update data with a colour
- Getting nice chart.js animation when adding data with unshift()?
- Starting a Chart.js Time Scale at 0
- Chart.js: How to handle very large and very small values in radar chart?
- how can i show labels and value in both on bar chart
- ChartJS, Multiple line in bar chart label
- Format chart.js x-axis labels to specific timezone
- Chart.js unable to display data
- Angular Chart color does not change
- Chart.js hover over slice get NaN percentage
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12
- Chart.js not rendering properly until window resize or toggling line in legend
- Adding Vertical scroll bar in a bar-chart (chartjs)
- chart.js add second line in a Line chart that starts from end of first line