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 sum y values depending on time unit
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to create a stacked graph using ChartJS
- set background color to save canvas chart
- Resize the width and height of the ng2-charts
- Graph getting messed up when user resizes page
- Click event of stacked line chart not working
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- How to fix chart looking blurry in ChartJS?
- Create a Graph and return it as an image on a nodejs server
- Why is my line chart using multiple lines to connect random points? (Chart.js)
- Vertical line across multiple charts
- Chartjs render only the last in loop (ionic)
- How to toggle between Custom tooltip and normal tooltip in chartjs and angular
- how to hide 0 value on Yaxis in Chart.js with negative values
- Chart.js - Unable to refresh the page
- TypeError: CanvasRenderService is not a constructor
- load a graph with chart.js and react
- Charts.js: thin donut chart background
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- ./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- Non numeric for x-axis in scatter chart in CHART.js
- How to draw a line in line chart for single value in Charts.JS
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How set color family to pie chart in chart.js
- chart.js v2 setting the y scale options seem to getting ignored
- chartjs table each making series not proceeding to next tr
- How to use dates as X axis with Chart.js even when there is no Y axis value related
- How can i refere to an object variable dynamically?