Search code examples
xamarin.androidmvvmcrossoxyplot

Oxyplot graph takes up whole screen for display


I just started using using oxyplot library for my project. I successfully added a donut chart in my project but the problem with this is that it takes up the whole screen to show the graph. Is tried so many way to solve this but none of them worked.

Here is my axml:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    local:layout_behavior="@string/appbar_scrolling_view_behavior" >
    <OxyPlot.Xamarin.Android.PlotView
        android:id="@+id/plot_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        local:MvxBind="Model DonutChart"/>
    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            local:MvxBind="Text TestText1" />
    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            local:MvxBind="Text TestText2" />
    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            local:MvxBind="Text TestText3" />
</LinearLayout>

Here is the graph method:

private void GeneratePlotModel()
    {
        var plotmodel = new PlotModel();

        var seriesP1 = new PieSeries
        {
            Stroke = OxyColors.Transparent,
            StrokeThickness = 2.0,
            InsideLabelPosition = 0.0,
            AngleSpan = 360,
            StartAngle = 0,
            InnerDiameter = 0.7,
            OutsideLabelFormat = null,
            InsideLabelFormat = null,
            TickHorizontalLength = 0.0,
            TickRadialLength = 0.0
        };

        seriesP1.Slices.Add(new PieSlice("Test 1", test1) { IsExploded = false, Fill = OxyColors.Blue });
        seriesP1.Slices.Add(new PieSlice("Test 2", test2) { IsExploded = false, Fill = OxyColors.Green });
        seriesP1.Slices.Add(new PieSlice("Test 3", test3) { IsExploded = false, Fill = OxyColors.Red });

        plotmodel.Series.Add(seriesP1);

        DonutChart = plotmodel;
    }

Here is my plotmodel property:

private PlotModel _donutChart ;
    public PlotModel DonutChart 
    {
        get => _donutChart ;
        set
        {
            if (_donutChart == value)
                return;

            _donutChart = value;
            RaisePropertyChanged(nameof(DonutChart ));
        }
    }

Solution

  • It takes up the whole screen to show the graph because you set

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    

    And you can make it only takes patial space by adding

    android:layout_weight="1"

    So the layout is like this:

    <OxyPlot.Xamarin.Android.PlotView
            android:id="@+id/plot_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            local:MvxBind="Model DonutChart"/>