SkiaChart.Forms 1.2.60

by Ndubuisi Jr Chukuigwe

skia-chart

A simple xamarin.Forms chart library, built on top of the skiasharp.views.forms library. This library is developed with engineering and statistics in mind. It might not be the prettiest but it will visualize your data appropriately.

Supported Charts

• Line Chart.
• Bar Chart.
• Scatter Chart.
• Area Chart.
• Radial Chart.
• Donut Chart.

Features

• Horizontal axis title.
• Vertical axis title.
• Legend
• Point markers for line and area charts.
• Plots multiple line chart on the same axis.
• Plots multiple bars on the same axis.
• Plots multiple scatter points on the same axis.
• Plots multiple area charts on the same axis.

Supported Platforms

• Android
• IOS
• UWP
• macOS
• GTK
• WPF

Getting Started

• Open Nuget package manager for solution
• Search for SkiaChart.Forms
• Install on all the projects

Code Example

Line Chart

XAML-page

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:d="http://xamarin.com/schemas/2014/forms/design"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:chartview="clr-namespace:SkiaChart.Views;assembly=SkiaChart"
           xmlns:chart="clr-namespace:SkiaChart.Charts;assembly=SkiaChart"
           xmlns:viewModels="clr-namespace:TestApp.ViewModels"
           x:Class="TestApp.Views.LineChartView"
           >
  <ContentPage.BindingContext>
      <viewModels:LineChartViewModel/>
  </ContentPage.BindingContext>
  
  <chartview:ChartCanvas x:TypeArguments="chart:LineChart" x:Name="chartView" 
                         Chart="{Binding Chart}" GridLines="10" />
</ContentPage>

see <a href="https://github.com/NdubuisiJr/skia-chart/tree/master/TestApp/TestApp">Test App<a/> for typical bindings.

<p> <img src="https://github.com/NdubuisiJr/skia-chart/blob/master/ProjectFiles/Screenshot_1585258837.png" width="175" title="Line Chart"> </p>

Bar Chart

XAML-page

<?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:d="http://xamarin.com/schemas/2014/forms/design"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:chartview="clr-namespace:SkiaChart.Views;assembly=SkiaChart"
           xmlns:chart="clr-namespace:SkiaChart.Charts;assembly=SkiaChart"
           xmlns:viewModels="clr-namespace:TestApp.ViewModels"
           x:Class="TestApp.Views.BarChartPage">   
  <ContentPage.BindingContext>
      <viewModels:BarChartViewModel/>
  </ContentPage.BindingContext>
  <chartview:ChartCanvas x:TypeArguments="chart:BarChart" x:Name="chartView" Chart="{Binding Chart}"
                         GridLines="10" GridColor="{Binding GridColor}" />
</ContentPage>

see <a href="https://github.com/NdubuisiJr/skia-chart/tree/master/TestApp/TestApp">Test App<a/> for typical bindings. <p> <img src="https://github.com/NdubuisiJr/skia-chart/blob/master/ProjectFiles/Screenshot_1585492508.png" width="175" title="Bar chart"> </p>

Scatter Chart

XAML-page

<?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:d="http://xamarin.com/schemas/2014/forms/design"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:chartview="clr-namespace:SkiaChart.Views;assembly=SkiaChart"
           xmlns:chart="clr-namespace:SkiaChart.Charts;assembly=SkiaChart"
           xmlns:viewModels="clr-namespace:TestApp.ViewModels"
           x:Class="TestApp.Views.BarChartPage">   
  <ContentPage.BindingContext>
      <viewModels:ScatterChartViewModel/>
  </ContentPage.BindingContext>
  <chartview:ChartCanvas x:TypeArguments="chart:ScatterChart" x:Name="chartView" Chart="{Binding Chart}"
                         GridLines="10" GridColor="{Binding GridColor}" />
</ContentPage>

see <a href="https://github.com/NdubuisiJr/skia-chart/tree/master/TestApp/TestApp">Test App<a/> for typical bindings. <p> <img src="https://github.com/NdubuisiJr/skia-chart/blob/master/ProjectFiles/Screenshot_1585603936.png" width="175" title="Scatter chart"> </p>

Tutorials - Watch the YouTube video below:

<br/> Full tutorial series

Contributing

• Create a Fork from this repository.
• Clone your fork into your work station.
• Switch to the development branch.
• Make your changes on the development branch.
• Push your changes to your fork.
• Create a pull request back to the main repository.
• Add a new remote called upstream to point to the main repository.

License

This project is licensed under the MIT License - see the LICENSE file for details