Stock Market Charts In Blazor

Listing 3: edit _Layout.cshtml

Now that we have set the configuration, we can finally start using Telerik controls.

At last add the razor file, Right click on your project and add razor component name it "StockCharts.razor"

Toggle Button

We need toggle-button to switch from Candlestick to OHLC chart. This control is managed by a boolean variable to toggle on and off. We have added a boolean property named "IsCandlestickSelected" at line number 7, when it is true we will show the candlestick chart otherwise OHLC chart.

Open the "StockCharts.razor" file and add the following toggle button, We are using "TelerikSwitch" as shown in listing 4.

<TelerikSwitch  @bind-Value="@IsCandlestickSelected" 
                           Width="120px"
                           OnLabel="Candle Stick"
                           OffLabel="OHLC Chart"> 
</TelerikSwitch>
@code {
    private bool IsCandlestickSelected { get; set; } = true;
}

Listing 3: Added TelerikSwitch to StockCharts.razor

Next, we are going to add TelerikChart. What do we need to take care of?

• Type: The Type property, on the selection of toggle-button, we will change that chart-type from Candlestick to OHLC and vice-versa. (Listing 4- line number 23)
• Data: The Data property, The list of model class from listing 2, This list is deserialized version of json data from listing 1. (Listing 4- line number 24)
• Axis: X axis is going to represent a date and Y axis is going to represent stock prices. Note: Xaxis is referred as "ChartCategoryAxis" (Listing 4- line number 33) & Y-Axis is referred as "ChartValueAxis" (Listing 4- line number 38).
• Colors: I am using "yellow green" color for positive candle, and "salmon" color for negative candle. There are 2 attributes being used to define colors. (Listing 4- line number 29)

That's all there is in the UI front of the house. Now back to C#.

1. We are going to create List<Stock> as mentioned. (Listing 4- line number 50)
2. Inside the OnInitializedAsync() method, we are using Newtonsoft to deserialize the json to List<Stock>. (Listing 4- line number 59)

Alright now that we have laid down the plan. Let's add these artifacts to our "StockCharts.razor''. Following listing is taking care of everything that we discussed above.

Note
I am using bootstrap classes for rounded borders, button colors, and margins etc.

@page "/"
@using Newtonsoft.Json
@using System.Reflection
@inherits LayoutComponentBase

<TelerikSwitch  @bind-Value="@IsCandlestickSelected" 
                           Width="120px"
                           OnLabel="Candle Stick"
                           OffLabel="OHLC Chart"> 
</TelerikSwitch>
<button Class="m-2 btn btn-primary">Apple CMP:137.13</button>
<button Class="m-2 btn btn-danger">-5.51 (-3.86%)</button>
<TelerikRootComponent>
    @if (ApplePrices != null)
    {
        <TelerikChart Width="100%"
                      Height="400px"
                      Class="mt-3 border border-primary rounded">
            <ChartTitle Text="NASDAQ: 10 July 2022"></ChartTitle>
            <ChartTooltip Visible="true"></ChartTooltip>

            <ChartSeriesItems>
                <ChartSeries Type="@( IsCandlestickSelected ? Telerik.Blazor.ChartSeriesType.Candlestick : Telerik.Blazor.ChartSeriesType.OHLC )"
                         Data="@ApplePrices"
                         CategoryField="@nameof(Stock.Date)"
                         OpenField="@nameof(Stock.Open)"
                         CloseField="@nameof(Stock.Close)"
                         HighField="@nameof(Stock.High)"
                         LowField="@nameof(Stock.Low)" DownColor="salmon" Color="yellowgreen">
                </ChartSeries>
            </ChartSeriesItems>

            <ChartCategoryAxes>
                <ChartCategoryAxis Type="Telerik.Blazor.ChartCategoryAxisType.Date">
                </ChartCategoryAxis>
            </ChartCategoryAxes>

            <ChartValueAxes>
                <ChartValueAxis Min="136" Max="170">
                </ChartValueAxis>
            </ChartValueAxes>
        </TelerikChart>
    }
</TelerikRootComponent>
<footer class="mt-3 border border-primary rounded w-25">
	<p class="m-2">Copyright © 2022, Rikam Palkar.</p>
    <p class="m-2">This app contains material by Telerik © 2022</p>
</footer>
@code {
    List<Stock> ApplePrices { get; set; }

    private bool IsCandlestickSelected { get; set; } = true;

    protected override async Task OnInitializedAsync()
    {
        string jsonPath = Path.Combine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location), @"Data\AppleStockPrices.json");
        using (StreamReader stream = new StreamReader(jsonPath))
        {
            ApplePrices = JsonConvert.DeserializeObject<List<Stock>>(stream.ReadToEnd());
        }
    }
}

Listing 4: StockCharts.razor

Beautiful, let's crack open that bad boy and see it's working. Following images are a series of snaps of what we have achieved.

Image 3: Snap of Candle stick

Image 3: Snap of OHLC chart

Phew!! thank god it worked. This is ceremonial.

Conclusion

Now we know how to create candlestick and OHLC charts in Blazor, how to style them based on their type and how to deserialize json into objects. We saw how to add telerik components in your application.

This has been fun. I will see you in the next chapter of Blazing Blazor.