Search code examples
c#wpftelerik

WPF Pie Chart how to add space between slices?


I am using Telerik (RadPieChart) with WPF. How can I add space between the slices ?

This is what I currently have: enter image description here

And this is how I want my Pie chart to look like with the spaces between the slices: enter image description here

Here is my source code:

private DoughnutSeries CreateDognutSerie(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSerie, int index, int count)
    {
        double spaceBetweenSperies = 0.0;
        if (count > 1 && index != count - 1)
        {
            spaceBetweenSperies = 0.007;
        }

        var doughnutSerie = new DoughnutSeries()
        {
            ShowLabels = true,
            //LabelConnectorsSettings = new ChartSeriesLabelConnectorsSettings()
            //{

            //},
            InnerRadiusFactor = index / (double)count,
            RadiusFactor      = ((index + 1) / (double)count) - spaceBetweenSperies,
            //LegendSettings = new DataPointLegendSettings()
            //{

            //},
            //SeriesAnimation = new PieChartAngleRangeAnimation()
            //{
            //    InitialStartAngle = -90,
            //    InitialSweepAngle = 180,
            //    Duration          = new TimeSpan(0, 0, 0, 0, 800),
            //}
        };
        foreach (ChartDataPoint serie in chartSerie.Value)
        {
            doughnutSerie.DataPoints.Add(new PieDataPoint()
            {
                Label = serie.XPoint.Label,
                Value = Math.Abs((double?)serie.Value ?? 0),
            });
        }

        return doughnutSerie;
    }

Solution

  • Use the OffsetFromCenter property in PieDataPoint. Something like OffsetFromCenter = 0.015 should be similar to the above image.

    public MainWindow()
    {
        InitializeComponent();
    
        var data = new Dictionary<string, double>
        {
            { "January", 5 },
            { "February", 3 },
            { "March", 5 },
            { "April", 7 },
            { "May", 2 },
            { "June", 11 },
            { "July", 11 },
            { "August", 11 },
            { "September", 11 },
            { "October", 11 },
            { "November", 11 },
            { "December", 12 },
        };
    
        var series = CreateDougnutSeries(data);
        var pie = new RadPieChart { Palette = ChartPalettes.Fluent };
        pie.Series.Add(series);
    
        mainGrid.Children.Add(pie);
    
    }
    
    private DoughnutSeries CreateDougnutSeries(Dictionary<string, double> data)
    {
        var doughnutSeries = new DoughnutSeries
        {
            ShowLabels = true,
            InnerRadiusFactor = 0,
            RadiusFactor = 1
        };
    
        foreach (var point in data)
        {
            doughnutSeries.DataPoints.Add(new PieDataPoint()
            {
                Label = point.Key,
                Value = point.Value,
                OffsetFromCenter = 0.015
            });
        }
    
        return doughnutSeries;
    }
    

    PieChart

    Increasing OffsetFromCenter to say 0.1 will render thicker lines:

    enter image description here