Web Gauge Item - How to change label font and text

Jonathan Barksdale

created 9 years ago

[DevExpress Support Team: CLONED FROM T374928: Web Gauge Item - How to change gauge background color]
This option worked well for me. Thank you.

Very close to marking your comment as a solution, but I'm now trying to understand how I can change the font weight and font color for the Gauge value label that shows the current gauge value at the bottom.

Also, I am finding that you have to take the same types of actions (font weights, etc.) by manipulating the client side objects in different ways (which is confusing since I'm just dealing with different types of widgets) and that the documentation doesn't seem to elaborate on certain things. For example, I cannot find any reference in the Dev Extreme documentation to what you have shown in your code example. I also cannot find any references that show how to manipulate the font weight on the object.

I certainly don't mind try to dig in more here but it just seems that the documentation does not include all references that are needed.

Thanks for the help.

Answers approved by DevExpress Support

DevExpress Support Team

created 9 years ago (modified 9 years ago)

The dxCircularGauge widget API is described in the following help topic: Data Visualization Widgets dxCircularGauge.
However, I should note that some widget settings are implemented specially for the web dashboard viewer and are not described in the documentation. To customize the label, use the following code:

JavaScript
if (e.ItemName.indexOf('gauge') >= 0) {  
    var gauges = e.GetWidget();  
    $.each(gauges, function (_, gauge) {  
        gauge.option('indicator.text.value', 'Test');  
        gauge.option('indicator.text.font', {  
            family: 'Zapf-Chancery, cursive',  
            weight: 400,  
            color: 'forestgreen',  
            size: 22  
        });  
    });  
}

I have attached a sample project to my reply demonstrating this solution. Note that there is no way to change the font color using this code. I have registered a separate report regarding this limitation: T403377: Web Gauge Item - It is impossible to change a label color. We will research the issue and check if any alternative solution is available.

DxSample.zip

Comments (2)

Ário 8 years ago

thanks…

1- and about font size for point labels around gauge?
2 - and value label in center?

DevExpress Support Team 8 years ago

Use the scale > label > font property to set labels' font:

JavaScript
gauge.option('scale.label.font', {  
    family: 'Zapf-Chancery, cursive',  
    weight: 400,  
    color: 'Red',  
    size: 22  
});

I am afraid it is impossible to change the position of the value indicator.

Web Gauge Item - How to change label font and text

Answers approved by DevExpress Support

Recently viewed tickets