I am trying the reduce the font-size using [titleFontSize: 12..] and various binations. 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=".1.4/raphael-min.js"></script>
<script src=".2.2/justgage.js"></script>
<div id="divDownloadOuter">
  <div id="jgDownload"></div>
</div>

I am trying the reduce the font-size using [titleFontSize: 12..] and various binations. 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./ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/justgage/1.2.2/justgage.js"></script>
<div id="divDownloadOuter">
  <div id="jgDownload"></div>
</div>

JSFiddle: Link

• javascript
• css
• raphael
• font-size
• justgage

Share Follow edited Jun 7, 2016 at 9:10 Amit Shah asked Jun 7, 2016 at 8:12 Amit ShahAmit Shah 8,19955 gold badges4444 silver badges6060 bronze badges 2

• Try this, may be work titleTextStyle: {fontSize: 12} – Priyank Dey Commented Jun 7, 2016 at 8:22
• @PriyankDey thanks for try but NOT WORKING. i have attached code snippet and jsfiddle link for your experiments. – Amit Shah Commented Jun 7, 2016 at 9:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try with titleMinFontSize. It will work.

titleMinFontSize: 20,

Check this link for other attributes.

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/amitshahc/gf0gm69j/5/

To get it working with justGage v1.2.2 I used the following:

/* Value */
#jgDownload > svg:nth-child(1) > text:nth-child(6) {
    font-size: 0.8em !important;
}

(the 'text:nth-child' value dictates which element to change, i.e. text:nth-child(8) and text:nth-child(9) represents the labels)

Be gentle on me as this is my first post!