Setting Range Visual Properties using CSS

[Randy Craven]

Hello,

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]

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. 

[JS] 

$("#CoreLinearGauge").ejLinearGauge({ 

scales: [{ 

//... 

    ranges: [{ 

                  backgroundColor: "red", 

                  border: { color: "black", width:2 } 

                },{ 

                   backgroundColor: "cyan", 

                   border: { color: "green", width:2  } 

                }] 

            }] 

   }); 

Screenshot: 

 

Sample for reference can be find from the below link. 

http://jsplayground.syncfusion.com/puichc0s  

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

https://help.syncfusion.com/api/js/ejlineargauge#members:scales-ranges-border  

Thanks, 

Dharani. 

[Randy Craven]

Hello Dharani,

Thanks for your reply.

Randy

[Dharanidharan Dharmasivam]

Hi Randy, 

 

Thanks for your update. 

 

Kindly revert us, if you require any further assistance. 

 

Thanks, 

Dharani.