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.
Unfortunately, activation email could not send to your email. Please try again.

Setting Range Visual Properties using CSS

Thread ID:





129219 Mar 5,2017 04:56 PM Mar 7,2017 01:00 AM JavaScript 3
Tags: ejLinearGauge
Randy Craven
Asked On March 5, 2017 04:56 PM


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

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 6, 2017 12:27 AM

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 


Randy Craven
Replied On March 6, 2017 12:54 PM

Hello Dharani,

Thanks for your reply.


Dharanidharan Dharmasivam [Syncfusion]
Replied On March 7, 2017 01:00 AM

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.