Chart of the Week: Creating a .NET MAUI Candle Chart to Analyze Tesla’s (TSLA) Stock Prices
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a .NET MAUI Candle Chart to Analysis Tesla’s (TSLA) Stock Prices

Chart of the Week: Creating a .NET MAUI Candle Chart to Analyze Tesla’s (TSLA) Stock Prices

Welcome to our Chart of the Week blog series!

Today, we’ll analyze Tesla’s (TSLA) stock prices through the lens of candlestick chart analysis using the Syncfusion .NET MAUI Candle Chart.

In the fast-paced realm of finance, candle charts help analysts understand the intricacies of stock movements. A candle chart, also called a candlestick chart, is a powerful visual tool that can unveil patterns, trends, and potential turning points in the market. Join us as we dissect the historical performance of TSLA, uncovering the stories hidden within the data.

Whether you’re a seasoned investor or a newcomer to the stock market, this analysis aims to show you how candle charts can provide actionable insights to enhance your decision-making.Analyzing Tesla’s stock prices using the .NET MAUI Candle Chart

Step 1: Gather data for the stock prices of Tesla

Before creating the chart, we need to gather the historical data of Tesla’s stock prices. For this demo, we are getting data from Nov. 2022 to Nov. 2023.

Step 2: Prepare the data for the chart

Create the StockPriceModel class for holding stock price data with the help of the Date, Open, High, Low, and Close properties.

Refer to the following code example.

public StockPriceModel(DateTime date,double open,double high,double low,double close) 
 {
     Date = date;
     Open = open;
     High = high;
     Low = low;
     Close = close;
 }

Generate the data collection with the help of the StockPriceViewModel class and StockDataCollection property.

Then, convert the CSV data to a collection of stock data using the ReadCSV method and store it in the StockData collection property.

public class StockPriceViewModel : INotifyPropertyChanged
 {
     private ObservableCollection<StockPriceModel> _stockPrices;
      
     public ObservableCollection<StockPriceModel> StockPrices
     {
         get
         {
             return _stockPrices;
         }
         set
         {
             _stockPrices = value;
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("StockPrices"));
         }
     }
     public StockPriceViewModel()
     {
         StockPrices = new ObservableCollection<StockPriceModel>(ReadCSV("CandlestickSample.Resources.Raw.tesla.csv"));
     }

     private IEnumerable<StockPriceModel> ReadCSV(string resourceStream)
     {
         Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
         Stream inputStream = executingAssembly.GetManifestResourceStream(resourceStream);

         string? line;
         List<string> lines = new List<string>();
         using StreamReader reader = new StreamReader(inputStream);
         while ((line = reader.ReadLine()) != null)
         {
             lines.Add(line);
         }

         return lines.Select(line =>
         {
             string[] data = line.Split(',');
             DateTime date = DateTime.ParseExact(data[0], "yyyy-MM-dd", CultureInfo.InvariantCulture);
             return new StockPriceModel((date), Convert.ToDouble(data[1]), Convert.ToDouble(data[2]), Convert.ToDouble(data[3]), Convert.ToDouble(data[4]));
         });
     }

     public event PropertyChangedEventHandler? PropertyChanged;
 }

Step 3: Configure Syncfusion .NET MAUI Cartesian Charts

Next, configure the Syncfusion .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
  <chart:DateTimeAxis/>        
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>       
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

Step 4: Bind data to the Candle Chart

To visualize Tesla’s stock price data, use the Syncfusion CandleSeries and bind the data to it.

Refer to the following code example.

<chart:CandleSeries ItemsSource="{Binding StockPrices}"
                    XBindingPath="Date"
                    Open="Open"
                    High="High"
                    Low="Low"
                    Close="Close"/>

Step 5: Customize the chart appearance

We can enhance the appearance of the charts by changing the axis elements’ appearance and adding titles to the charts.

Refer to the following code example to customize the chart title with interactive information.

<Grid.RowDefinitions>
 <RowDefinition Height="2*"></RowDefinition>
 <RowDefinition Height="8*"></RowDefinition>
</Grid.RowDefinitions>
<HorizontalStackLayout>
 <Image Source="tesla.png" WidthRequest="60" HeightRequest="60" Margin="{OnPlatform Android='5,-20,0,0',Default='5,-80,0,0'}" Grid.Row="0" Grid.Column="0"></Image>
 <VerticalStackLayout Grid.Row="0" Grid.Column="1">
  <Label Text="{OnPlatform Android='Tesla,Inc.(TSLA)',Default='TSLA'}" FontSize="Medium" FontAttributes="Bold"></Label>
  <Label Text="Analysis of Tesla(TSLA) Stock Prices" FontSize="Default" Margin="{OnPlatform Android='0,15,0,0',Default='0,5,0,0'}"></Label>
