How can I change the font (family) for the labels in Chart.JS?

This should be useful: http://www.chartjs.org/docs/. It says "There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global".

You'll need to change defaultFontFamily for the font. And defaultFontColor, defaultFontSize, and defaultFontStyle for color, size, etc.

If you wanted to add the font-family to the chart object then you can add it in the options object.

options: {
  legend: {
    labels: { 
      fontFamily: 'YourFont'
    }
  }...}

Here is a link to the docs: https://www.chartjs.org/docs/latest/general/fonts.html

Change font size, color, family and weight using chart.js

scales: {
        yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
        xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
        }

See the full code

<!doctype html>
<html>

    <head>
        <title>Chart.js</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
        <script src="js/Chart.bundle.js"></script>
        <script src="js/utils.js"></script>
        <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                font-weight:700;  
            }
        </style>
    </head>
    <body>
        <div id="container" style="width:70%;">
            <canvas id="canvas"></canvas>
        </div>
        <script>
            var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var color = Chart.helpers.color;
            var barChartData = {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                datasets: [{
                        label: 'Completed',
                        // Green
                        backgroundColor: '#4caf50',
                        borderColor: '#4caf50',
                        borderWidth: 1,
                        data: [
                            5, 15, 25, 35, 45, 55
                        ]
                    }, {
                        label: 'Created',
                        // Blue
                        backgroundColor: '#1976d2',
                        borderColor: '#1976d2',
                        borderWidth: 1,
                        data: [
                            10, 20, 30, 40, 50, 60
                        ]
                    }]

            };

            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                            onClick: null
                        },

                        title: {
                            display: true,
                            text: '',
                            fontSize: 20
                        },
                        scales: {
                            yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
                            xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
                        }
                    }
                });
            };
        </script>
    </body>

</html>

You named the chart priceBarChart in the following part of your code:

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar
})

Which means that priceBarChart.defaults.global.defaultFont = 'Georgia' will 'dive' into the variable priceBarChart, go into its default properties, change one of its global properties and that one is defaultFont, exactly what you want.

But when you apply this code, you basically create the chart with the wrong font and then change it again, which is a bit ugly. What you need to do is tell the chart what the font is beforehand.

You do this by merging your font declaration with the rest of the options, just like how you did it with your variables barChartData and optionsBar.

After you've created barChartData and optionsBar, create another variable with the name, let's say, defaultOptions, like so:

var defaultOptions = {
    global: {
        defaultFont: 'Georgia'
    }
}

You can see that it has the same structure. You go into the global options, and change its defaultFont property. Now you need to apply it to the created chart at the moment it is created, like so:

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar,
  defaults: defaultOptions //This part has been added
})

This method of overwriting options is what is being used in almost every JavaScript plugin. When you create a new instance, the plugin copies an object that contains objects that contain objects and so forth. But these objects can be modified with additional options, like barChartData, optionsBar and defaultOptions.

I hope this helps!

How can I change the font (family) for the labels in Chart.JS?

Related

Recent Posts