We can make creating charts on a web page easy with Chart.js. In this article, weâll look at how to create charts with Chart.js.
Fonts
We can change the font settings by setting the options.legend.labels.fontColor
 properties.
For example, we can write:
Chart.defaults.global.defaultFontColor = 'red';
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [2, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
labels: {
fontColor: 'green'
}
}
}
});
to change the color globally with the Chart.defaults.global.defaultFontColor
 property.
And we change the legend textâs color with the options.legend.labels.fontColor
property.
Rotation
We can set the minRotation
 and maxRotation
 properties to the same value to avoid charts from having to automatically determine a value to use.
Sampling
Also, we can set the ticks.sampleSize
 option to determine how large our labels are by looking at a subset of them to render the axes faster.
Disable Animations
We can disable animations with the animation
, responsiveAnimationDuration
, and hover
options.
For example, we can write;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [2, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
duration: 0
},
hover: {
animationDuration: 0
},
responsiveAnimationDuration: 0
}
});
to disable all the animations with the options
 property.
Disable Bezier Curves in Line Charts
We can disable bezier curves in a line charts since drawing a straight line is faster than with a bezier curve.
We can do that with:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
options: {
elements: {
line: {
tension: 0
}
}
},
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [2, 19, 3],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
The options.eleemnts.line.tension
 property disables drawing a bezier curve.
Disable Line Drawing
We can also disable lien drawing with the showLines
 property in the datasets
 or options
 properties.
For example, we can write:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
showLine: false,
label: '# of Votes',
data: [2, 19, 3],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
to disable it for a dataset.
Conclusion
We can change the fonts with Chart.js.
Also, we can disable various animations and drawing to increase rendering performance.
Share