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
50
Aligning and formatting label custom way using igx-radial-gauge component in Angular
posted

I am using the component from ignite-ui for angular library <igx-radial-gauge>.

I am rendering a half radial gauge properly, but I want to align the label at certain angle (tilt) w.r.t. the horizontal axis and formatLabel to show all values divided by 10.

From documentation, I understood that alignLabel and formatLabel events are fired in radial gauge; so I used in the following manner:

<igx-radial-gauge (alignLabel)=”alignLabelCustom($event)”>

//some other properties

</igx-radial-gauge>

 

And I am able to reach alignLabelCustom() listener, but I am stuck now as to how do I set the changes in the radial gauge chart for modifying tilt angle and modifying the value of each label on the radial gauge. I even want to reflect the changes in the radial gauge being rendered on ui.

In the event object, I can just read current values of properties of each label, but not set them. Need to know the right way to do this in Angular2 and above.

Can somebody help me solve this query? Also, please suggest if there is some efficient or better way to do this.

  • 34830
    Offline posted

    Hello Akshay,

    I have been investigating into your requirement in this case, and I would recommend that you continue using the alignLabel and formatLabel events, but you can set them up in a different way to get more information. Allow me to first say that you will need to implement the following pieces in the typescript of your Angular component first for these to work:

    import { IgxRadialGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-radial-gauge-component';
    import { FormatRadialGaugeLabelEventArgs } from 'igniteui-angular-gauges/ES5/igx-format-radial-gauge-label-event-args';
    import { AlignRadialGaugeLabelEventArgs } from 'igniteui-angular-gauges/ES5/AlignRadialGaugeLabelEventArgs';

    From here, you can use the following handlers for alignLabel and formatLabel, respectively. The code provided will replace all labels with “Custom Label!” (formatLabel) and move all of the labels to the right by 20px (alignLabel).

    public alignLabelCustom(sender: IgxRadialGaugeComponent, args: AlignRadialGaugeLabelEventArgs){
        args.offsetX = 20;    
    }
    
    public formatLabelCustom(sender: IgxRadialGaugeComponent, args: FormatRadialGaugeLabelEventArgs)
    {
        args.label = "Custom Label!";
    }

    You can bind into these event handlers using the following HTML code for your igx-radial-gauge:

    <igx-radial-gauge height="500px" width="600px" (alignLabel)="alignLabelCustom($event.sender, $event.args)" (formatLabel)="formatLabelCustom($event.sender, $event.args)">
    </igx-radial-gauge>

    Regarding your actual requirements, if you cast the existing args.label property to a number, you can return the divided label for the gauge. In the alignLabel event handler, you can use the offsetX and offsetY to change the label offsets as well as the “angle” property on the AlignRadialGaugeLabelEventArgs object to set the angle of the label.

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