ndubuisijr/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

skia-chart's Issues

Add point markers for AreaChart

[Question] Live Graph

Hello together!

First of all, great Plugin! I'm really glad i found it!

Now to my Question: Is it possible to add Points at runtime?
I have a device which changes its speed and i want to show that over the time in a LineChart.
Is it possible ? As i didn't found a way to do it yet but maybe i'm overseeing something.

Greetings bluekuen

Add point markers for Line Chart

Area Chart Request

This library doesn't have an implementation for Area chart yet.

Box Chart Request

This library doesn't have an implementation of Box Chart yet.

No Legend, Title and Axis labels for all chart implementation

Scatter Chart Requesting

This library doesn't have an implementation of Scatter Chart yet

Donut Chart Request

This library doesn't have an implementation of Donut Chart yet.

how to use via nuget?

I didn't understand how SkiaSharp works. Do I have to import the entire project?
I was unable to import the classes with the nuget library installed.

Pie Chart Request

This library doesn't have an implementation for Pie Charts yet.

Maximum number of chart

Hello,

Why there is a limit of maximum number of chart to plot?

Thank you

Radar Chart Request

This library doesn't have an implementation of Radar Chart yet.

Candle stick Chart Request

[Enhancement] Zoom In Out and Scale X,Y funtionality

Line chart can have large data set.So user should be able to drag X,Y position and Zoom In Out to see all the data sets properly

Realtime Moving Line Chart

I would like to make a line chart that the data changes are runtime and moves to the left.

I don't see any way to modify the ConstructionData at runtime, so I added some code to do so.

The issue I now have is how to trigger the canvas to update. The object I have access to is the LineChart and the Chart. I can't seem to make the connection to the CanvasChart to invalidate the Skia canvas.

How do I do this?

Tilt labels for barchart

Integrate spline algorithm to smoothen the curves in line Chart

How to increase size of labels in graph?

How to increase size of labels in graph?
they look very small on android

A little beautification

Hi

I have tested skia-chart on Android, UWP and macOS. It works really well!

In my copy of skia-chart I have made a couple of changes that I think makes it look better on my devices. I have attached a diff of the files I have changed and the changed files.

Best
Eigil
skia-chart-diff.zip

Gauge Chart Request