Amit Shah Amit Shah - 2 months ago 68
CSS Question

Justgage.js Change Title,Value,Label font-size

enter image description here

I am trying the reduce the font-size using [titleFontSize: 12..] and various combinations. but not working.
same i used for [valueFontSize: ..] & [labelFontSize: ..]

How can i change the font-size of Title,Value & Labels?

Code:

<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js">

<script type="text/javascript">
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: 12,
titlePosition: "below",
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
label: "Mbps",
lableFontSize: "10px",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
</script>




var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: "5px",
titlePosition: "below",
valueFontFamily: "Georgia",
valueFontSize: "5px",
label: "Mbps",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});

#divDownloadOuter {
width: 50%;
clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
<div id="divDownloadOuter">
<div id="jgDownload"></div>
</div>





JSFiddle: Link

Answer

Solution using CSS:

/* Title */
#jgDownload text:nth-child(6) tspan{
  font-size: 0.8em !important;  
}

/* Value */
#jgDownload text:nth-child(7) tspan{
  font-size: 0.5em !important;  
}

/* Label */
#jgDownload text:nth-child(8) tspan,jgDownload text:nth-child(9) tspan,jgDownload text:nth-child(10) tspan{
  font-size: 0.9em !important;  
}

Check this link with Example: https://jsfiddle.net/amitshahc/gf0gm69j/5/