Xamarin Forms - How to create CandleStick Charts using UltimateXF

Post Views: 449

In this post we will see how we can create CandleStick charts in Xamarin forms application. This chart will be created using UltimateXF library. Github link for the library. You can add Nuget package in your application project. In previous post we already seen how to create Piecharts, Barcharts, linecharts in Xamarin forms.

Add Nuget package to your project:

Install-Package UltimateXF -Version 2.3.2

In your project create a new content page with name CandleStickChart.xaml and edit it as below:

CandleStickChart.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinGraphsPieCharts.CandleStickChart"
Title="Candle Stick Chart"
xmlns:ultimateChart="clr-namespace:UltimateXF.Widget.Charts;assembly=UltimateXF">
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

<Label Text="Xamarin Forms CandleStickCharts" Margin="5"
VerticalOptions="Start" HorizontalOptions="Start" />

<Button x:Name="btnLoadGraph" Text="LOAD" Margin="5"
Clicked="BtnLoadGraph_Clicked"/>

<ultimateChart:SupportCandleStickChartExtended x:Name="chart" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />

</StackLayout>
</ContentPage.Content>
</ContentPage>

This form contains a button to load our chart and UltimateXF CandleStick chart to load our chart.

Edit the code as below:

CandleStickChart.xaml.cs:

using System;
using System.Collections.Generic;
using UltimateXF.Widget.Charts.Models.CandleStickChart;
using UltimateXF.Widget.Charts.Models.Formatters;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinGraphsPieCharts
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CandleStickChart : ContentPage
{
public CandleStickChart()
{
InitializeComponent();
}
private void BtnLoadGraph_Clicked(object sender, EventArgs e)
{
LoadChart();
}
public void LoadChart()
{
try
{
var entries = new List<CandleStickEntry>();
entries.Add(new CandleStickEntry(0, 4.62f, 2.02f, 2.70f, 4.13f));
entries.Add(new CandleStickEntry(1, 5.50f, 2.70f, 3.35f, 4.96f));
entries.Add(new CandleStickEntry(2, 5.25f, 3.02f, 3.50f, 4.50f));
entries.Add(new CandleStickEntry(3, 6f, 3.25f, 4.40f, 5.0f));
entries.Add(new CandleStickEntry(4, 5.57f, 2f, 2.80f, 4.5f));

var labels = new List<string>();
labels.Add("col1");
labels.Add("col2");
labels.Add("col3");
labels.Add("col4");
labels.Add("col5");

var dataSet4 = new CandleStickDataSet(entries, "Stocks Info")
{
DecreasingColor = Color.Red,
IncreasingColor = Color.Green
};

var data4 = new CandleStickChartData(new List<ICandleStickDataSet>() { dataSet4 });

chart.ChartData = data4;
chart.DescriptionChart.Text = "Test label chart description";

chart.AxisLeft.DrawGridLines = true;
chart.AxisLeft.DrawAxisLine = true;
chart.AxisLeft.Enabled = true;

chart.AxisRight.DrawAxisLine = true;
chart.AxisRight.DrawGridLines = true;
chart.AxisRight.Enabled = true;

chart.XAxis.DrawGridLines = true;
chart.Legend.TextColor = Color.Black;
chart.XAxis.AxisValueFormatter = new TextByIndexXAxisFormatter(labels);
}
catch(Exception ex)
{

}
}
}
}

This code is copied from the github project. You can now run the application by setting the start page to our chart page in App.xaml.

App.xaml.cs:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamarinGraphsPieCharts
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new NavigationPage(new CandleStickChart());
}
}
}

Initialize library in iOS project:
AppDelegate.cs:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
UltimateXFSettup.Initialize();

LoadApplication(new App());

return base.FinishedLaunching(app, options);
}

Initialize library in Android project:
MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;

base.OnCreate(savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
UltimateXFSettup.Initialize(this);
LoadApplication(new App());
}