Chart.js - Font only renders after you reload the canvas
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,
);
I thought about that Andrew but how do we check if the font is loaded? (and yes the font loading happens before the font is created)
– Saj
Aug 6 at 1:28
it seems to be working fine here jsfiddle.net/m21qx9kj/1 are there any differences between that and your setup?
– Andrew Lohr
Aug 6 at 2:32
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.
are you loading the font before you create the chart? If the font doesn't exist yet the chart won't use it.
– Andrew Lohr
Aug 6 at 1:05