Clash Royale CLAN TAG#URR8PPP

Chart.js - Font only renders after you reload the canvas

I am using Chart.js and I am trying to use a Google Font. The first time I load the page, the chart uses the default font but if I recreate the chart, then the correct font is loaded.

How do I get the font to load the first time the chart is loaded?

My HTML:

<div style="width: 100%;" id="StatsDiv">
<div id="container" style="position: relative; height:300px; width:600px; background-color:#F9F9F9; padding-top:10px;">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</div>


The loading of the font:

<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />


The Javascript that does the work:

Chart.defaults.global.defaultFontFamily = 'Asap Condensed';

var myChart = new Chart(document.getElementById("myChart"),
type: 'bar',
data:
labels: [FundsLabel,RequestedLabel],
datasets: [

label: "Cleared Balance: " + parseFloat(AVBalance).toFixed(2) + " AUD",
backgroundColor: "rgba(98,203,49,0.40)",
borderColor: "rgba(98,203,49,0.75)",
borderWidth: 2,
hoverBackgroundColor: "rgba(98,203,49,0.50)",
hoverBorderColor: "rgba(98,203,49,1.00)",
data: [AVBalance, GreenRequested],
,

label: "Pending Balance: " + parseFloat(PDBalance).toFixed(2) + " AUD",
backgroundColor: "rgba(231,76,60,0.40)",
borderColor: "rgba(231,76,60,0.75)",
borderWidth: 2,
hoverBackgroundColor: "rgba(231,76,60,0.50)",
hoverBorderColor: "rgba(231,76,60,1.00)",
data: [PDBalance, RedRequested],

]
,
options:
scales:
yAxes: [
stacked: true,
gridLines:
display: true,
zeroLineColor: '#999999',
zeroLineWidth: '1',
// color: "rgba(255,99,132,0.2)",
color: "rgba(239, 239, 239)",
,
ticks:
// min: 0, // it is for ignoring negative step.
beginAtZero: true,
fontSize: "12",

// if i use this it always set it '1', which look very awkward if it have high value e.g. '100'.

],
xAxes: [
stacked: true,
gridLines:
display: false,

,

barThickness: 120,
scaleLabel:
display: true,
//labelString: 'Banks'


]
,
maintainAspectRatio: false,


);


1 Answer
1

The chart won't load your font on the first time because it couldn't find your font (yet). But it works the second time because your font is already cached by browser.

If you want to make sure the font is working, you can do preload the font by using a hidden DOM.

.fontPreloader
font-family: 'Asap Condensed';
position: fixed;
top: -9999px;
left: -9999px;


<div class="fontPreloader">-</div>
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.