Pie chart label positioning

[Mal]

Hi,

I seem to be having trouble with the way that labels are rendered for the pie chart.
Labels go off the side of the chart area

Please see the attached image.

all of the settings I am using are as follows:

 InteractivitySettings iss = new InteractivitySettings();             
iss.HoverScope = InteractivityScope.Item;             
iss.SelectionScope = InteractivityScope.Item;             
iss.SelectionMode = ChartSelectionMode.Single;             
//def.RadiusFactor = 0.8;             
RadialLabelSettings radialSettings = new RadialLabelSettings();             
radialSettings.SpiderModeEnabled = true;             
radialSettings.ShowConnectors = true;             
//radialSettings.LabelOffset = 0.2;             
radialSettings.Distance = 5; /*This seems to have no effect*/

The chart has a fixed width and height of 300.
Any help would be appreciated
thanks

Mal

[Peshito]

Hello Mal,

Seems like your settings are initialized but not used. Try using the  following code behind instead:

(pieSeries.SeriesDefinition as RadialSeriesDefinition).LabelSettings.SpiderModeEnabled = true;
(pieSeries.SeriesDefinition as RadialSeriesDefinition).LabelSettings.ShowConnectors = true;
(pieSeries.SeriesDefinition as RadialSeriesDefinition).LabelSettings.Distance = 5;

Manipulating the Distance value will result in changing your labels position.

Alternatively you can disable the SpiderMode and ShowConnectors properties and enable the LabelOffset like:
(pieSeries.SeriesDefinition as RadialSeriesDefinition).LabelSettings.LabelOffset = 1

Another solution would be changing the size of your chart.

Best wishes,
Peshito
the Telerik team

[Mal]

Hi Peshito,

Thanks for that, I increased the sizze of the chart to 600 by 600. But the same problem still exists (please see the attached image).

Here is all the code that I am using;

            ISeriesDefinition def = null;                      
           def = new PieSeriesDefinition();
           GraphHelper.SetCommonPieChartVisuals((PieSeriesDefinition)def); 
           radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = 0;             
            radChart.SeriesMappings.Clear();
 
            SeriesMapping seriesMapping = new SeriesMapping();
            seriesMapping.SeriesDefinition = def;
            seriesMapping.ItemMappings.Add(new ItemMapping("AxisXLabel", DataPointMember.XCategory));
            seriesMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
            seriesMapping.ItemMappings.Add(new ItemMapping("AxisXLabel", DataPointMember.Label));
 
            radChart.SeriesMappings.Add(seriesMapping);
 
            GraphHelper.SetCommonGraphSettings(radChart);
 
            radChart.DefaultView.ChartLegend = null;
            radChart.ItemsSource = points;

  public static void SetCommonPieChartVisuals(ISeriesDefinition def)
        {
            InteractivitySettings iss = new InteractivitySettings();
            iss.HoverScope = InteractivityScope.Item;
            iss.SelectionScope = InteractivityScope.Item;
            iss.SelectionMode = ChartSelectionMode.Single;
 
            //def.RadiusFactor = 0.8;
 
            RadialLabelSettings radialSettings = new RadialLabelSettings();
            radialSettings.SpiderModeEnabled = true;
            radialSettings.ShowConnectors = true;
            //radialSettings.LabelOffset = 0.2;
            radialSettings.Distance = 5;
            if (def is PieSeriesDefinition)
                ((PieSeriesDefinition)def).LabelSettings = radialSettings;
            else if (def is DoughnutSeriesDefinition)
                ((DoughnutSeriesDefinition)def).LabelSettings = radialSettings;
 
            def.InteractivitySettings = iss;
        }

  public static void SetCommonGraphSettings(RadChart chart)
        {
 
            foreach (var sm in chart.SeriesMappings)
            {
                ISeriesDefinition def = sm.SeriesDefinition; 
                def.AnimationSettings = new AnimationSettings();
                //Faster Animations
                def.AnimationSettings.ItemAnimationDuration = new TimeSpan(0, 0, 0, 0, 100);
                def.AnimationSettings.TotalSeriesAnimationDuration = new TimeSpan(0, 0, 2);
 
                def.ShowItemToolTips = true;
 
                if (!(def is PieSeriesDefinition) && !(def is DoughnutSeriesDefinition))
                {
                    def.ShowItemLabels = false;                    
                }
            }
 
            chart.DefaultView.ChartArea.SmartLabelsEnabled = true;
            chart.DefaultView.ChartArea.AxisX.StripLinesVisibility = System.Windows.Visibility.Collapsed;
            chart.DefaultView.ChartArea.AxisY.StripLinesVisibility = System.Windows.Visibility.Collapsed;
            chart.SamplingSettings = new SamplingSettings() { SamplingThreshold = 0 };
            chart.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(0.0, 1.0);
            chart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
 
            //Turn off scientific label formatting
            chart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;         
            //Remove any chart area padding
            //chart.DefaultView.ChartArea.Padding = new Thickness(0, 0, 0, 0); 
 
            //Chart Legend settings
            if (chart.DefaultView.ChartLegend != null)
            {
                chart.DefaultView.ChartLegend.Background = new SolidColorBrush(Colors.Transparent);
                chart.DefaultView.ChartLegend.BorderThickness = new Thickness(0);
            }
 
 
            DefinePaletteBrushes(chart);
        }

