Gauge with big range amplitude

[pcng618Participant]

Hi there,

I am wondering is it possible to present numbers with big difference between them.
My requirements are to have Gauge with 0-180 degree graphic horizontally and to visualized small numbers 1-20 and in the same time bigger numbers from 200-500.
Is it possible? And also to show when the value is in first range (calm zone) or in the second one (danger zone).

– AL –

[DimitarParticipant]

Hi AL,

Please try using smart-gauge configured as follows:

<smart-gauge analog-display-type="fill"
            digital-display
            digital-display-position="center"
            start-angle="0"
            end-angle="180"
            min="1"
            max="500"
            value="2"
            logarithmic-scale
            show-ranges
            ranges='[{ "startValue": "1", "endValue": "20", "className": "calm" }, { "startValue": "200", "endValue": "500", "className": "danger" }]'></smart-gauge>

You can style the “calm” and “danger” zones as follows:

<style type="text/css">
    .calm {
        fill: darkseagreen;
    }

    .danger {
        fill: crimson;
    }
</style>

Best Regards,
Dimitar

Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts