1. Home
  2. Forum
  3. Blazor
  4. How to get the pixel value of Chart height and width?

How to get the pixel value of Chart height and width?

I'm using the Chart component to make a scatter plot and allowing it to auto-size.


I need to find the pixel value of the Chart's height and width for use in an annotation.

However, the publicly available Height and Width parameters are not useful as they just show the percentage.
I found that the Chart has the values within it, but they are not publicly accessible.


Would it be possible to make the "Available Size" parameters as publicly available read-only?
It would save time from having to use JSinterop to get size of the parent div.


Thank you,
Sorin


6 Replies
DG Durga Gopalakrishnan Syncfusion Team July 26, 2021 12:38 PM UTC

Hi Sorin, 

We request you to use OnAxisRangeCalculated event to get the chart available size. We have prepared sample based on your requirement. Please check with below snippet and sample. 

public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 
    { 
        if(!Double.IsNaN(Args.Bounds.X) && !Double.IsNaN(Args.Bounds.Y) && !Double.IsNaN(Args.Bounds.Height) && !Double.IsNaN(Args.Bounds.Width)) 
        { 
            if(Args.AxisName == "PrimaryYAxis" && Count < 1) 
            { 
                Count++; 
                var Y = Args.Bounds.Y; 
                var Height = Args.Bounds.Height; 
                Console.WriteLine(Y); 
                Console.WriteLine(Height); 
            } 
            else if(Args.AxisName == "PrimaryXAxis" && Count < 3) 
            { 
                Count++; 
                var X = Args.Bounds.X; 
                var Width = Args.Bounds.Width; 
                Console.WriteLine(X); 
                Console.WriteLine(Width); 
            } 
        } 
    } 


Kindly revert us if you have any concerns. 

Regards, 
Durga G

SO Sorin August 7, 2021 03:12 PM UTC

Hello Durga,

Thank you for your reply.
I tried out the sample code, however I'm facing a problem.
First, the syncfusion package referenced is 19.2.0.56 which seems to not be released yet.


When I changed the version to the current latest version 19.2.0.51, I get the following error:



I assume maybe it will work once 19.2.0.56 is released.


SO Sorin August 7, 2021 03:23 PM UTC

In doing some more investigation I'm running in to some strange behavior.
I tried removing the code within RangeCalculated function to see if it's even trigger at all or not


When I run this I don't see anything in the Console.

But when I set a breakpoint at the Console.WriteLine statement, it catches with no problem, meaning that the even is triggered.

I'm starting to wonder if the event is triggering too early for the application to be loaded.


DG Durga Gopalakrishnan Syncfusion Team August 9, 2021 11:29 AM UTC

Hi Sorin, 

We have ensured your reported scenario with latest Syncfusion.Blazor nugget package version 19.2.51, unfortunately we are unable to replicate an issue from our end. An OnAxisRangeCalculated event is triggered properly as per behavior. We have attached the video and sample for your reference.  



If you are still facing problem, please try to replicate an issue above sample or share us issue reproduced sample so that it will be helpful for further analysis and provide you the solution sooner. 

Regards, 
Durga G

SO Sorin August 9, 2021 11:57 AM UTC

Hello Durga,

Thank you for the reply.

When I implemented OnAxisRangeCalculated ​event in my regular code today it seems to work OK, so the problem must have been only with the sample project originally sent.


By the way, there is a minor gap between the two solutions:

(a) Use JSinterop to get chart pixel size
(b) Use OnAxisRangeCalculated


The difference is that (a) provides the pixel size of the chart area plus the axes



while (b) provides the pixel size of the interior only



Actually both information from (a) and (b) is valuable. 

But when positioning an annotation by X and Y coordinates, the origin is the larger exterior div, so (b) alone is not enough.

Currently I noticed that the Y-Axis area is constantly 51.5 px and X-Axis area is 47.36 px
So to position correctly, I must take the size received from (b) and add the manually calculated axis area values and hope they stay fixed. 

If I had access to the values below, call it (c), then I could calculate the axis size by (c) - (b) and that would be safer



Can syncfusion consider making the "Available Size" object publicly available as GET only?


Thank you!


DG Durga Gopalakrishnan Syncfusion Team August 10, 2021 01:10 PM UTC

Hi Sorin, 

As of now, we request you to follow the below suggestion to get the available size height and width. We will check the possibility to include this property publicly and will include in any of our upcoming release. Please check with below snippet. 

public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 
    { 
            if (Args.AxisName == "PrimaryYAxis" && Count < 1) 
            { 
                 //…                 
                var Y = Args.Bounds.Y; 
                var Height = Args.Bounds.Height; 
                var AvailableHeight = Y + Height; 
                Console.WriteLine(AvailableHeight); 
            } 
            else if (Args.AxisName == "PrimaryXAxis" && Count < 3) 
            { 
                //… 
                var X = Args.Bounds.X; 
                var Width = Args.Bounds.Width; 
                var AvailableWidth = X + Width; 
                Console.WriteLine(AvailableWidth); 
            } 
         
    } 


Please revert us if you have any concerns. 

Regards, 
Durga G 


Loader.
Up arrow icon