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.
Asked
Active
Viewed 8,551 times
7
-
3Yes it is possible. See [this question](http://stackoverflow.com/questions/2608022/how-can-i-use-custom-fonts-in-an-html5-canvas-element). *Note* chart.js uses the ` – Spencer Wieczorek Jul 11 '16 at 10:14
-
I understand why you think that my question is a duplicate of the question that you've gave me. But if you take a look at the documentation of Chart JS, you will see that it works differently. – Stijn Westerhof Jul 11 '16 at 10:28
2 Answers
17
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>
-
Oh I see! Thanks, do you know if I can use it with 1.x versions? – Stijn Westerhof Jul 11 '16 at 11:30
-
I have an .ttf file, that I have to use. Is there a way to use that? – Stijn Westerhof Jul 11 '16 at 12:10
-
2@StijnWesterhof Sure, take a look at MDN's doc about [`@font-face`](https://developer.mozilla.org/en/docs/Web/CSS/@font-face). Then you'll just have to replace `"Indie Flower"` (in `Chart.defaults...`) by the name you gave to your imported font (`font-family` attribute of `@font-face`) – tektiv Jul 11 '16 at 12:29
-
@StijnWesterhof it works but have some delay to load the font. I've add css file and load it on index.html, then use that font on char.js file like below: `@font-face { font-family: "IRANSansMobile"; src: url("../fonts/IRANSansMobile.ttf"); } @font-face { font-family: "IRANSansMobile"; src: url("../fonts/IRANSansMobile_bold.ttf"); font-weight: bold; } ` here is chart.js file: `Chart.defaults.global.defaultFontFamily = 'IRANSansMobile, Tahoma, Arial, sans-serif';` – jsina Sep 09 '18 at 12:52
-
I tried this with Roboto and didin't work, I'm downloading from google fonts – Guilherme Flores Feb 25 '21 at 14:31
1
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

vaso123
- 12,347
- 4
- 34
- 64
-
1That's not answering the OPs question, none of them are custom external fonts. – Spencer Wieczorek Jul 11 '16 at 10:18
-
-
If you see the documentation, you can see, that this is the actual default settings, not options. So you can change this for your custom font family. – vaso123 Jul 11 '16 at 10:26