https://github.com/ChristopherMWood/xamarin-chartjs-plugin
An easy to use Nuget Package for Xamarin.Forms to use Chart.js in WebViews with C# configuration
https://github.com/ChristopherMWood/xamarin-chartjs-plugin
Last synced: 2 days ago
JSON representation
An easy to use Nuget Package for Xamarin.Forms to use Chart.js in WebViews with C# configuration
- Host: GitHub
- URL: https://github.com/ChristopherMWood/xamarin-chartjs-plugin
- Owner: ChristopherMWood
- Created: 2021-04-28T00:12:52.000Z (about 4 years ago)
- Default Branch: development
- Last Pushed: 2022-11-19T21:36:33.000Z (over 2 years ago)
- Last Synced: 2025-04-20T16:45:27.270Z (19 days ago)
- Language: C#
- Size: 551 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-xamarin-forms - XamarinChartJSPlugin ★11
README
XamarinChartJS
[](https://github.com/ChristopherMWood/XamarinChartJSPlugin/actions/workflows/dotnet.yml)
**NOTE:** This plugin has been deprecated and is no longer actively maintained due to the release of .NET Maui. I do not have plans to port it over as of this time.
## About
Nuget: https://www.nuget.org/packages/Xamarin.Plugin.ChartJS
An easy to use (or at least intented to be easy) Nuget Package for Xamarin.Forms to use Chart.js in Xamarin with C# configurations. This came about because looking for a full featured charting library that doesn't cost hundreds if not thousands for a license on Mobile is not easy. And when you find an open source native library, they are pretty good but nothing compared to what the Web world has had for so long. In my research I found a proof of concept of the idea of using Charts in WebViews and I extended that idea with Chart.js, one of my favorite Web charting frameworks.
## Features
- 100% C# Configuration
- Bindings support for View and Chart configuration
- Runs Offline
## Current Target Versions
| Platform | Version | Why |
| ------------- | ------------- | -------------
| Chart.js | 3.2.0 | Latest version on initial development. Other versions have not been tested but may work. |
## Setup
### Install Plugin
- Add ```Xamarin.Plugin.ChartJS``` into your Xamarin Shared project only.
**Note:** The plugin only needs to be installed in the shared project right now. In upcoming versions, the plan is to add custom renderers to enable some extra features and more clean cross platform usage.
### Add Local Chart.js File
For the plugin to work, you must add a copy of Chart.js ```3.2.0``` to both iOS and Android projects as shown below. This is what enables it to work offline.
You can download it from here: following link [Chart.js 3.2.0 CDN Link](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js)
- Android
1. Add the file downloaded above to your ```Assets``` Android folder and name it ```chart.min.js```
2. Set the ```Build Action``` to ```AndroidAsset```
- iOS
1. Add the file downloaded above to your ```Resources``` iOS folder and name it ```chart.min.js```
2. Set the ```Build Action``` to ```BundleResource```
## How to Use
The best way to see examples is to clone the repo and run the Sample project. A working version of Android and iOS are implemented there with examples of all use cases used during development. As new features are added and bugs found, more examples will be added there for clarity. Below is the TLDR if needed.
### TLDR Setup
Add this to your XAML header
```cs
xmlns:views="clr-namespace:Plugin.XamarinChartJS;assembly=Xamarin.Plugin.ChartJS"
```
Add this into your page content
```cs
```
Add a chart Config that can be binded to in your backend (page or viewModel)
```cs
public ChartViewConfig ChartConfig { get; set; }
```
**Note:** You can also dynamically add ChartViews purely from code as you would any other view.
### Configuring the Chart
The ```ChartViewConfig``` object contains two things. The view settings and the Chart.js configuration which is meant to be 1-1 with the Javscript settings provided by Chart.js. All properties in this object are bound to the ChartView so if you change them, the Chart will dynamically update from that.
```cs
public Color BackgroundColor //The views background color
public ChartConfig ChartConfig //The Chart.js config
// More to be added as needed
```
To configure the ```ChartConfig``` object, refer to the documentation on https://www.chartjs.org/ since it is just an extension of the JSON config specified there.
### Helper Values
Where possible, helper constants and values are being added to help prevent typos. Below are some of what is available.
```cs
Plugin.XamarinChartJS.ChartTypes //String constants for all Chart Types (line, bar, etc...)
```