We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Setting Range Visual Properties using CSS


Is it possible to set the visual properties in a Linear Gauge (such as a range background color and border) using CSS classes?

Thank you,

Randy Craven

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team March 6, 2017 05:27 AM UTC

Hi Randy, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Since the linear gauge is rendered as HTML5 canvas element, we can’t set the CSS styles for border and background color of the ranges. But instead of that, we have provided API’s to change those and it is depicted in the below code snippet. 


scales: [{ 
    ranges: [{ 
                  backgroundColor: "red", 
                  border: { color: "black", width:2 } 
                   backgroundColor: "cyan", 
                   border: { color: "green", width:2  } 

Sample for reference can be find from the below link. 

For more information on border, background color properties of ranges, follow the below link 


RC Randy Craven March 6, 2017 05:54 PM UTC

Hello Dharani,

Thanks for your reply.


DD Dharanidharan Dharmasivam Syncfusion Team March 7, 2017 06:00 AM UTC

Hi Randy, 
Thanks for your update. 
Kindly revert us, if you require any further assistance. 

Live Chat Icon For mobile
Up arrow icon