One way to make your data visually
more appealing to your users is by using charts. So let's have a look.
How to add amazing charts to your .NET MAUI application. Now this charting library that we're
going to talk about in this video, the Microcharts, is one that you might
already know from your Xamarin forms days, which is really amazing
because it was a great library back then and it's still a great library
now. It's very simple to use. You can just drop in your data, choose
which type of chart you want to show, and then boom. It looks visually
amazing. It has some animations whenever it's coming up, so there is a lot to
uncover. And the great thing is there is now a version that supports.
NEt Maui and I think the APIs are just literally the same.
So your can just take your code whenever you're migrating from Xamarin
forms, take your code and put that in your. Net Maui application. Install
the right package and it will just work as it did before. So that's really
cool. Now let's just have a look. So here we are in Visual Studio 2022.
I just created a file new. NEt Maui project which you can
see right here. It's still the default template. I've named it Maui
microcharts. Maui. That's also the name of the GitHub repository
that's on my account. You can find the link in the video description below if you
want to review the code. It's all there. Now before I am going to change things
in this XaML, I'm going to show you how to install
the NuGet package. Well actually how to find it. I already installed it. So if
you go over to the solution Explorer, we can right click on the project and
you can do manage Nuget packages and we can browse and search for
microcharts. Now there's an interesting thing I
already mentioned like this also has some history with Xamarin, Xamarin forms.
So you're going to find this one by Alois Danielle, I hope I pronounced
that correctly. And Ed Lomonaco. So they have been
maintaining this for a long, long time in the Xamarin
days, the good old days, and they have a lot of downloads, right? And
it's version 0959. That's not the one that you need. That
one is not maintained anymore as far as I know. So the people who are
behind this Maui version have taken that code built upon that,
made it compatible with Maui and hopefully they're going to now maintain that for
some time to come. So the one that you want
to have is Maui. And I think if you go
over to the repository then you can see that it also supports
all kinds of other cool things. You can use it without Maui. So just
the net for iOS and net Android you can use it
for UNO, for Evalonia, so for all these kinds of things. And
that's because this is based on Skia Sharp. So you will see that it
also brings in some Skia sharp dependencies right here. And Skia
Sharp is a drawing library that's crazy fast, crazy cool. You can do a lot of
amazing things with that and that's what makes these charts so powerful and
great looking. Right? If you don't know what Skia sharp is,
let me know down in the comments. But don't worry about it, right? It
will just make these charts work. So that's really cool. I installed it
already, we've done that. And the next thing that you want
to do to bootstrap this plugin is then go over to your solution
explorer, go to your Maui program CS and you want to add this. Use
microcharts that wires up all the things that are needed for this
library, for this package and you will be good to go make sure that
it imports this using right here using microcharts, Maui and that's all
good. Okay, so with this in place now we can
finally start building our charts. Now the way this works, again,
this is working with Skia Sharp, so it works with drawing
on the screen. And to do that we need a
canvas and the way that's implemented is with a
chart view. So I'm going to remove all of this
from the default template and we actually have to import this XML
namespace right here. So let's do XML and S Micro. I'm just going to call it
Micro is and then you can do with intellisense,
you can look for microcharts and you want to have this Maui one. So
that's the one. This is the full line that you want to have. This micro
can be anything. This is just a short name where you can find all
charts, control all the objects under that are in this namespace right
here. So let's go to micro and you can already see that it
only has one thing, it has chart view, right? So that it has, it has
some properties which is not really things that you want to use
because it works a little bit differently than you maybe expect it to work,
right. The one thing that you might find interesting is chart
which enables you to also use this with MPVM I'll come back to that in a little
bit, but that's the one that you might find interesting to actually
use. I'm going to make this an X name. So I'm going to give
this a name field chart view so that I can reference it from
my code behind. Now this is basically your canvas that you're going to work
with to draw the actual chart on. So here we can actually give
this some height request and width request that might
be interesting as well. I'm just going to leave it as it is for now. And then
here in my main page, XAML CS, I already prepared some
entries. So this chart entry, that's an object
that is built into this Microcharts library. You can see it does using
microcharts and using Skia Sharp as well. And we have these chart
entries and that's our data points, right? So that is the
abstract version, the object that holds our data that
can be plotted on any type of chart, right? Because we have a
couple of different charts that we can use here. So I have
some dummy data here. You can specify the value. You can
specify a value label if that's different from the actual
value. You can have this Windows label right here and you can specify
it with a color, right? And this is a skia sharp color parse. And you can
just parse it from some hex value here. So I got a couple
of entries lined up here. You can have that in different
formats. You can pull that down from an API if that's what you want, which is
probably more typical. But I just have a couple of hard coded things here.
And then in our main page I can here do chart view. Chart is new. And now we can go to whichever type of
chart we want to have. So we can say bar chart,
right? We can say donut chart donuts, right. We can have line charts. So you have all these
different kinds of things. Let's go with a bar chart first. Nice
and sweet. And for each chart then you have a
different set of properties. There are definitely a common set of
properties as well. So I don't know, you have like a
background color obviously. What else do we have? Like a bar area
Alpha if you can want to animate whenever it
showed, yes or no. So is animated the label color, the Legend
option. So you can show the Legends, yes or
no. You can have series. So there is a ton of options here if there's
anything that you want to learn that I'm not covering in this video because
this is just the getting started video. Let me know down in the comments. And
don't forget to subscribe so you'll be notified when that new video comes
right at you. All right, so we have all this stuff, but the only
thing I'm going to use now is entries, right? So I'm just going to assign
these entries with this entries variable that I got set up in the top
here and now it's all set up to show me these entries. I'm going
to have to remove the boilerplate code here that's from the default template
because it references elements that are not there anymore. So let's just
do that so that the code sample is nice and cleaned up and I can just
start running this on windows. So I'm just going to run this on my windows
machine that deploys the fastest and then it's going to show you this
magnificent bar chart with the different options here I should
see. What is it? One, two, three, your options, each with a different value
showing up in a bar by default. It's animated.
I'm not really sure if that's going to show up on the recording real
nice because I have this complicated setup. It doesn't really show you that
great, I think. But here we have this bar chart just like that, a
couple of lines of code, an amazing looking bar chart. Now of course this is like full screen,
right? So I can obviously also implement this somewhere in my
layout. So I can just say, hey, I can wrap this in, I don't
know, a vertical stack layout and then I can stack a couple under each
other, right? So I can just do this and then I can maybe do another
one and do chart view one. And I can specify here like the
height request with like, I don't know, 200 and also do a height request of 200 here as well. And now I should have two charts
on top of each other. Well I'm going to assign something here. So
let's make this a different type. So I'm going to make this, that donut
chart. Donut chart. And now if I run this
again on Windows, we're going to see a bar chart and a donut chart on top
of each other. But the main thing that I want to show you here as
well is like, hey, you can put this in any element in your
layout, right? So you can just have this grid with all kinds of other
stuff around it. And you can just show these different Maui charts here. So it doesn't really come out that
great. Maybe if I make this height request like 500, maybe I should, oh, there we go, so
this is better. And I should probably wrap it in a scroll view now because
it goes out of the viewport. But you can see that we have this bar
chart at the top with all the labels and things there. But we
also have this donut chart here at the bottom with all the legends and all
the values there as well. And then we have of course, like
let's make this chart view one, let's make it
something different and let's make this a line chart, which looks really
great too. So we have that one just to show you
the couple of options. And obviously if you're going to run
this on IOS or Android, then it's going to show up the same
way. That's one of the powers, the superpowers of Skia Sharp as well
because this is drawn, it's going to look the exact same on
each of the platforms here as well. And I think I should probably now make
this 500 as well because the line looks
really flat now. Well, and now it falls off the screen.
Right. So I shouldn't improvise here. I prepared
something else and that's why it's not going here. So here you can see this
line chart. And now we have this nice wave of things and
different values, right? So that's all that's going on
here. Now I will wrap up this sample, I will make a little
scroll view around this and make sure that it goes nicely on the GitHub
page. And then you know how to get started with these great charts
in donut chart. Oh, sorry, I was still
wondering about the donuts. So this is such an amazing library. It makes
it super easy. Just a couple of lines of code to create
amazing looking charts inside of your Net Maui app. And the really cool
thing is this doesn't just work for. Net Maui, it also works for. Net for
iOS, net for Android. And the API is the exact same as it was with
Xamarin forms. So it should be super easy to
MicroCharts Xamarin forms project to Net Maui and still have this great
library at your disposal. You can just go to
the GitHub repository for this library, microcharts. You can find the
link down below. Make sure to start that repository, check out all the samples
there. And of course let me know in the comments if you want to see more
follow up videos about this. See you for the next one.
