CODEWITHSUNDEEP
javascriptchart.js
user16304829
user16304829

Reputation:

How could chartjs font family display everywhere

In my chartjs, I have generated a bar chart that includes a font-family like

title: {
  text: "Hi",
  fontSize: 24, 
  fontFamily: 'Montserrat',
},

I do not whether this font will display everywhere whether who receives my file. Since I have downloaded Montserrat on my local computer and i am figuring how to include the source of the font.

Upvotes: 0

Views: 643

Answers (1)

Sebastian Richner
Sebastian Richner

Reputation: 760

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/[email protected]/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.

Upvotes: 0

Related Questions