Stock Chart inside full screen Dialog does not properly display.

[Chris]

I'm having several issues with the Stock Chart component.  I want to display it inside of a full screen Dialog.  When the dialog opens, I have to call the chart Refresh method to get it to fill the screen.  At this point, all of the buttons on the chart stop working.

Also, this might be related to the display issue, but I want to update the candle sticks with data received from a web service over web sockets.  But each time I update or add a candle, the buttons on the chart flash and any scrolling or zooming I have done is reset.

Additionally, if I zoom in, then scroll on the X axis, it seems to keep zooming until the candles are very big and spaced far apart.

Finally, the latest candle stick is only half visible and is shown behind the Y axis making it very difficult to see.  How can I prevent the Y axis labels from overlapping the candle sticks?

I have attached a sample project that illustrates the issues.

Attachment: SfStockChartTest_db2bba2.zip

[Durga Gopalakrishnan]

Hi Chris,

Greetings from Syncfusion.

Query 1 : I want to display it inside of a full screen Dialog.  When the dialog opens, I have to call the chart Refresh method to get it to fill the screen.  At this point, all of the buttons on the chart stop working.

By default, when the Stock Chart is rendered inside a Dialog, it uses a default height of 450px and width of 600px. To ensure the chart adjusts correctly to its container, you should refresh the chart once the dialog is fully opened. Alternatively, you can control the visibility of the stock chart so that it only renders after the dialog is completely loaded.

We have also tested the button clicks after the stock chart is opened within the dialog. For your reference, we’ve attached a GIF demonstrating the expected behavior.

Query 2 : Each time I update or add a candle, the buttons on the chart flash and any scrolling or zooming I have done is reset.

Query 3 : if I zoom in, then scroll on the X axis, it seems to keep zooming until the candles are very big and spaced far apart.

From our end, we were unable to reproduce the reported issue. To assist you further, we kindly request the following details:

• Steps to reproduce the issue or a video demonstrating the problem
• Browser used for testing
• System configuration (OS, screen resolution, etc.)
• Any additional customizations applied to the chart or dialog

This information will help us analyze the issue more effectively and provide a better solution.

Query 4 : the latest candle stick is only half visible and is shown behind the Y axis making it very difficult to see.  How can I prevent the Y axis labels from overlapping the candle sticks?

We recommend setting the Y-axis label position to Outside to ensure the last candlestick is fully visible. Please refer to the code snippet below for implementation.

<SfStockChart>

     <StockChartPrimaryYAxis LabelPosition="AxisPosition.Outside"></StockChartPrimaryYAxis>

</SfStockChart>

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

Attachment: StkBtnClicks_96a24b09.zip