watch-later/skia-chart

A simple xamarin.Forms chart library, built on top of the skiasharp.views.forms library

_{Built with ❤︎ 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

Gallery - Display on Android, IOS, UWP, GTK, WPF and macOS

Gallery - Without Legend and Title

/

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 Test App for typical bindings.

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 Test App for typical bindings.

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 Test App for typical bindings.

Tutorials - Watch the YouTube video below:

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