</HorizontalStackLayout>

Configure the axis and modify the axis elements, as shown in the following code example.

<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis>
  <chart:DateTimeAxis.Title>
   <chart:ChartAxisTitle Text="Date"></chart:ChartAxisTitle>
  </chart:DateTimeAxis.Title>
 </chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="Prices"></chart:ChartAxisTitle>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

Step 6: Add buttons to customize ranges

Add the range buttons Day, Week, Month, and Year. This will allow us to visualize Tesla’s stock price data based on the range.

XAML

<HorizontalStackLayout Margin="{OnPlatform Android='0',Default='0,10,0,0'}">
 <Button x:Name="Label1" Text="Day" Background="Transparent" TextColor="Black" Clicked="DayRange_Changed"></Button>
 <Button x:Name="Label2" Text="Week" Background="Transparent" TextColor="Black" Clicked="WeekRange_Changed"></Button>
 <Button x:Name="Label3" Text="Month" Background="Transparent" TextColor="Black" Clicked="MonthRange_Changed"></Button>
 <Button x:Name="Label4" Text="Year" Background="Transparent" TextColor="Black" Clicked="YearRange_Changed"></Button>
 <CheckBox HorizontalOptions="End" Margin="{OnPlatform Android='300,0,0,0',Default='700,0,0,0'}" x:Name="CheckBox" IsChecked="True"></CheckBox>
 <Label Text="Enable SolidCandles" Margin="0,10,0,0" HorizontalOptions="End"></Label>
</HorizontalStackLayout>

C#

private void DayRange_Changed(object sender, EventArgs e)
{            
    Label1.Background = Colors.LightSkyBlue;
    xAxis.AutoScrollingDeltaType = DateTimeIntervalType.Days;
    xAxis.AutoScrollingDelta = 7;
}

private void WeekRange_Changed(object sender, EventArgs e)
{
    Label2.Background = Colors.LightSkyBlue;
    xAxis.AutoScrollingDeltaType = DateTimeIntervalType.Days;
    xAxis.AutoScrollingDelta = 15;
}

private void MonthRange_Changed(object sender, EventArgs e)
{   
    Label3.Background = Colors.LightSkyBlue;
    xAxis.AutoScrollingMode = Syncfusion.Maui.Charts.ChartAutoScrollingMode.End;
    xAxis.AutoScrollingDeltaType = DateTimeIntervalType.Months;
    xAxis.AutoScrollingDelta = 2;
}

private void YearRange_Changed(object sender, EventArgs e)
{
    Label4.Background = Colors.LightSkyBlue;
    yAxis.Minimum = 90;
    yAxis.Maximum = 320;
    xAxis.AutoScrollingDeltaType = DateTimeIntervalType.Years;
    xAxis.AutoScrollingDelta = 1;
}

Step 7: Add interactivity features to the chart

To enhance the chart with additional information, we can leverage interactive features like a trackball, auto-scrolling delta, and panning. The trackball feature is particularly useful as it provides more information about the chart while tracking a specific segment.

Refer to the following code example.

<chart:CandleSeries ItemsSource="{Binding StockPrices}"
                    XBindingPath="Date"
                    Open="Open"
                    High="High"
                    Low="Low"
                    Close="Close"
                    ShowTrackballLabel="True"/>                    
<chart:SfCartesianChart.TrackballBehavior>
 <chart:ChartTrackballBehavior></chart:ChartTrackballBehavior>
</chart:SfCartesianChart.TrackballBehavior>

Next, set the AutoScrollingDelta property with a value of 4 and the AutoScrollingDeltaType with Months in the x-axis. This configuration will display the data for the last four months on the axis.

<chart:DateTimeAxis x:Name="xAxis"
                    ShowTrackballLabel="True" 
                    AutoScrollingDelta="4"                            
                    AutoScrollingDeltaType="Months"
                    ShowMajorGridLines="False"/>

Additionally, add the ZoomPanBehavior property to the chart to enable panning.

<chart:SfCartesianChart.ZoomPanBehavior>
 <chart:ChartZoomPanBehavior EnablePanning="True" ZoomMode="X" EnableDoubleTap="False"/>
</chart:SfCartesianChart.ZoomPanBehavior>

After executing the previous code examples, the output will look like the following image.

Analyzing Tesla’s stock prices using the Syncfusion .NET MAUI Candle Chart
Analyzing Tesla’s stock prices using the Syncfusion .NET MAUI Candle Chart

GitHub reference

For more details, refer to the project on the GitHub repository.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Conclusion

Thanks for reading! In this blog, we’ve seen how to analyze Tesla’s stock prices using the Syncfusion .NET MAUI Candle Chart. We encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

If you require any assistance, please don’t hesitate to contact us via our support forumsupport portal, or feedback portal. We are always eager to help you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed