Fuel Gauge question: How do I change the number of tickmarks?

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Dionis on 10th April 2016
Hello I'm using your Fuel Gauge for something I need. It's pretty cool but there is something I'm not handling on, even that I tried. What I wanna do is to show in my fuel gauge just 5 portions (0%, 25%, 50%, 75%, 100%). I used labelsCount attribute to achieve this:
labelsCount: 4

But the problem is that these labels (0%, 25%, 50%, 75%, 100%), do not correspond to the line breaks that are shown in the fuel gauge. The line breaks are 6 in total which correspond to :
labelsCount: 5 (the default one => 0%, 20%, 40%, 60%, 80%, 100%)
So, there is an offset between my labels and the line breaks. Is there any way to fix this? Here it is my configuration:

new RGraph.Fuel({
   id: 'fuel_gauge_id',
   min: 0,
   max: 100,
   value: 20,
   options: {
    scaleVisible: true,
    colors: ['Gradient(white:blue)'],
    needleColor: 'blue',
    unitsPost: '%',
    labelsCount: 4

Thank you in advance!
Posted by Richard on 10th April 2016

I think what you're referring to is the tickmarks. There's no option for it so you'll need to edit the source. On or around line 560 of the RGraph.Fuel.js file you'll find this bit of code:

((this.angles.end - this.angles.start) / 5)

Change the five to a six. I'm pretty sure that that will be the only change necessary - try it and see.

Posted by Dionis Beqiraj on 10th April 2016
Thank you man :)
Yes it worked (in fact I needed 4 in my case :))
Thank you for your awesome documentation and your quick response!

Add a reply

« Back to message list