LiveCharts Announces Support for Uno Platform

Imagine combining LiveCharts2 (v2) the evolution of LiveCharts (v0) with the power of Uno Platform.  The ability to integrate beautiful, animated, automatically updated, cross-platform, object-oriented and easy-to-use charts opens a ton of possibilities for data visualization-driven applications! The LiveCharts team has been working hard at expanding support for Uno Platform and you can now integrate charts, maps, and gauges everywhere Uno Platform runs.

LiveCharts2 for Uno Platform contains the following controls:

  • Cartesian Chart Control

  • Pie Chart Control

  • Polar Chart Control

  • Geo Map Control

Chart Examples

As of today, LiveCharts2 for Uno Platform is in a preview and is available to everyone via NuGet package for Uno. You can also visit the new website, which houses the library, and docs which are fully integrated with Uno Platform and the API explorer. Take it for a spin and see just how easy it is to get started using this brand-new suite of controls in your Uno Platform Applications

LETS GET STARTED

1. Install Uno Platform

Before getting started with Uno, ensure you have installed all the prerequisites, for Visual Studio you can get started here, you can find help on how to install the mentioned workloads here.

2. Create a new Uno Platform project

Open visual studio 2022, select “Create a new project”, then select the Multi-Platform App (Uno Platform|net6) template.

Name the project and the solution UnoApp. Uno has a Shared project, and multiple platform specific projects contained in the Platforms folder.

3. Install LiveCharts from NuGet

You can install LiveChart from NuGet, in the Solution Explorer, right click on your solution, then Manage Nuget Packages for Solution, ensure the package source is nuget.org then in the Browse tab search for LiveChartsCore.SkiaSharpView.Uno (check the include prerelease checkbox), finally check all the projects to install LiveCharts on all the platforms in our project.

4. Add a Chart to the UI

Let’s start by defining a view model for your chart, in the Solution Explorer go to the Shared project and then open the MainPage.xaml.cs file, and add the next view model class:

				
					public class ViewModel
{
    public ISeries[] Series { get; set; }
        = new ISeries[] { new LineSeries<double> { Values = new double[] { 2, 1, 3, 5, 3, 4, 6 } } }; 
}
				
			

Now let’s add the control to the UI, in the Shared project go to MainPage.xaml file, add the namespace for LiveCharts (lvc) and for the view model we just created (local).

				
					xmlns:local="using:UnoApp"
xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Uno"
				
			

Set the Page.DataSource to our view model.

				
					<Page.DataContext>
    <local:ViewModel />
</Page.DataContext>
				
			

Finally add the chart and bind the Series property to our view model.

				
					<lvc:CartesianChart
    Series="{Binding Series}">
</lvc:CartesianChart>
				
			

Now run the UnoApp.Mobile project, and that’s it, we have LiveCharts2 running on Android!

LiveCharts2 running on Android

Now try running the UWP, WPF or GTK projects, the chart is ready to run everywhere! (we keep working on MacOS and iOS).

Summary

As you can see, getting started with the suite of controls in LiveCharts2 is easy.  Now you can start adding charts, maps and gauges to your UI using the LiveCharts2 cross-platform library. 

There are a lot of samples already built for Uno Platform, every card there opens an example that is ready to run in Uno Platform. The team is continuously improving the library since it is currently still in a beta phase, and continues to improve its looks, performance, and features as we progress to the final release.

Next Steps

If you are new to Uno Platform, the best way to get started is to follow our official getting started guide. (5 min to complete) This is part 1 of  2 Getting Started tutorials. You can find the second Tutorial here.

Share this post:
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Related Posts