Search code examples
c#xamarinchartsxamarin.formsoxyplot

Xamarin.Forms: Putting A Label Inside A PieChart Layout


Good Day. I'm creating a Xamarin.Forms Portable Application where I was able to display there a Chart using OxyPlot.

My problem is how am I going to put a TOTAL SALES label in there. Because even if I put the Label in my .XAML page, it doesn't not appear.

I want to put the Label there (inside the Red Border).

enter image description here

What do you think I should do in order to have this?

Here's my code:

SalesViewModel.cs

using OxyPlot;
using OxyPlot.Series;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;


namespace XamarinFormsDemo.ViewModels
{
    public class SalesPerProductViewModel : INotifyPropertyChanged
    {
    private PlotModel modelP1;
    public SalesPerProductViewModel()
    {
        // PieViewModel vm = new PieViewModel();

        modelP1 = new PlotModel
        {
            Title = "Sales Per Product",
            TitleColor = OxyColors.Teal,
            TitleFontSize = 30,
            TextColor = OxyColors.White,
            DefaultFont = "Arial Black",
            DefaultFontSize = 20

        };


        dynamic seriesP1 = new PieSeries { StrokeThickness = 2.0, InsideLabelPosition = 0.8, AngleSpan = 360, StartAngle = 0 };

        seriesP1.Slices.Add(new PieSlice("Keyboard", 5900) { IsExploded = false, Fill = OxyColors.Teal });
        seriesP1.Slices.Add(new PieSlice("Monitor", 4430) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("Flash Drive", 11620) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("Hard Drive", 7000) { IsExploded = true });
        seriesP1.Slices.Add(new PieSlice("RAM", 8000) { IsExploded = true });

        modelP1.Series.Add(seriesP1);
        this.SalesPerProductModel = modelP1;

    }

    public PlotModel SalesPerProductModel { get; private set; }



    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    }
}

SalesPerProductPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         x:Class="XamarinFormsDemo.Views.SalesPerProductPage"
         BackgroundImage="bg3.jpg"
         Title="Sales Per Product">


  <ContentPage.BindingContext>
    <ViewModels:SalesPerProductViewModel/>
  </ContentPage.BindingContext>



  <Label Text="TOTAL SALES LABEL HERE!"
   TextColor="#24e97d"/>

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

Solution

  • You can achieve that by using TextAnnotation:

            List<Tuple<string, int>> data = new List<Tuple<string, int>>
            {
                new Tuple<string, int>("Product 1", 100),
                new Tuple<string, int>("Product 2", 200),
                new Tuple<string, int>("Product 3", 300),
                new Tuple<string, int>("Product 4", 400),
                new Tuple<string, int>("Product 5", 500),
            };
    
            PieSeries pieSeries = new PieSeries();
            pieSeries.FontSize = 32;
            pieSeries.TextColor = OxyColors.White;
            pieSeries.InsideLabelColor = OxyColors.White;
            pieSeries.StrokeThickness = 2;
    
            foreach (Tuple<string, int> t in data)
                pieSeries.Slices.Add(new PieSlice(t.Item1, t.Item2));
    
            MyModel.Series.Add(pieSeries);
    
            MyModel.Title = "Sales Per Product";
            MyModel.TitleColor = OxyColors.Teal;
            MyModel.TitleFontSize = 36;
    
            MyModel.Axes.Add(new LinearAxis() { Position = AxisPosition.Bottom, IsAxisVisible = false });
            MyModel.Axes.Add(new LinearAxis() { Position = AxisPosition.Left, IsAxisVisible = false });
    
            int total = data.Sum(p => p.Item2);
    
            TextAnnotation annotation = new TextAnnotation();
            annotation.Text = string.Format("{0:C2}", total);
            annotation.TextColor = OxyColors.Red;
            annotation.Stroke = OxyColors.Red;
            annotation.StrokeThickness = 5;
            annotation.FontSize = 36;
            annotation.TextPosition = new DataPoint(15, 90);
    
            MyModel.Annotations.Add(annotation);
    

    enter image description here