Neste post irei demonstrar como criar gráficos em sua aplicação Xamarin.Forms, para isso você irá utilizar o Nuget Package Microcharts.Forms.
ADICIONANDO O NUGET PACKAGE
Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.
Digite “Microcharts.Forms” e selecione o plugin como demonstrado na imagem a seguir.
Selecione todos os projetos e clique no botão “Install”.
OBSERVAÇÃO: No momento em que escrevo este post, o Microcharts.Forms encontra-se em sua versão estável 0.7.0, essa versão é compatível com versões do Xamarin.Forms >= 3.0.0. Porém a versão estável do Xamarin.Forms encontra-se na 2.3.4.270, dessa forma estou utilizando a versão 0.6.2 do Microcharts.Forms.
Dados de exemplo
Para este exemplo em meu Code-Behind criei alguns valores em uma lista de Microcharts.Entry como demonstrado a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System.Collections.Generic; | |
| using SkiaSharp; | |
| using Xamarin.Forms; | |
| using Xamarin.Forms.Xaml; | |
| … | |
| List<Microcharts.Entry> entries = new List<Microcharts.Entry> | |
| { | |
| new Microcharts.Entry(200) | |
| { | |
| Label = "Janeiro", | |
| ValueLabel = "200", | |
| Color = SKColor.Parse("#266489") | |
| }, | |
| new Microcharts.Entry(250) | |
| { | |
| Label = "Fevereiro", | |
| ValueLabel = "250", | |
| Color = SKColor.Parse("#68B9C0") | |
| }, | |
| new Microcharts.Entry(100) | |
| { | |
| Label = "Março", | |
| ValueLabel = "100", | |
| Color = SKColor.Parse("#90D585") | |
| }, | |
| new Microcharts.Entry(150) | |
| { | |
| Label = "Abril", | |
| ValueLabel = "150", | |
| Color = SKColor.Parse("#e77e23") | |
| } | |
| }; | |
| } | |
| } |
Xaml
No arquivo xaml referencie o Microcharts.Forms e crie um ChartView.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" | |
| x:Class="DemoGraficos.Views.MainPage"> | |
| <forms:ChartView x:Name="Grafico" HeightRequest="150" /> | |
| </ContentPage> |
Tipos de Gráficos
Agora basta adicionar a sua lista no “ChartView” criado anteriormente, definindo o tipo de gráfico desejado.
Barras
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public GraficoBarras() | |
| { | |
| InitializeComponent(); | |
| Grafico.Chart = new Microcharts.BarChart() { Entries = entries }; | |
| } | |
| … |
Circular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public GraficoCircular() | |
| { | |
| InitializeComponent(); | |
| Grafico.Chart = new Microcharts.DonutChart() { Entries = entries }; | |
| } | |
| … |
Linha
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public GraficoLinha() | |
| { | |
| InitializeComponent(); | |
| Grafico.Chart = new Microcharts.LineChart() { Entries = entries }; | |
| } | |
| … |
Pontos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public GraficoPontos() | |
| { | |
| InitializeComponent(); | |
| Grafico.Chart = new Microcharts.PointChart() { Entries = entries }; | |
| } | |
| … |
Gauge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| public GraficoGauge() | |
| { | |
| InitializeComponent(); | |
| Grafico.Chart = new Microcharts.RadialGaugeChart() { Entries = entries }; | |
| } | |
| … |
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
Nao tem uma forma de aumentar o tamanho da font das labels?
CurtirCurtir
Olá Igo,
Tem sim, utilize a propriedade LabelTextSize
Exemplo em C#
Grafico.Chart.LabelTextSize = 30;
Exemplo em Xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
GaugeLabel.xaml
hosted with ❤ by GitHub
CurtirCurtir
Ótimo post 🙂
Tem como diminuir o tamanho do gráfico? Pois vou colocar os 12 meses e teve label que ficou embaixo do gráfico. Tentei mexer com o tamanho do “HeightRequest” e “WidthRequest” e não deu certo.
CurtirCurtir
Olá Alessandra,
Obrigado 🙂
Não sei qual dos tipos de gráfico que você está usando.
Mas experimente colocar o gráfico dentro de um StackLayout que o HeightRequest e o WidthRequest irá funcionar.
Outra dica também é rever o modelo do gráfico, quando possui muitas informações eu particularmente prefiro usar o de Barras ou o de Linha.
CurtirCurtir
Funcionou direitinho colocando dentro de um StackLayout.
Obrigada pela dica do modelo do gráfico, pelo visto terei que mudar mesmo a forma que será visualizado as informações.
CurtirCurtir
É possível fazer gráficos multilinhas com essa biblioteca ?
CurtirCurtir
Olá Nouara, quando eu escrevi esse post, os gráficos suportados eram apenas esses.
Dê uma olhada no repositório do Github do projeto, acho que lá você irá encontrar todos os tipos suportados.
https://github.com/aloisdeniel/Microcharts
CurtirCurtir
Tem evento de clique nos itens dos gráficos?
CurtirCurtir
Olá Gustavo,
Até o momento em que eu escrevi esse post, não tinha essa funcionalidade.
CurtirCurtir
Dá pra trabalhar com Banco de Dados ?
CurtirCurtir
Olá… Sim, você pode trabalhar com banco de dados sem problema. Um não depende do outro.
CurtirCurtir
Boas como faço para dar binding dos dados da minha base de dados?
CurtirCurtir
Olá Humberto,
Experimente criar um método na sua classe para retornar o Microcharts.Chart, depois é só fazer o Binding no Xaml.
Espero ter ajudado.
CurtirCurtir
Olá, excelente tutorial. Tem como colocar os valores que aparecem em cima das barras(gráfico de barras) e das linhas(gráfico de linhas) na horizontal?
CurtirCurtir
Olá Daniel, obrigado.
Experimente utilizar rotação para rotacionar o gráfico para a posição que você deseja.
Espero ter ajudado.
CurtirCurtir
Eu consigo usar o entries e uma classe diferente do
Grafico.Chart = new Microcharts.LineChart() { Entries = entries };
estou usando o mvvm e quero pegar os dados no graficoViewModel e e criar o gráfico na graficoView
CurtirCurtir
Olá Anderson,
Não sei se eu entendi a sua pergunta direito, caso ela seja se tem como substituir a classe Entry pela sua classe, eu te digo que não. O pois o Microcharts precisa da classe Entry e suas propriedades.
Eu recomendo você criar um método na sua classe para realizar a conversão e te retornar o Microcharts.Chart, assim você faz o Binding no Xaml.
Espero ter ajudado.
CurtirCurtido por 1 pessoa