Ability for user to draw a line

[Praveen D]

Hello,

I have seen examples of user interacting with annotation. Is is possible for user to add line, drag , move the line in Blazor Stockkcarts ?

Chart annotation with mouse dragging | Blazor Forums | Syncfusion

thanks

[Durga Gopalakrishnan]

Hi Praveen,

We have reviewed your requested scenario. You can annotations to stock chart. Currently, the stock chart does not support moving annotations dynamically, as it does not include mouse events. As a result, we are unable to implement the functionality to move annotations in real time. Please feel free to reach out if you have any further questions or concerns.

Regards,

Durga Gopalakrishnan.

[Praveen D]

Can we use Blazor charts with Annotations. Does that have  support moving annotations dynamically with mouse events

[Durga Gopalakrishnan]

Praveen,

Yes, you can use the Chart, and it allows you to move annotations dynamically through mouse events. We've prepared a sample based on your requirements. Please refer to the snippet and screenshot below.

<SfChart>

    <ChartEvents ChartMouseMove="MouseMove" ChartMouseUp="MouseUp"></ChartEvents>

    <ChartAnnotations>

        <ChartAnnotation X="@xVal" Y="@yVal" CoordinateUnits="Units.Pixel">

            <ContentTemplate>

                <div @onmousedown="@MouseDown">

                    <div style="width:1190px;border:1px solid red;cursor: move"></div>

                </div>

            </ContentTemplate>

        </ChartAnnotation>

    </ChartAnnotations>

</SfChart>

@code {

    public bool isClicked { get; set; } = false;

    public void MouseDown()

    {

        isClicked = true;

    }

    public void MouseMove(ChartMouseEventArgs args)

    {

        if (isClicked)

        {

            xVal = args.MouseX + "px";

            yVal = args.MouseY + "px";

            StateHasChanged();

        }

    }

    public void MouseUp(ChartMouseEventArgs args)

    {

        isClicked = false;

    }

    public string xVal = "53%";

    public string yVal = "60%";

}

Sample : https://blazorplayground.syncfusion.com/hDVTMsWKgjIAcLKI

UG : https://blazor.syncfusion.com/documentation/chart/chart-annotations

Kindly revert us if you have any concerns.