Learn Technologies
Xamarin Forms - Charts

Xamarin Forms – Charts

In this article we’ll explore together how to integrate charts into Xamarin Forms Application. It has always been very important to display chats for a mobile user in order to provide users with a clear overview of digital data.

In this tutorial, we’ll use Microcharts Nuget plugin. It is just simple drawing on top of the awesome SkiaSharp library. The purpose is not to have an heavily customizable charting library. If you want so, simply fork the code, since all of this is fairly simple. Their is no interaction, nor animation at the moment.

Note that this framework does not support the display of multiple data. If for example you want to display the line Chart with 2 lines, you will have to override the DrawContent method of the LineChart class.

You can get the code from GitHub.

LineChart

Let’s begin by creating a new project called Charts, in which we install the NuGet package “Microcharts.Forms” and “Microcharts

Microcharts.Forms

Data Entries

Displaying charts in general need which called series. It’s a structure combine data to show and label signification. The data value will be shown at the top of chart and it’s label at the x-axis at the buttom. This series called in Microcharts ChartEntry. it has always the same structure regardless of the chart type that you want to use:

  • Floating number representing its value.
  • Label describing what your entry is associated with.
  • ValueLabel to format your value.
  • Color associated with the entry.

Image that we want to show the number of web site visitor by country, so your entry will look like:

using Prism.Navigation;
using System.Collections.Generic;
using SkiaSharp;
using Microcharts;

namespace Charts.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        private LineChart lineChart;
        public LineChart LineChart 
        { 
            get => lineChart;
            set => SetProperty(ref lineChart, value);
        }
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Charts";
        }

        public override void OnNavigatedTo(INavigationParameters parameters)
        {
            base.OnNavigatedTo(parameters);
            InitData();
        }

        private void InitData()
        {
            var blueColor = SKColor.Parse("#09C");
            var chartEntries = new List<ChartEntry>
            {
                new ChartEntry(200)
                {
                    Label = "France",
                    ValueLabel = "200",
                    Color = blueColor
                },
                new ChartEntry(450)
                {
                    Label = "USA",
                    ValueLabel = "450",
                    Color = blueColor
                },
                new ChartEntry(800)
                {
                    Label = "India",
                    ValueLabel = "800",
                    Color = blueColor
                },
                new ChartEntry(100)
                {
                    Label = "Italy",
                    ValueLabel = "100",
                    Color = blueColor
                },
            };

           LineChart = new LineChart { Entries = chartEntries, LabelTextSize = 30f, LabelOrientation = Orientation.Horizontal };
        }
    }
}

Obviously, we can change the label seize and orientation using the LabelTextSize and LabelOrientation.

In the Xaml code, just add the reference to Microcharts and use the ChartView Tag.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
             x:Class="Charts.Views.MainPage"
             Title="{Binding Title}">
<Grid>
       
        <microcharts:ChartView Margin="10,0,10,10"
                     Chart="{Binding LineChart}" 
                     HeightRequest="300" 
                     VerticalOptions="Start" 
                     HorizontalOptions="Fill"/>

    
    </Grid>
</ContentPage>
Xamarin Forms LineChart

BarChart

This chart follows the same data structure format. To display a BarChart just add a new property called BarChart and bind it to a new ChartView tag in the Xaml code. So it seems like this code:

   private BarChart barChart;
   public BarChart BarChart
   {
         get => barChart;
         set => SetProperty(ref barChart, value);
   }

Inside the Initdata method, add the initialization of this property:

 BarChart = new BarChart { Entries = chartEntries, LabelTextSize = 30f, LabelOrientation = Orientation.Horizontal };
Xamarin Forms BarChart

DonutChart

For this type of chart, specifying the color for each data is important to distinguish the difference between them. Otherwise, you will have one block with the same color.

That’s why, add a new list of ChartEntry with unique color for each item.

 var chartEntriesDonut = new List<ChartEntry>
 {
       new ChartEntry(200)
       {
           Label = "France",
           ValueLabel = "200",
           Color = blueColor
       },
       new ChartEntry(450)
       {
           Label = "USA",
           ValueLabel = "450",
           Color = SKColor.Parse("#FFF")
        },
         new ChartEntry(800)
         {
             Label = "India",
             ValueLabel = "800",
             Color = SKColor.Parse("#000")
         },
         new ChartEntry(100)
         {
             Label = "Italy",
             ValueLabel = "100",
             Color = SKColor.Parse("#E32")
         },
   };

DonutChart = new DonutChart { Entries = chartEntriesDonut, LabelTextSize = 30f };

In the Xaml code Add new ChartView tag and bind it to DonutChart.
Don’t forget to put the hole Grid inside a ScrollView component.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
             x:Class="Charts.Views.MainPage"
             Title="{Binding Title}">

    <ScrollView>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="300"/>
            <RowDefinition Height="300"/>
            <RowDefinition Height="300"/>
        </Grid.RowDefinitions>
        <microcharts:ChartView Margin="10,0,10,10"
                     Chart="{Binding LineChart}" 
                     HeightRequest="300" 
                     VerticalOptions="Start" 
                     HorizontalOptions="Fill"/>

        <microcharts:ChartView
                     Grid.Row="1"
                     Margin="10,0,10,10"
                     Chart="{Binding BarChart}" 
                     HeightRequest="300" 
                     VerticalOptions="Start" 
                     HorizontalOptions="Fill"/>

        <microcharts:ChartView
                     Grid.Row="2"
                     Margin="10,0,10,10"
                     Chart="{Binding DonutChart}" 
                     HeightRequest="300" 
                     VerticalOptions="Start" 
                     HorizontalOptions="Fill"/>
    </Grid>
    </ScrollView>
</ContentPage>

Run the application and you will see the 3 charts:

Xamarin Forms - LineChart BarChart
Xamarin Forms - DonutChart

Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kolnos

There is definately a great deal to know about this subject. I like all the points you have made.

1
0
Would love your thoughts, please comment.x
()
x