Donut RadChart View Overlap And Not Show the smart label, (using smartlabel and donut series)

1 Answer 27 Views
ChartView Label
Top achievements
Rank 2
Genda asked on 20 May 2021, 08:11 AM

I have a problem about the donut chart and the labels that are displayed ..

How do I organize and display labels that are not drawn due to the previously set space, so that they become visible? thank you, I hope someone finds a solution to this problem ..


1 Answer, 1 is accepted

Sort by
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 May 2021, 11:35 AM

Hello, Genda,

RadChartView’s SmartLabelsController uses strategies specific to different chart types to resolve label overlaps. The default available strategies are FourPositionsLabelsStrategy, EightPositionsLabelsStrategy, PieTwoLabelColumnsStrategy, VerticalAdjusmentLabelsStrategy. You can find below a sample code snippet demonstrating how to adjust some settings of the strategy:

public RadForm1()

            List<KeyValuePair<double, object>> data = new List<KeyValuePair<double, object>>(); 
            data.Add(new KeyValuePair<double, object>(46, "Samsung")); 
            data.Add(new KeyValuePair<double, object>(43.5, "Apple")); 
            data.Add(new KeyValuePair<double, object>(19, "RIM")); 
            data.Add(new KeyValuePair<double, object>(15, "Huawei")); 
            data.Add(new KeyValuePair<double, object>(14, "Other")); 
            data.Add(new KeyValuePair<double, object>(12, "Siemens")); 
            data.Add(new KeyValuePair<double, object>(11.5, "Panasonic")); 
            data.Add(new KeyValuePair<double, object>(8, "Nokia")); 
            data.Add(new KeyValuePair<double, object>(6.5, "Sony")); 
            data.Add(new KeyValuePair<double, object>(3.5, "Fujitsu")); 
            data.Add(new KeyValuePair<double, object>(3, "HTC")); 
            data.Add(new KeyValuePair<double, object>(2, "Motorola")); 

            this.radChartView1.AreaType = ChartAreaType.Pie;
            DonutSeries series = new DonutSeries();
            foreach (KeyValuePair<double, object> dataItem in data) 
                PieDataPoint point = new PieDataPoint(dataItem.Key, dataItem.Value.ToString()); 
                point.Label = dataItem.Value.ToString(); 
                point = new PieDataPoint(dataItem.Key, dataItem.Value.ToString()); 
                point.Label = dataItem.Value.ToString(); 
            series.ShowLabels = true;
            series.DrawLinesToLabels = true;

            SmartLabelsController controler = new SmartLabelsController();
            PieTwoLabelColumnsStrategy strategy = new PieTwoLabelColumnsStrategy();
            strategy.DistanceToLabel = -10;
            strategy.DistanceBetweenLabels = -10;
            controler.Strategy = strategy;

Note that you can implement your own label's strategy and thus implement custom algorithm for placing the labels. You can find here a sample approach for implementing your own strategy:   

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Top achievements
Rank 2
commented on 27 May 2021, 04:33 AM

nice sir, thank very much you very helful
ChartView Label
Asked by
Top achievements
Rank 2
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question