Hello,
When i render a half gauge using various properties exposed by the radial gauge component - igx-radial-gauge, the control size remains as though a full gauge is rendered leaving lots of extra space around the gauge. I am not able to control the gauge control size via some properties on the component - Need help on the same - like specifying the container size (height.etc) of the half gauge rendered.
Did see a similar question on community regarding the same issue - but it wasn't related to Ignite UI for Angular and the solution suggested there did not seem to work for my case. (Link to the similar issue: https://ko.infragistics.com/community/forums/f/ultimate-ui-for-windows-forms/8151/half-gauge-control-size/42283#42283)
Can somebody help in the same? Please let me know is this a solvable issue or is a workaround available for the same.
Thanks Andrew. This seems to be working for my case currently. The demo code snippet helped. Just in case get any issues in future, will follow-up on the thread.
Hello Saudamini,
In order to control the size of the radial gauge, I would not recommend following the sample code given on the other forum thread that you have linked, as the recommended solution will not work because none of the properties outside of startAngle and endAngle exist on the Angular radial gauge in this case.
The igx-radial-gauge will measure itself as if it was a full circle based on the height and width of the bounds that you give it. You can modify the size of it by modifying the radiusMultiplier property as well as the centerX and centerY properties. This will allow you to essentially make the igx-radial-gauge larger within the container or bounds that it is placed in.
As an example, I am attaching a sample project that modifies the centerY and the radiusMultiplier for a “semi-circle” gauge. I hope this helps you.
Please let me know if you have any other questions or concerns on this matter.
5584.demo.zip