Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Setting a logarithmic scale for gauges (IgrLinearGauge component)


I am using the IgrLinearGauge component to represent a colored axis, getting my inspiration from this template :

However I would like the scale to be logarithmic like the one below, and not linear :

Is there any trick to do that with IgrLinearGauge?

This component has "interval" and "labelInterval" props to manage the space between ticks and labels, yet each of these props is a single number, which means the space between each tick is meant to be the same. Therefore I cannot set logarithmic ticks.

Thanks for any suggestion!

  • 34390
    Offline posted

    Hello Spidy,

    The IgrLinearGauge does not currently expose the ability to be logarithmic – it can only be a linear scale at the time of writing this.

    Perhaps as a “trick” that you could potentially do in this case would be to assign a linear scale and use the formatLabel property of the gauge to insert logarithmic labels onto the scale. For example, you could have a minimum value of 0 and maximum value of 4 representing 10^0 up to 10^4. You would still need to calculate/convert the actual value of the gauge though, assuming you would either be setting the value programmatically or by allowing your user to drag a needle on the gauge.

    If you would like to see a logarithmic option for the IgrLinearGauge, I would recommend suggesting this as a new product idea on our Ignite UI for React GitHub page, here. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.

    Please let me know if you have any other questions or concerns on this matter.

Reply Children
No Data