How To Use Oxyplot Chart in Xamarin iOS
Published: 2020-02-24 10:50:46

---
title: How To Use Oxyplot Chart in Xamarin iOS
published: true
date: 2020-02-22 15:45:00 UTC
tags: 
canonical_url: https://logeshpalani.blogspot.com/2020/02/how-to-use-oxyplot-chart-in-xamarin-ios.html
---

[![](https://1.bp.blogspot.com/-8a3G-MGEa80/XlFBjlkUwhI/AAAAAAAAQKA/zYkbiqR0j8Iauzkld68lfMSPRyDN1HQXQCLcBGAsYHQ/s1600/Oxyplot%2BCharts%2Bin%2BXamarin%2BiOS.png)](https://1.bp.blogspot.com/-8a3G-MGEa80/XlFBjlkUwhI/AAAAAAAAQKA/zYkbiqR0j8Iauzkld68lfMSPRyDN1HQXQCLcBGAsYHQ/s1600/Oxyplot%2BCharts%2Bin%2BXamarin%2BiOS.png)

  

### Introduction

Showing data in a chart/graph is much easier to understand. In Xamarin iOS no default option to show the chart. We must use a third-party plugin to show charts. A lot of third-party plugins are paid like Syncfusion, Telerik. I recommend using Oxyplot charts because it's full of open-source and easy to use this in your project. In this article, we are going to learn how to use and understand the Oxyplot chart in Xamarin.iOS Project.

  

  

### **Let's start,**

Create _Xamarin iOS Single View Application_ in Visual Studio for Mac

  

Before start designing, we must install an _Oxyplot_ chart plugin from _NuGet Manager_ in your project_._

  

[![](https://1.bp.blogspot.com/-B-NKdxpsZXo/XlFBjOVTtsI/AAAAAAAAQKM/H_fdFr-F7zAB9iBBwbpT2t6rIl5Gm6PkgCEwYBhgL/s320/OTP%2BView%2Bin%2BXamarin%2BiOS.png)](https://1.bp.blogspot.com/-B-NKdxpsZXo/XlFBjOVTtsI/AAAAAAAAQKM/H_fdFr-F7zAB9iBBwbpT2t6rIl5Gm6PkgCEwYBhgL/s1600/OTP%2BView%2Bin%2BXamarin%2BiOS.png)

  

  

Now, open Main.Storyboard in Visual Studio designer, and drag the View from Toolbox and place as per your requirement and apply class as _PlotView_ in the properties window and set identity Name [Eg - plotview]

  

[![](https://1.bp.blogspot.com/-sIKr1tDz--E/XlFBjbH0LtI/AAAAAAAAQKU/bsVOtFjf8TwioL0m3aJxUIL-aowfw2B6ACEwYBhgL/s1600/Class%2BApply.png)](https://1.bp.blogspot.com/-sIKr1tDz--E/XlFBjbH0LtI/AAAAAAAAQKU/bsVOtFjf8TwioL0m3aJxUIL-aowfw2B6ACEwYBhgL/s1600/Class%2BApply.png)

  

  

Next, write your code in ViewController.cs file. Here the many different types of chart API will be available for use like Bar, Stack, Function, Pie Chart and etc,. Create PlotModel and set required properties as per your requirement and create the X, Y-axis, position, labels, zoom, angle, Max, Min, and other properties. The Zoom property for the zoom level of the chart. The Max, Min properties for avoiding more scrolling in the non-data representation in the chart, I mean you set min level is a zero, it will avoid minus(-) side-scrolling, because, we don't have data representation on minus side. Position property used to set the position of chart in the top, bottom, left or right side. Afterward, create Axis and Data Column Series. In the Column series also have different properties like color, width and etc,. Apply this X, Y-Axis and Column series to this PlotModel as we created first. Finally set this plotModel to PlotView as we designed in the Storyboard scene. Here is the full source code.

  

<script src="https://gist.github.com/logeshpalani98/b1c0557bbffc7ca0acc132389a95ac30.js"></script>  

Now, you can execute the project and the output like below.

  

[![](https://1.bp.blogspot.com/-NC2NQH7NZgM/XlFBkb85L1I/AAAAAAAAQKI/FxOTI0pKRLMtcsx-t0i2jwvcrAub1qR0QCEwYBhgL/s320/Screenshot%2B2020-02-11%2Bat%2B11.10.25%2BAM.png)](https://1.bp.blogspot.com/-NC2NQH7NZgM/XlFBkb85L1I/AAAAAAAAQKI/FxOTI0pKRLMtcsx-t0i2jwvcrAub1qR0QCEwYBhgL/s1600/Screenshot%2B2020-02-11%2Bat%2B11.10.25%2BAM.png)

  

  

Next, create another type of chart. Create a new Model named item.cs and write the below-given code. As usual use bar Charts and apply item model values to this plot chart. The code is given below.  
  
  

<script src="https://gist.github.com/logeshpalani98/6a2cdd23aca23687822bd4fb9ec3f4d6.js"></script>  

Run your project by pressing F5, you will get output like below.

  

[![](https://1.bp.blogspot.com/-NC2NQH7NZgM/XlFBkb85L1I/AAAAAAAAQKU/NtaeeLHy5qgW9TizXAMXZACMBW8hBfIiQCEwYBhgL/s320/Screenshot%2B2020-02-11%2Bat%2B11.10.25%2BAM.png)](https://1.bp.blogspot.com/-NC2NQH7NZgM/XlFBkb85L1I/AAAAAAAAQKU/NtaeeLHy5qgW9TizXAMXZACMBW8hBfIiQCEwYBhgL/s1600/Screenshot%2B2020-02-11%2Bat%2B11.10.25%2BAM.png)

  

  

The Full source code in _**[Github](https://github.com/logeshpalani98/Xamarin.iOS-Samples/blob/master/chartsDemo)**_

  

  

Summary

1. Install Xamarin.iOS.Oxtplot Plugin
2. Place View and apply PlotView class
3. Create PlotModel, Column Series, X and Y-Axis
4. Apply to PlotView

Thanks for reading.