DEV Community

loading...

Charts in Xamarin Forms App

logeshpalani98 profile image Logesh Palani Originally published at logeshpalani.blogspot.com on ・4 min read

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">
  9. <forms:ChartView x:Name="Chart1"
  10. HeightRequest="150"/>
  11. <forms:ChartView x:Name="Chart2" HeightRequest="150" />
  12. <forms:ChartView x:Name="Chart3"
  13. HeightRequest="150"/>
  14. <forms:ChartView x:Name="Chart4"
  15. HeightRequest="150"/>
  16. <forms:ChartView x:Name="Chart5"
  17. HeightRequest="150"/>
  18. <forms:ChartView x:Name="Chart6" HeightRequest="160"/>
  19. </StackLayout>
  20. </ScrollView>
  21. </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;
  11. namespace MicrochartsApp
  12. {
  13. public partial class MainPage : ContentPage
  14. {
  15. List<Entry> entries = new List<Entry>
  16. {
  17. new Entry(200)
  18. {
  19. Color=SKColor.Parse("#FF1943"),
  20. Label ="January",
  21. ValueLabel = "200"
  22. },
  23. new Entry(400)
  24. {
  25. Color = SKColor.Parse("00BFFF"),
  26. Label = "March",
  27. ValueLabel = "400"
  28. },
  29. new Entry(-100)
  30. {
  31. Color = SKColor.Parse("#00CED1"),
  32. Label = "Octobar",
  33. ValueLabel = "-100"
  34. },
  35. };
  36. public MainPage()
  37. {
  38. InitializeComponent();
  39. Chart1.Chart = new RadialGaugeChart() { Entries = entries };
  40. Chart2.Chart = new LineChart() { Entries = entries };
  41. Chart3.Chart = new DonutChart() { Entries = entries };
  42. Chart4.Chart = new BarChart() { Entries = entries };
  43. Chart5.Chart = new PointChart() { Entries = entries };
  44. //Chart6.Chart = new RadarChart() { Entries = entries };
  45. }
  46. }
  47. }

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.

Discussion

pic
Editor guide