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.