Xamarin Forms OxyPlot for Bar charts

Question

I'm Working on Xamarin.Forms application where I want to implement bar charts as attached in screenshot. There are no such control in Xamarin.Forms, so I'm using OxyPlot nuget package for that, but the problem is that the bars in oxyplot are Horizontal and there is no option for grid lines inside graph plot. is there any open source Library for the bar graphs so that I can use.

Answer 1

You can do it with OxyPlot using ColumnSeries. Try this MCVE:

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App2"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="App2.MainPage">

    <ContentPage.BindingContext>
        <local:MyViewModel></local:MyViewModel>
    </ContentPage.BindingContext>

    <oxy:PlotView Model="{Binding Model}"/>

</ContentPage>

View Model:

using OxyPlot;
using OxyPlot.Series;
using OxyPlot.Axes;

public class MyViewModel
{
    public PlotModel Model { get; set; }

    public MyViewModel()
    {
        CategoryAxis xaxis = new CategoryAxis();
        xaxis.Position = AxisPosition.Bottom;
        xaxis.MajorGridlineStyle = LineStyle.Solid;
        xaxis.MinorGridlineStyle = LineStyle.Dot;
        xaxis.Labels.Add("Mon, 4/24");
        xaxis.Labels.Add("Tue, 4/25");
        xaxis.Labels.Add("Wed, 4/26");
        xaxis.Labels.Add("Thu, 4/27");

        LinearAxis yaxis = new LinearAxis();
        yaxis.Position = AxisPosition.Left;
        yaxis.MajorGridlineStyle = LineStyle.Dot;
        xaxis.MinorGridlineStyle = LineStyle.Dot;

        ColumnSeries s1 = new ColumnSeries();
        s1.IsStacked = true;
        s1.Items.Add(new ColumnItem(20));
        s1.Items.Add(new ColumnItem(60));
        s1.Items.Add(new ColumnItem(40));
        s1.Items.Add(new ColumnItem(50));

        ColumnSeries s2 = new ColumnSeries();
        s2.IsStacked = true;
        s2.Items.Add(new ColumnItem(50));
        s2.Items.Add(new ColumnItem(30));
        s2.Items.Add(new ColumnItem(10));
        s2.Items.Add(new ColumnItem(20));

        Model = new PlotModel();
        Model.Title = "Xamarin Oxyplot Sample";
        Model.Background = OxyColors.Gray;

        Model.Axes.Add(xaxis);
        Model.Axes.Add(yaxis);
        Model.Series.Add(s1);
        Model.Series.Add(s2);
    }
}