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.