Chartjs-How could chartjs font family display everywhere

by

0👍

✅

You will have to provide the font in one way or the other, if your users don’t have it installed locally. For example, you can embed Montserrat using the Google Fonts API and use it with Chart.js as shown in the following example.

Chart.defaults.font.family = 'Montserrat';
var ctx = document.getElementById('myChart').getContext('2d');
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: {
            y: {
                beginAtZero: true
            }
        }
    }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<link href='https://fonts.googleapis.com/css2?family=Montserrat' rel='stylesheet' type='text/css'>
  
<canvas id="myChart" width="400" height="400"></canvas>

It looks like there are two open issues with Missing Fonts and Loading Fonts, as documented in the Chart.js documentation, so you might also want to take a look at those.

Leave a comment