The distance setting, also does not seem to have any effect, see the second attached image with the distance set to 50.

This seems like fairly basic functionality, so I'm figuring I must be doing something wrong.

Any help is appreciated.

[Peshito]

Hi Mal,

When the chart size is increased the pie fills in the space available and this is why the labels are still not quite visible. As I see from your code you've set the RadiusFactor but then you've commented it. The RadiusFactor property will decrease the size of the pie and there will be enough space available for the labels to be displayed. Try setting it and use appropriate value that would make your pie smaller.

I've attached a sample project where I have set a RadusFactor and Labels distance. As a result, the pie size and the labels distance are changed depending on the values I've used.

In case you'd like to use Label Offset, you need to set the SpiderModeEnabled to false and then setting the offset.

Kind regards,
Peshito
the Telerik team

[Saravanan]

Thank you very much for your code.

i have 3 question here,please answer this..

1) i want to show show simple circle with colour when all the value's are zero..

   like..
      List<ChartData> data = new List<ChartData>();
            data.Add(new ChartData("10%", 0));
            data.Add(new ChartData("20%", 0));
            data.Add(new ChartData("30%", 0));
            pieChart.ItemsSource = data;
currently its shows label with 0% perecentage..Please find the atachement here..(I want to show chat with colour when all values zero)

2) How to Reduce the shadow circle size ( inside the chart i can see a gradient circle which is beautify the chart)..i want to reduce the size ..then only  i will get bubble effect.. plz find the attachement here..

3 ) how to change the pie chart slice colour..

Thank you
Saravanan

[Sia]

Hello Saravanan,

Please find our answer in the other forum thread. Please try to keep the correspondence concerning one issue in one thread since in that way you will receive more adequate and accurate answers.

Thank you,
Sia
the Telerik team

[Saravanan]

Hi team sorry for inconvenience,

actually i need to show the pie chart when i mouse over the button,by default the button gives two values,(value1,Value2),

sometime it gives one value(Value1),or (Value2).sometimes it wont give values like (Value1=0 and Value2=0)..

if two values are zero then i need to show chart with only one colour(gray) without label..please find the attachment here,

if anyone value is zero i need show circle wtih value colour with label name (let say blue colour with label name 59%).

i used this coverter code to remove zero labels here i can see a single line..

 her is my code behind
Load Event
{
  radchart1.ItemsSource=WellData;
}
 public class OilWellData
    {
        public string WellName {get;set;}

        public double Percentage {get;set;}

        public static ObservableCollection<OilWellData> GetData()
        {
            ObservableCollection<OilWellData> WellData = new ObservableCollection<OilWellData>();
            WellData.Add(new OilWellData { WellName = "name1", Value1= 0 });//Blue Colour
            WellData.Add(new OilWellData { WellName = "name2", Value2= 0 });//Green Colour

            return WellData;
        }
    }
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            DataPoint point = new DataPoint();
            if (point.YValue == 0)
            {
                PieSeriesDefinition da = new PieSeriesDefinition();
                return Visibility.Collapsed;
            }
            return Visibility.Visible;
        }

But when i use this code..its working fine.

