How to draw rectangle on Chart (in unit coordinates)

[Mr Andrey Voronov]

I have chart (ChartPrimaryXAxis and ChartPrimaryXAxis  ValueType="Syncfusion.Blazor.Charts.ValueType.Double"), and multiple LineSeries (not that important). Lets assume X axis range is 1.0 to 5.0, and Y axis range 10.0 to 50.0

I also  would like to draw rectangles on the chart, lets again assume rectangle's x1=2.0,y1=11.0,; x2 = 4.0;y2=12.0

Unfortunately ChartStripline does not allow to specify x1 and x2, and I can not figure out how to accomplish this task using series of different kind.

;

[Durga Gopalakrishnan]

Hi Andrey,

Greetings from Syncfusion.

We request you to use ChartAnnotations with coordinate unit as pixel type to achieve your requirement. Please check with the below snippet and documentation link.

<ChartAnnotations>

            <ChartAnnotation X="100" Y="200" CoordinateUnits="Units.Pixel" Region="Regions.Chart">

                <ContentTemplate><div id=”annotation1” style="border: 1px solid red; height: 100px; width:100px"><div></ContentTemplate>

            </ChartAnnotation>

</ChartAnnotations>

Online Demo : https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap5

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

Kindly revert us if you have any concerns.

Regards,

Durga G

[Mr Andrey Voronov]

ChartAnnotation is not any good as I need to draw rectangle not in pixels but in Points coordinates. 

LineSeries also has Width specified in pixels so it is not suitable either.

Rectangle should be drawn in points on the top of existing scatter series even if logarithmic Y scale applied.

 

 

[Durga Gopalakrishnan]

Hi Andrey,

We are preparing sample based on your requirement. We will update the sample within one business day(8^th December, 2021). We appreciate your patience until then.

Regards,

Durga G

[Durga Gopalakrishnan]

Hi Andrey, 

Thanks for being patience. We have prepared sample based on your requirement. Please check with the below snippet and screenshot. 

<ChartAnnotations> 

         <ChartAnnotation X="@data" Y="20%" Region="Regions.Series" CoordinateUnits="Units.Pixel"> 

              <ContentTemplate> 

                            <div style="background: firebrick; height:100px; width: 150px"></div> 

              </ContentTemplate> 

        </ChartAnnotation> 

</ChartAnnotations> 

 

                 
 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LogAnnotation-1208924961.zip 

 

Please revert us if you have any concerns. 

Regards, 

Durga G 

[Mr Andrey Voronov]

I need to draw rectangle not in pixels (150px x 100px), but in axis coordinates. On the sample provided please draw filled rectangle as specified below:

X axis (Year) : from 1997 to 2000

Y axis (Profit) : from $10 to $100 

[Durga Gopalakrishnan]

Hi Andrey, 

We request you to use segmented stripline to achieve your requirement. Please check with the below snippet and screenshot. 

<ChartStriplines> 

              <ChartStripline IsSegmented="true" SegmentStart="2" SegmentEnd="8" Start="17" Size="3" Color="#ff512f" Visible="true"> 

              </ChartStripline> 

</ChartStriplines> 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SegmentStrip405081547.zip 

Please revert us if you have any concerns. 

Regards,  

Durga G