I am using the IgrLinearGauge component to represent a colored axis, getting my inspiration from this template :https://www.infragistics.com/products/ignite-ui-react/react/components/linear-gauge
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!
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.
At the end of the day I found out using IgrScatterAreaSeries was a better way to set up a color scale (https://www.infragistics.com/products/ignite-ui-react/react/components/charts/types/scatter-chart#react-scatter-area-chart)
I generated a graph with only one interval on the Y axis, hid the label on the Y axis, and put a logarithmic scale on the X axis