Chart annotation with mouse dragging

[JY]

Hello,

I'm using a Line chart and I'm using annotation and striplines to represent x and y values on the chart. I'm also using annotations and striplines to represent additional information about the data points.

With the some help from the forum,  I was able to move the annotation and striplines using the x and y values and keyboard arrow keys and anchors to the data.

I was wondering if it would be possible to drag them with the mouse?

I would like to be able to click & drag so that it moves along the data as if it were a Trackball and anchors to the data, is there any way to do this?

Thanks

[Durga Gopalakrishnan]

Hi Jylee,

Thanks for using Syncfusion products.

We have analyzed your required scenario. As of now, we don’t have support to drag and drop the chart striplines, but your requirement can be achieved using annotation. Please check with the below sample and screenshot.

<SfChart>

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

<ChartAnnotations>

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

       <ContentTemplate>

           <div @onmousedown="@MouseDown">

               <div style=" font-weight:bold; border:2px solid red;">@text</div>

          </div>

      </ContentTemplate>

    </ChartAnnotation>

</ChartAnnotations>

</SfChart>

@code {

public string text { get; set; } = "X : Mon Y: 27";

public void MouseDown()

{

    isClicked = true;

}

public void MouseMove(ChartMouseEventArgs args)

{

   if (isClicked)

   {

    xVal = args.MouseX + "px";

    yVal = args.MouseY + "px";

    var data = args.AxisData;

    if (data.Count > 0)

    {

        if (data.TryGetValue("PrimaryXAxis", out object xValue) && data.TryGetValue("PrimaryYAxis", out object yValue))

        {

            text = "X : " + Convert.ToString(xValue, null) + " Y : " + Math.Round(Convert.ToDouble(yValue, null));

        }

    }

    StateHasChanged();

   }

}

public void MouseUp(ChartMouseEventArgs args)

{

    isClicked = false;

}

}

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

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.