gauge.js icon indicating copy to clipboard operation
gauge.js copied to clipboard

Multiple needles: different colors?

Open lorenzo11 opened this issue 6 years ago • 2 comments

Thank you for the trick of sending an array of value instead of a value to the .set() method. It is working perfectly!

image

Do you have any idea how we could differentiate the colors of these 2 needles? I would need to have the first needle of one color, and the second of another color.

Thanks for the help

Originally posted by @lorenzo11 in https://github.com/bernii/gauge.js/issues/127#issuecomment-428665580

lorenzo11 avatar Oct 10 '18 17:10 lorenzo11

Well, I'm not quite sure how little you can get away with. First check the GaugePointer class' render function. In there you see how the pointer is drawn and that the color is taken directly from the options object.

As far as I remember, each pointer more or less lives its own life. This means that you could consider to override each options.color property in the gauge.set method when the pointers' values and options are updated.

kplindegaard avatar Dec 12 '18 21:12 kplindegaard

Adding to Kplindegaard said. This does indeed work, but you are working with un-named pointers. So the trick is to set the color then initialize the pointer. The result will give you colored pointers (/needles). Keep in mind that you must initialize the gauge with the first color in the option set from when you pass options in or you won't be able to change that first color. image image

NicFragale avatar Apr 09 '19 23:04 NicFragale