Search code examples
c#xamarin.formsoxyplot

Oxyplot Bar Width


I am using Oxyplot to make bar chart. Is there anyway to change the width of the bar?

I found this solution:

protected override double GetActualBarWidth()
{
    var categoryAxis = this.GetCategoryAxis();
    return this.ColumnWidth / (1 + categoryAxis.GapWidth) / categoryAxis.MaxWidth;
}

From here:

How do I set the width of the bars in an Oxyplot column plot?

But I don't understand how to apply it.

Here is my code:

<ContentPage.BindingContext>
        <local:MainPageViewModel></local:MainPageViewModel>
    </ContentPage.BindingContext>
<oxy:PlotView Model="{Binding Model}" HeightRequest="200" />

And here is my view model:

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

        public MainPageViewModel()
        {
            CategoryAxis xaxis = new CategoryAxis();
            xaxis.Position = AxisPosition.Bottom;
            xaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            xaxis.MinorTickSize = 0;
            xaxis.MajorTickSize = 0;
            xaxis.TextColor = OxyColors.Gray;
            xaxis.FontSize = 10.0;
            xaxis.Labels.Add("S");
            xaxis.Labels.Add("M");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("W");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("F");
            xaxis.Labels.Add("S");

            LinearAxis yaxis = new LinearAxis();
            yaxis.Position = AxisPosition.Left;
            yaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            yaxis.MinorTickSize = 0;
            yaxis.MajorTickSize = 0;
            yaxis.TextColor = OxyColors.Gray;
            yaxis.FontSize = 10.0;
            yaxis.FontWeight = FontWeights.Bold;

            ColumnSeries s2 = new ColumnSeries();
            s2.LabelPlacement = LabelPlacement.Inside;
            s2.LabelFormatString = "{0}";
            s2.TextColor = OxyColors.White;
            s2.ColumnWidth = 5.0;
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(20),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")
           
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });
            

            Model = new PlotModel();
            Model.Axes.Add(xaxis);
            Model.Axes.Add(yaxis);
            Model.Series.Add(s2);
            Model.PlotAreaBorderColor = OxyColors.Transparent;
        }

    }

Solution

  • You could achieve it by changing GapWidth. The larger the value, the smaller the width.

      xaxis.GapWidth = 10;