Meter

The Meter component must only be used for a visual rendering of a graduated and limited value, not for a progression. For a progression value, see Progress component.

• min is the minimum value of your data, lower than max
• max is the maximum value of your data, higher than min
• low is a value of your data that can be understood as low, within the range of min and max
• high is a value of your data that can be understood as high, within the range of min and max
• optimum is the optimal value of your data, within the range of min and max. This will influent the behaviour of low and high: it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.

Further explanations:

• If the optimum value is lower than low value, it indicates that the lower values are optimum, so lower values will be green, between low and high will be yellow, and red higher than high
• If the optimum value is higher than high value, it indicates that the higher values are optimum, so lower values will be red, between low and high will be yellow, and green higher than high
• If the optimum value is between low and high values, it indicates that extremes values aren't the best, so they will be yellow, and values between low and high will be green

For simplicity, we have set default parameters of the <Meter> react component as if you would use a percentage, so they are min="0" max="100" low="50" high="80" optimum="0". With those default values, since optimum value is lower than low value, you will have:

• Green between 0 and 49
• Yellow between 50 and 79
• Red from 80, including higher than 100

Variants

The meter comes in two different sizes: default and thin.