#98889
admin
Keymaster

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