Menu
I want to use a external font in my chart made with Chart JS. Does anyone know if that is possible? I've searched trough the documentation but I haven't found a solution.
685
Now, to import a font, simply add a stylesheet or <style> element to the DOM, which has a font-face rule: var link = document. createElement('link'); link. setAttribute('rel', 'stylesheet'); link.
Chart. js renders its charts using the Canvas element which results in good performance compared with SVG, espcially when rendering a large amount of data. The other advantage of Canvas rendering is that it's relatively easy to download the chart as an image file.
ChartJS. Next at number four is another one of my personal favorites. If you want a chart visualization library that always looks great, then this is the one. Somehow, the creator of ChartJS got the default colors absolutely perfect and they go so well within any website.
In the javascript function, here changeFontStyle(), the fontFamily property value is set to the font value of the option selected. By default, it is set to Times New Roman. Output: Before selecting any option (Initial value – Times New Roman):
It is indeed possible.
Considering you have imported your font (from GoogleFonts for instance),
you just have to edit the defaultFontFamily attribute in your chart options like this :
var options = {
// 'Raleway' is the name of the fond I imported from GoogleFonts
defaultFontFamily: Chart.defaults.global.defaultFontFamily = "'Raleway'"
}
See Lolka's answer for more information about the defaultFontFamily attribute.
A full working example:
Chart.defaults.global.defaultFontFamily = "Indie Flower";
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 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: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<canvas id="myChart" width="400" height="400"></canvas>First result for google Chart.JS custom font
From documentation:
There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global.
...
defaultFontFamily String "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" Default font family for all text
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
