Placing a boxAnnotation precise on a DateTimeCategoryAxis

[Thomas Vestergaard]

Hi guys.

I have a candlestick chart with primary DateTimeCategoryAxis and a secondary NumericalAxis Where i place several HorizontalLineAnnotations and RectangleAnnotations.

Line annotations are placed via CoordinateUnit.Axis on the Numerical Axis, so they are easy to control.

The RectangleAnnotations however I need to not only place on top of the lines (and I have this part working) but I also need to place them right on the inside edge of the chart itself on the DateTimeCategoryAxis

So my question is this; how do I find the exact point value of the left and right edges of the visible part of the DateTimeCategoryAxis on the chart, so that I can place recatangles as shown in the zipped image?

Thanks in advance.

Thomas

Attachment: BoxAnnotations_5964bfb6.rar

[Swetha Babu]

Hi Thomas,

Greetings from Syncfusion.

We can render the Annotation based on your requirement by setting the CoordinateUnits property as Pixel and set the X and Y property in Annotation as pixel values by calculating the points. However, we have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample1302670142

Code Snippet:

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

               <ContentTemplate>

                   <div>

                       <svg width="30" height="10">

                            <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

                       </svg>

                   </div>

               </ContentTemplate>

           </ChartAnnotation>

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha

[Thomas Vestergaard]

Thanks for your reply. But...

It seems i made a "fat finger error" by selecting Blazor as my platform - I'm working in WPF... :D

Sorry for the inconvenience, i will look at your example and if i can transfer that to WPF all is good.

Otherwise i will repost in the correct part of the forum :)

Kind regards

Thomas

[Devakumar Dhanapoosanam]

Hi Thomas,

We can achieve your requirement by setting the annotation CoordinateUnit property as Pixel and by using the chart SeriesBoundsChanged event to find the left and right side bounds of chart area as per the below code example.

<chart:SfChart x:Name="chart"

               SeriesBoundsChanged="chart_SeriesBoundsChanged">

    …

    <chart:SfChart.Annotations>

        <chart:RectangleAnnotation x:Name="rectA" CoordinateUnit="Pixel" />

        <chart:RectangleAnnotation x:Name="rectB" CoordinateUnit="Pixel" />

        <chart:HorizontalLineAnnotation Y1="160" ShowAxisLabel="True" Stroke="Green"/>

    </chart:SfChart.Annotations>

</chart:SfChart>

private void chart_SeriesBoundsChanged(object sender, ChartSeriesBoundsEventArgs e)

{

    rectA.X1 = e.NewBounds.Left;

    rectA.X2 = e.NewBounds.Left + 50;

 

    //get the Y axis value into screen point value

    var y = chart.ValueToPoint(chart.SecondaryAxis, 160);

    rectA.Y1 = y - 20;

    rectA.Y2 = y + 20;

 

    rectB.X1 = e.NewBounds.Right - 50;

    rectB.X2 = e.NewBounds.Right;

    rectB.Y1 = y - 20;

    rectB.Y2 = y + 20;

}

Please refer below link for more details

https://help.syncfusion.com/wpf/charts/annotations#positioning-the-annotation

https://www.syncfusion.com/kb/12283/how-to-fit-the-rectangle-text-annotation-in-wpf-charts

https://help.syncfusion.com/wpf/charts/how-to/transform-axis-value-to-pixel-value-and-vice-versa

Please find the sample from the attachment below and let us know if you need any further assistance.

Regards,

Devakumar D

Attachment: SF_175652_97f8e2fc.zip

[Thomas Vestergaard]

Absolutely perfect - Thank you!

A follow-up question:

The SeriesBoundsChanged event fires as my chart is initially populated it seems.

So, I can always grab the Left and Right parameters from the ChartSeriesBoundsEventArgs and store them internally. And then update whenever the event fires again.

But I was wondering if its possible to access those bounds values directly from the chart or series objects without having to rely on the event firing?

Kind regards

Thomas

[Devakumar Dhanapoosanam]

Hi Thomas,

We would like to let you know that we can get the chart area bounds value by using the chart SeriesClipRect property after rendering chart in UI as per the below code example.

var bounds = chart.SeriesClipRect;

Please let us know if you need any further assistance.

Regards,

Devakumar D

[Thomas Vestergaard]

Perfect! Thank you :)

[Devakumar Dhanapoosanam]

Hi Thomas,

Thanks for your update.

Please let us know if you need any further assistance.

Regards,

Devakumar D