.But the problem is have to avoid code behind because i am using MVVM Pattern

 void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
  {
            if (e.DataPoint.YValue == 0)

              e.DataPoint.DataSeries.Remove(e.DataPoint);

    }

please give me any idea..

Also i want to change piechat slice color to transperent..find the attachement here
Thanks
Saravanan

[Sia]

Hello Saravanan,

As I said in my previous answer you can hide the zero values if you use the ShowZeroValueLabels property. Regarding the pie slices' stroke - it can be set to be transparent through the exposed appearance API. All this can be done in XAML. See below:

<telerikChart:RadChart Name="Chart">
    <telerikChart:RadChart.DefaultView>
        <telerikCharting:ChartDefaultView>
            <telerikCharting:ChartDefaultView.ChartLegend>
                <telerikCharting:ChartLegend x:Name="ChartLegend" />
            </telerikCharting:ChartDefaultView.ChartLegend>
            <telerikCharting:ChartDefaultView.ChartArea>
                <telerikCharting:ChartArea Name="ChartArea" LegendName="ChartLegend">
                    <telerikCharting:ChartArea.DataSeries>
                        <telerikCharting:DataSeries>
                            <telerikCharting:DataSeries.Definition>
                                <telerikCharting:PieSeriesDefinition ItemLabelFormat="#%{p0}">
                                    <telerikCharting:PieSeriesDefinition.Appearance>
                                        <telerikCharting:SeriesAppearanceSettings Stroke="Transparent" />
                                    </telerikCharting:PieSeriesDefinition.Appearance>
                                    <telerikCharting:PieSeriesDefinition.LabelSettings>
                                        <telerikCharting:RadialLabelSettings ShowZeroValueLabels="False" />
                                    </telerikCharting:PieSeriesDefinition.LabelSettings>
                                </telerikCharting:PieSeriesDefinition>
                            </telerikCharting:DataSeries.Definition>
                            <telerikCharting:DataPoint YValue="10" />
                            <telerikCharting:DataPoint YValue="10" />
                            <telerikCharting:DataPoint YValue="0" />
                        </telerikCharting:DataSeries>
                    </telerikCharting:ChartArea.DataSeries>
                </telerikCharting:ChartArea>
            </telerikCharting:ChartDefaultView.ChartArea>
        </telerikCharting:ChartDefaultView>
    </telerikChart:RadChart.DefaultView>
</telerikChart:RadChart>

Regards,
Sia
the Telerik team

[Saravanan]

Hi Sia,

Thank you very much for your code, this what i want..thanks lot,i have one more question here,

if all values zero then chat will not visible like

<telerikCharting:DataPoint YValue="0" />
<telerikCharting:DataPoint YValue="0" />

but requirement is if all values are zero then i need to show chat with gray colour.

for this i came with one solution if all values are zero i give only one Yvalue=100.

then chat will be visible..its ok but i dont know how to change the colour..dynamically,

i am binding YValue with properties ...like

<telerikCharting:DataPoint YValue="{Binding WaterPercentage}" />
 <telerikCharting:DataPoint YValue="{Binding OilPercentage}" />

Do you have any idea to change the pie chat colours using property  for example..i tried with code but it not working

 <telerik:RadChart.PaletteBrushes>

   <SolidColorBrush Color="{Binding PalleteBlueColour}" />
    SolidColorBrush Color="{Binding PalleteGreenColour}" />
</telerik:RadChart.PaletteBrushes>

in my Class file

   public double WaterPercentage { get; set; }

    public double OilPercentage { get; set; }

    private BrushCollection PaleteBlueColour { get; set; }

    private BrushCollection PaleteGreenColour { get; set; }

        public static ObservableCollection<OilWellData> GetData()
        {
            ObservableCollection<OilWellData> WellData = new ObservableCollection<OilWellData>();
            WellData.Add(new OilWellData { WellName = "name1", WaterPercentage = 80, PaleteBlueColour=new SolidColorBrush(Colors.Blue) });//Blue Colour
            WellData.Add(new OilWellData { WellName = "name2", OilPercentage = 20, PaleteGreenColour=new SolidColorBrush(Colors.Blue) } });//Green Colour


            return WellData;
        }


Thank You,
Saravanan

[Sia]

Hi Saravanan,

You can find my answer in the other forum threads you opened:

• Issue 1
• Issue 2

Greetings,
Sia
the Telerik team