We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Pie Chart labels and legends

Hi

I just cant figure this out.
I just want a pie chart, where the legend displays witch type the value represents.
Im generating this image:

The pie chart in the bottom is fine but the legend dosn't show my "type" but the value.

Beside the legend question i have some other questions i just cant find the answer on:
How can i remove the stroke on the chart?
How can i change the text displayed on the chartmodel ex. instead of 9,4 i want 9.4 Ton

I use a custom class for the modelbinding:
ChartItem.cs:
-------------------------
    public class ChartItem
    {
        private double _value;
        private string _type;
        private string _units;

        public double Value
        {
            get { return _value; }
            set { _value = value; }
        }

        public string Type
        {
            get { return _type; }
            set { _type = value; }
        }

        public string Units
        {
            get { return _units; }
            set { _units = value; }
        }
    }

-------------------------

And this the method where i'm generating the chart

-------------------------
        public Image CreateChartImage(int width, int height, DataTable dt)
        {

            try
            {
                //Generer custom font
                FontFamily fontFamily = new FontFamily("Geogrotesque Semibold");
                Font font = new Font(
                   fontFamily,
                   12,
                   GraphicsUnit.Point);


                ChartSeries chart = new ChartSeries("ProductionsChart")
                {
                    Type = ChartSeriesType.Pie,
                    SmartLabels = true
                  
                   
                };

                var chartPointList = new List<ChartItem>();
               
                foreach (DataRow row in dt.Rows)
                {
                    chartPointList.Add(new ChartItem
                    {
                        Type = (string)row["Type"],
                        Value = (double)row["Value"],
                        Units = (string)row["Enhed"]

                    });
                }

               

                //DEBUG CODE Kul
                chartPointList.Add(new ChartItem
                {
                    Type = "Kul",
                    Units = "Ton",
                    Value = 3.75d
                });

                ChartDataBindModel dataSeriesModel = new ChartDataBindModel(chart);
                dataSeriesModel.YNames = new string[] { "Value" };

               
                dataSeriesModel.DataSource = chartPointList;
                chart.SeriesModel = dataSeriesModel;
               
                ChartDataBindAxisLabelModel dataLabelsModel = new ChartDataBindAxisLabelModel(chartPointList);
                dataLabelsModel.LabelName = "Type";
               

            
                ChartControl chartControl = new ChartControl(false);
                chartControl.Series.Add(chart);
                chartControl.PrimaryXAxis.LabelsImpl = dataLabelsModel;
              

                //style
                chartControl.Series[0].Style.DisplayText = true;
                chartControl.Series[0].Style.Border.Color = Color.White;
                chartControl.Series[0].Style.Border.Width = 2f;
                chartControl.Series[0].Style.TextOrientation = ChartTextOrientation.RegionCenter;
                chartControl.ChartArea.BorderStyle = BorderStyle.None;
                chartControl.Model.ColorModel.CustomColors = new[] { Color.FromArgb(79, 129, 189), Color.FromArgb(71, 192, 53), Color.FromArgb(128, 100, 168) };
                chartControl.Model.ColorModel.Palette = ChartColorPalette.Custom;
                chartControl.ShowLegend = true;
                chartControl.LegendPosition = ChartDock.Floating;
               
                var savePath = @"c:\Temp\chart.png";

                chartControl.Skins = Skins.Metro;
                chartControl.ShowLegend = true;
                chartControl.Width = 300;
                chartControl.Height = 300;
                chartControl.Font = font;
                chartControl.ForeColor = Color.White;
                chartControl.BackColor = Color.Transparent;
                chartControl.SaveImage(savePath);

                return new Bitmap(savePath);
            }
            catch (Exception ex)
            {
                 Console.WriteLine(ex.Message);

                return null;
            }

            return null;
        }

-------------------------

 

3 Replies

AT Anandaraj T Syncfusion Team February 10, 2014 08:42 PM UTC

Hi Jacob,

Thanks for using Syncfusion products.

We suggest you to use "Text" property of chart series style to customize the text displayed for chart model and legend. We can set same color for border and interior of a point to remove the strokes on chart.

Please refer the following code snippet to achieve this:
<code>
[CS]
            for (int i = 0; i < series.Points.Count; i++)
            {
                //Customizing text displayed on chart. Legend text will also change based on label text
                series.Styles[i].Text = label[i] + " " + series.Points[i].YValues[0] + " %";

                //Disabling strokes on border
                series.Styles[i].Border.Color = color[i];
            }
</code>

For your convenience, we have created a simple sample based on your requirements and it can be downloaded from the link below.

Please let us know if you have any concern.

Regards,
Anand

Attachment: PieChart_c98a768b.zip


JS Jacob Saugmann February 11, 2014 06:02 AM UTC

Hi Anand

Thanks for your help, now my pie chart is almost there:-)

One last thing:
I want my legends to display another text than the pie text I've tried to illustrate i on the image

How can i accomplish this?

Reguards
Jacob


AT Anandaraj T Syncfusion Team February 17, 2014 11:17 AM UTC

Hi Jacob,

Thanks for the update.

We suggest you to use "Text" property of legend item to customize the text displayed for legend items.

Please refer the following code snippet to achieve this.
<code>
[CS]
               //Customizing legend item text
                this.chartControl1.Legend.Items[i].Text = "Legend " + i + ": " + series.Styles[i].Text;
</code>

We have also modified our previous sample based on your requirements and attached it in the below link.

Please let us know if you have any concern.

Regards,
Anand

Attachment: PieChart_Modified_fccf474f.zip

Loader.
Live Chat Icon For mobile
Up arrow icon