Charts in Xamarin Forms App

Introduction Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. I want this task to be as easy as writing a few lines of code, but I couldn't find a straightforward way to achieve this. This is why I started exploring SkiaSharp and created Microcharts.

NuGet Package : Xamarin.Forms = search "Microcharts.Forms"

This simple plugin can display Microcharts in Xamarin.Forms.

Available charts Microcharts.Forms Plugin

• Barchart
• PointChart
• LineChart
• DonutChart
• RadialGaugeChart
• RadarChart

Chart Types

1. BarChart

2. Chartview.Chart = new BarChart(){Entries = entries};

1. PointChart

2. Chartview.Chart = new PointChart(){Entries = entries};

1. LineChart

2. Chartview.Chart = new LineChart(){Entries = entries};

1. DonutChart

2. Chartview.Chart = new DonutChart(){Entries = entries};

1. RadialGaugeChart

2. Chartview.Chart = new RadialGaugeChart(){Entries = entries};

1. RadarChart

2. Chartview.Chart = new RadartChart(){Entries = entries};

Step 1 You can create Xamarin.Forms app by going to File >> New >> Visual C# >> Cross Platform >> Cross Platform App (Xamarin.Native or Xamarin.Forms), give the application name and press OK.

(Project name: MicrochartsApp)

Step 2 Now, add the following NuGet Package for your projects.

• Microcharts.Forms

For that, go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for the Solution". Now, select the following NuGet Package, select your project, and install it.

• Microcharts.Forms

Step 3

To display a chart, we'll need to host it in a ChartView.

After installing NuGet packages, add a ChartView control to your project. For that, go to Solution Explorer \>\> MicrochartsApp(PCL) \>\>\> Double-click on MainPage.xaml. After opening this, you can add assembly and XAML code to your project. Here is the code for this page.

Assembly

1. xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"

XAML code

1. <?xml version="1.0" encoding="utf-8" ?>
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4. xmlns:local="clr-namespace:MicrochartsApp"
5. x:Class="MicrochartsApp.MainPage"
6. xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms">
7. <ScrollView>
8. <StackLayout Orientation="Vertical">
10. <forms:ChartView x:Name="Chart1"
11. HeightRequest="150"/>
12. <forms:ChartView x:Name="Chart2" HeightRequest="150" />
13. <forms:ChartView x:Name="Chart3"
14. HeightRequest="150"/>
15. <forms:ChartView x:Name="Chart4"
16. HeightRequest="150"/>
17. <forms:ChartView x:Name="Chart5"
18. HeightRequest="150"/>
19. <forms:ChartView x:Name="Chart6" HeightRequest="160"/>
20. </StackLayout>
21. </ScrollView>
22. </ContentPage>

Step 4 In this step, add data entries. For that, open Solution Explorer >> MicrochartsApp(PCL) >>click open MainPage.xaml.cs. This class code is given below.

       Every chart displays via Microcharts and consumes a set of data entries. They will always have the same structure regardless of the chart type that you want to display.

Each entry

• Floating number representing it's value is required.
• Label - what your entry is associated with.
• ValueLabel - format your value
• Color - entry

1. using Microcharts;
2. using SkiaSharp;
3. using Microcharts.Forms;
4. using System;
5. using System.Collections.Generic;
6. using System.Linq;
7. using System.Text;
8. using System.Threading.Tasks;
9. using Xamarin.Forms;
10. using Entry = Microcharts.Entry;
13. namespace MicrochartsApp
14. {
15. public partial class MainPage : ContentPage
16. {
17. List<Entry> entries = new List<Entry>
18. {
19. new Entry(200)
20. {
21. Color=SKColor.Parse("#FF1943"),
22. Label ="January",
23. ValueLabel = "200"
24. },
25. new Entry(400)
26. {
27. Color = SKColor.Parse("00BFFF"),
28. Label = "March",
29. ValueLabel = "400"
30. },
31. new Entry(-100)
32. {
33. Color = SKColor.Parse("#00CED1"),
34. Label = "Octobar",
35. ValueLabel = "-100"
36. },
37. };
38. public MainPage()
39. {
40. InitializeComponent();
43. Chart1.Chart = new RadialGaugeChart() { Entries = entries };
44. Chart2.Chart = new LineChart() { Entries = entries };
45. Chart3.Chart = new DonutChart() { Entries = entries };
46. Chart4.Chart = new BarChart() { Entries = entries };
47. Chart5.Chart = new PointChart() { Entries = entries };
48. //Chart6.Chart = new RadarChart() { Entries = entries };
49. }
50. }
51. }

Step 5

Now, go to "Build" menu and configure your startup project. After configuring, run your project. You will have the result like below.

Finally, we have successfully created Xamarin.Forms Microcharts application.