HTML Elements Forums Gauge Gauge with big range amplitude

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #98888

    pcng618
    Participant

    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 –

    #98889

    Dimitar
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.