7

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.

Stijn Westerhof
  • 474
  • 1
  • 6
  • 16
  • 3
    Yes 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 `` element to draw on, so your question is the same as asking how to use a custom font on the canvas element. – 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 Answers2

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>
Community
  • 1
  • 1
tektiv
  • 14,010
  • 5
  • 61
  • 70
  • 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