Changing background of JqxRadialGauge

Is it possible to set the background color property of the JqxRadialGauge?


Does this help?

colorScheme String ‘scheme01’
Sets the gauge’s color pallete. jqxGauge suppports 11 color schemes from ‘scheme01’ to ‘scheme11’.

Code examples

Set the colorScheme property.

$('#jqxGauge').jqxGauge({ colorScheme: 10 });

Get the colorScheme property.

var colorScheme = $('#jqxGauge').jqxGauge('colorScheme');

Try it: colorScheme is set to ‘scheme01’|

Share your story with the AppStudio Community! Quarantine Stories

Thank you very much.
Yes I have seen that but no scheme fits my needs. I need background (background being the white large area inside the Radial Gauge) to be either black or transparent. Is there a way to achive it?


It could be done using some tricky css and jQuery, but figuring that out is kind of out of scope for our support.

Here’s a radial gage for one of my programs that may help you…


'Cast Speed Gauge...

 $("#CastSpd").jqxGauge({ startAngle: 40, endAngle: 300 })

 $("#CastSpd").jqxGauge("max", 150)

 $("#CastSpd").jqxGauge({ labels: { position: "inside" }})

 $("#CastSpd").jqxGauge({ ticksDistance: "2px" })

 $("#CastSpd").jqxGauge({ labels:  { distance: "25px", interval: 25, position: "none", offset: [0, -10] }}) 

 $("#CastSpd").jqxGauge({ border: { showGradient: True, size: "10%", style: { fill: "#0A1CF5",stroke: "#F4F5FF"}, visible: True }})

 $("#CastSpd").jqxGauge({ style: { fill: "#E7E9FE", stroke: "#E7E9FE" }})

 $("#CastSpd").jqxGauge({ pointer: { pointerType: "default", style: { fill: "#ff0000", stroke: "#ff0000" }, length: "90%", width: "10%", visible: True }})

 $("#CastSpd").jqxGauge({ cap: { size: "10%", style: { fill: "#ff0000", stroke: "#00ff00" } , visible: True }})

 $("#CastSpd").jqxGauge({ ticksMinor: { size: "10%", interval: 12.5, style: { stroke: "#0A1CF5", "stroke-width": 1 }, visible: True }})  

 $("#CastSpd").jqxGauge({ ticksMajor: { size: "20%", interval: 25, style: { stroke: "#0A1CF5", "stroke-width": 2 }, visible: True }})  

 $("#CastSpd").jqxGauge({ caption: { value: "2.2", position: "bottom", offset: [0, 5], visible: True }})

 $("#CastSpd").jqxGauge("value", 2.2)

And the gage (ignore the misalignment…)



Thank you for sharing!
I think it will be helpful for others also.

The background color happens here:

$("#CastSpd").jqxGauge({ style: { fill: “#E7E9FE”, stroke: “#E7E9FE” }})

The “#E7E9FE” is the light blue color…

Here is the color specs… For Black…

Thank you very much sir.

Just a note, in the example code (when copied to the forum), the quotation marks were changed (to look prettier), but they will have to be changed back to regular ASCII characters if used in program.


Sir, is it possible to get rid of the outer white area?

Best Regards