This video shows you how to get started with the DevExpress Chart Control for .NET MAUI.
You'll learn how to supply data to a chart, display multiple series in the same view,
customize axes and legends and enable advanced capabilities such as crosshair cursors, and dynamic hints.
Before you begin
we recommend that you review our video on how to use our NuGet Gallery to incorporate our controls into your new .NET MAUI application
or review the get-started section in the documentation.
This tutorial also assumes that you have the latest version of Visual Studio with all required workloads installed.
If you’re not familiar with the .NET MAUI framework, please review Microsoft documentation on how to start using this platform.
Ok. Let's get started.
We're going to be using our sample application available on GitHub.
In the Visual Studio start screen, Click on Clone a repository.
Specify the repository location - you can find a link to this repository in the description below.
And click clone.
When the solution is downloaded, run it on your favorite device or emulator.
Our .NET MAUI controls support both mobile platforms - Android and iOS.
We will be running this example on an Android emulator.
This application consists of a single screen that displays the country's GDP for the USA, China, and Japan in the last decade.
Let’s take a look at how this application is implemented and then we will reproduce this chart view from scratch.
You will see that it’s actually quite easy.
Take a look at the ViewModel file. It contains data objects that store GDP values and country names.
The ViewModel class stores sample data for three countries.
Now let’s open the MainPage markup file.
At the top of the markup file, you can see the DXC XAML namespace that contains our Chart View control.
Then you can see that the BindingContext property is set to a ViewModel instance.
The page itself contains an instance of ChartView.
It contains multiple series that are bound to the data source.
Below the markup specify the X and Y axes, as well as the chart legend and hints.
Now let’s reproduce this layout. Remove the default content and create a new Chart View.
It will be bound to the same view model.
Use the Series collection to add a new line series to the chart.
The DisplayName property specifies the series caption displayed on the chart.
We will bind it to the corresponding field in the view model.
Then we should supply data for the series
We use a data adapter for this purpose. It contains information about data fields in the view model that store arguments and values.
Years are set as arguments, they go on the x-axis. GDP numbers are values. They go on the y-axis.
Let's run the application and see how this series look in a live chart.
OK. You can see a line and a few labels on the axes, but the nature of data is not explained in the chart.
The vertical axis shows numbers but doesn't indicate the measurement unit.
The horizontal axis only lists a couple of randomly selected dates that don't help us analyze yearly data.
Finally, the control does not indicate what this line means.
Let's add all that missing information.
We'll start with axis labels and measurement units. In XAML, add the axis x and axis y declarations into the chart view markup.
Axis X code specifies that we are only interested in the year portion of the date-time values
and that we want to display labels for each individual year.
Axis Y adds a label to explain the measurement units and changes value format and location.
Alright, Run the application again.
Note how the horizontal axis now displays yearly labels
and the vertical label displays text that explains the measurement units.
Let's return back to the XAML code.
Now we add a legend declaration to the chart view markup.
The only settings we need are the legends position and orientation and the control will display the label that identifies the series.
If you run the application you'll see how the country name is now displayed at the bottom of the chart
so that users can make complete sense of the displayed data.
Close the application and let's enable yet another capability that will help users read chart data.
We will add crosshair cursors and dynamic hints.
First of all, add a separate definition for the hint object.
The settings inside that object say that the hint title should display arguments as years
and that maximum of three series values are to be displayed.
Now you need to add code to the series and specify how to format hint values.
We use the series name and y-axis value separated by a colon.
Run the application.
If you interact with the chart you will see crosshairs that highlight values on axes.
The chart also displays a hint with the argument and value summary for the series.
One final theme we'll show in this tutorial is how to customize the series' appearance.
In the line series markup, add a nested tag named style.
As you can see, the added code changes line attributes to display point markers.
We also add two more series for other countries available in the view model.
Run the application for the last time.
As you can see, the chart now displays lines for three countries, lines are now displayed with round markers at each point.
The line colors are reflected in the legend as well as in interactive hints.
And that's it for this video.
We recommend that you also review the demo application
and learn about other capabilities available in our .NET MAUI Chart View control.
You can get the demo source from our GitHub repository to review the app on your mobile device.
There’s a link to the repository in the description below.
You can also download this application from the App Store and Google Play.
Once the demo has loaded, go to the chart section.
We'll show you a few modules in this video. First, bar charts
Side-By-Side Range Bars….. Regular Range Bars… Population Pyramid…… Regular Bars…… and Stacked Bars.
We have a regular line chart…. curved line….. scatter chart…. and step line chart.
Range Area Chart…. Regular Area Chart…. and Stacked.
Finally, pies and donuts.
And that’s it. If you liked this video, please give us a thumbs up, if you have questions please comment below.
And don’t forget to subscribe and ring the bell so you get notified anytime we release new content.
Thanks for watching, and thank you for choosing DevExpress.