Event when pointer change

[Luigi]

Hello,

There is a event that when pointer change (by 10 to 30 example) ?

I want modify the annotation with my custom test, example:

When pointer is 10 the annotation is "Happy", when pointer move to 30 the annotation is "Very Happy".

I try with ValueChange   but it's only for user interaction.

Thank

[Indumathi Ravi]

Hi Luigi, 

Thank you for contacting Syncfusion support. 

We can change the content of the annotation according to the pointer value using the “ValueChange” event in the Linear Gauge component. Using the property binding the value of the annotation can be changed in the “ValueChange” event. We can place an annotation below the pointer shape by specifying axis value in the “AxisValue” property and position values in the "X" and "Y" properties. Please find the code snippet below. 

Code Snippet: 

<SfLinearGauge Orientation="Orientation.Horizontal"> 

    <LinearGaugeEvents ValueChange="ValueChanged"></LinearGaugeEvents> 

    <LinearGaugeAnnotations> 

        <LinearGaugeAnnotation AxisValue="@AxisIndex" ZIndex="1" X="@AnnotationX" Y="@AnnotationY"> 

            <ContentTemplate> 

                <div class="custom-annotation">@AnnotationContent</div> 

            </ContentTemplate> 

        </LinearGaugeAnnotation> 

    </LinearGaugeAnnotations> 

    <LinearGaugeAxes> 

        <LinearGaugeAxis> 

            <LinearGaugePointers> 

                <LinearGaugePointer PointerValue="@PointerValue" EnableDrag="true"></LinearGaugePointer> 

            </LinearGaugePointers> 

        </LinearGaugeAxis> 

    </LinearGaugeAxes> 

</SfLinearGauge> 

@code{ 

   public double PointerValue = 10; 

    public int AxisIndex = 10; 

    public string AnnotationContent = "Happy"; 

    public double AnnotationX = -30; 

    public double AnnotationY = 25; 

    public void ValueChanged(ValueChangeEventArgs args) 

    { 

        PointerValue = Math.Round(args.Value); 

        AxisIndex = Convert.ToInt32(PointerValue); 

        if (PointerValue >= 30) 

        { 

            AnnotationX = -50; 

            AnnotationContent = "Very Happy"; 

        } else 

        { 

            AnnotationX = -30; 

            AnnotationContent = "Happy"; 

        } 

    } 

} 

We have created a sample and video to demonstrate the same and it can be downloaded from the below link. 

Sample - https://www.syncfusion.com/downloads/support/forum/173867/ze/BlazorSample570972631 

Video - https://www.syncfusion.com/downloads/support/forum/173867/ze/AnnotationVideo1595529555 

Please let us know if you need any further assistance. 

Regards, 

Indumathi R

[Luigi]

Thanks.

Working.

[Indumathi Ravi]

Hi Luigi, 

  

Thank you for the update. 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R.