Unable to set font for Chart.js charts



  • Hello, I've been struggling with this issue for hours and I hope somebody is able help me, I am able to set a custom font 'Rubik' from an asset reference and the report text renders correctly with the font. However, try as I may I'm unable to get my chart.js charts to use the same font. this is my report template:

    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <style>
            {#asset styles/styles.css @encoding=utf8}
            @font-face {
                font-family: 'Rubik';
                src: url({#asset /templates/shared/Rubik-VariableFont_wght.ttf @encoding=dataURI});
                format('truetype');
            }
            * {
                font-family: 'Rubik';
            }
        </style>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.1.5/css/metro.min.css">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
      </head>
    

    and I set the Chart global default font here before drawing the chart:

    <script>
            // [data definitions here]
            
            Chart.defaults.global.defaultFontFamily = "Rubik";
    
            const quarterChartCanvas = document.getElementById('quarterChart').getContext('2d');
    
            new Chart(quarterChartCanvas, {
                type: 'bar',
                data: {
                    labels: weeksLabels,
                    datasets: [{
                        data: weeksValues,
                        backgroundColor: 'rgba(0, 56, 101, 1)',
                        borderColor: 'rgba(0, 191, 111, 1)',
                        pointStyle: 'line',
                        label: weeksAvgLabel
                    }]
                },
                options: {
                    animation: false,
                    annotation: {
                        annotations: [{
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'y-axis-0',
                            value: weeksAvg,
                            borderColor: 'rgba(0, 191, 111, 1)',
                            borderDash: [10, 10],
                            borderWidth: 2
                        }],
                    },
                    scales: {
                        yAxes: [{
                            scaleLabel: 
                            {
                                display: true,
                                labelString: weeksUnit,
                                fontSize: 16
                            },
                            ticks: 
                            {
                                beginAtZero: true,
                            }
                        }],
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: JSON.parse(weeksAxisLabel),
                                fontSize: 16,
                            },
                            gridLines: {
                                offsetGridLines: false
                            }
                        }]
                    }
                }
            });
    </script>
    

    Any help will be greatly appriciated!


  • administrators

    hi! at first, this looks right, however maybe the Chartjs expects to have other fallbacks for the font, i'm not sure about it. or maybe the font needs to be set something like "'Rubik", i remember seeing this syntax somewhere

    also Chartjs seems to have a section in docs about missing fonts, probably a good idea to spend some time searching for similar issues in the library, maybe the font needs to contains also other variables for bold text, etc


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.