1. Home
  2. Forum
  3. Blazor
  4. Fail to update stock chart data in runtime

Fail to update stock chart data in runtime

Hi, I try to update the SfStockChart data series in runtime (i.e. switch to another stock), but the prices won't update. The chart title is updated, but not the price data. Below is an example Index.razor modified from the Stock chart example (https://blazor.syncfusion.com/documentation/stock-chart/getting-started), where the price data (year is changed) and title are changed when pressing a button:


@page "/"

@using Syncfusion.Blazor.Charts
<SfButton @onclick="onUpdateClick">Update</SfButton>
<SfStockChart @ref="chart" Title="@title">
    <StockChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></StockChartCrosshairSettings>
    <StockChartTooltipSettings Enable="true" Shared="true"></StockChartTooltipSettings>
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    SfStockChart chart;
    string title = "AAPL Historical";

    private void onUpdateClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        StockDetails = new List<StockChartData>
        {
            new StockChartData { Date = new DateTime(2013, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
            new StockChartData { Date = new DateTime(2013, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
            new StockChartData { Date = new DateTime(2013, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
            new StockChartData { Date = new DateTime(2013, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
            new StockChartData { Date = new DateTime(2013, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
            new StockChartData { Date = new DateTime(2013, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
            new StockChartData { Date = new DateTime(2013, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
            new StockChartData { Date = new DateTime(2013, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
            new StockChartData { Date = new DateTime(2013, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
        };      
        title = "Updated";
        chart.UpdateStockChart();
    }

    public class StockChartData
    {
        public DateTime Date { get; set; }
        public Double Open { get; set; }
        public Double Low { get; set; }
        public Double Close { get; set; }
        public Double High { get; set; }
        public Double Volume { get; set; }
    }
    public List<StockChartData> StockDetails = new List<StockChartData>
{
        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
    };
}




2 Replies
DG Durga Gopalakrishnan Syncfusion Team November 8, 2021 12:30 PM UTC

Hi Stefan, 

Greetings from Syncfusion. 

We have validated the reported scenario with attached snippet. We have considered this as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 23rd November 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards,  
Durga G

DG Durga Gopalakrishnan Syncfusion Team November 23, 2021 03:33 PM UTC

Hi Stefan, 

We are glad to announce that our v19.3.55 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  



We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G

Loader.
Up arrow icon