Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Display Percentages on a Pie Chart

Posted by milang on February 4, 2009

Building on a previous post about how to create a pie chart in ASP.NET, let’s look at how to display percentages on a pie chart.  This is surprisingly difficult because it is unclear which chart properties need to be set in order to achieve the look that we’re interested in.

The most common way to display percentages on a pie chart is using the pie labels themselves:

Pie Chart with Percentage -1

Here is what it looks like after we display the labels outside the pie chart:

piechartpercentagelabel1a

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
        // Insert code to create basic pie chart
        // See my blog post entitled "Pie Charts in ASP.NET" for full source code

        // Set the pie labels to be drawn outside of the pie chart
        this.Chart2.Series[0]["PieLabelStyle"] = "Outside";

        // Set these other two properties so that you can see the connecting lines
        this.Chart2.Series[0].BorderWidth = 1;
        this.Chart2.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

        // Set the pie label as well as legend text to be displayed as percentage
        // The P2 indicates a precision of 2 decimals
        this.Chart2.Series[0].Label = "#PERCENT{P2}";
     }
}

Display Percentages in the Legend of a Pie Chart

Showing percentages on the pie chart is useful to help give context to the slices of the pie, but we still need to see the categories (in this case, the sales names) on the pie somewhere.  One potential solution is to keep the category names as outside labels and show the percentages in the legend.

piechartpercentagelabel5

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
        // Insert code to create basic pie chart
        // See my blog post entitled "Pie Charts in ASP.NET" for full source code

         // Set pie labels to be outside the pie chart
         this.Chart2.Series[0]["PieLabelStyle"] = "Outside";

         // Set border width so that labels are shown on the outside
         this.Chart2.Series[0].BorderWidth = 1;
         this.Chart2.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

         // Add a legend to the chart and dock it to the bottom-center
         this.Chart2.Legends.Add("Legend1");
         this.Chart2.Legends[0].Enabled = true;
         this.Chart2.Legends[0].Docking = Docking.Bottom;
         this.Chart2.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

         // Set the legend to display pie chart values as percentages
         // Again, the P2 indicates a precision of 2 decimals
         this.Chart2.Series[0].LegendText = "#PERCENT{P2}";

         // By sorting the data points, they show up in proper ascending order in the legend
         this.Chart2.DataManipulator.Sort(PointSortOrder.Descending, Chart2.Series[0]);
     }
}

Some points of interest for this chart:

  • To maximize space on a pie chart, I always place the legend below the pie instead of on the right side.
  • I tried to give the legend entries more meaning by sorting the data points in descending order on the chart.
  • If your pie chart is too complicated to understand after you have performed these steps, you may want to consider displaying your data using a different chart type.

Lastly, if you disable pie labels and use a creative mix of keywords that Alex documented on his blog, you can add category names and percentages in the legend:

piechartpercentagelabel6

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
         // Insert code to create basic pie chart
         // See the post entitled "Pie Charts in ASP.NET" for full source code

         // Set pie labels to be outside the pie chart
         this.Chart2.Series[0]["PieLabelStyle"] = "Disabled";

         // Add a legend to the chart and dock it to the bottom-center
         this.Chart2.Legends.Add("Legend1");
         this.Chart2.Legends[0].Enabled = true;
         this.Chart2.Legends[0].Docking = Docking.Bottom;
         this.Chart2.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

         // Show labels in the legend in the format "Name (### %)"
         this.Chart2.Series[0].LegendText = "#VALX (#PERCENT)";

         // By sorting the data points, they show up in proper ascending order in the legend
         this.Chart2.DataManipulator.Sort(PointSortOrder.Descending, Chart2.Series[0]);
     }
}

For anyone using SSRS, check out the MSDN article on How to: Display Percentage Values on a Pie Chart.

Feel free to post questions if this is unclear…

Advertisements

12 Responses to “Display Percentages on a Pie Chart”

  1. prathap said

    i want formula to display the Percentage of each category in a pie chart in SSRS 2005

  2. milang said

    Prathap,
    The article above pertains to the 2008 version of the Microsoft chart that is used in SSRS and .NET. For SSRS 2005, which used a scaled-down version of this chart, you will need to enter an expression that generates a value and then format the value as a percentage. This could be something like ‘Fields!MyField.Value/Sum(Fields!MyField.Value)’ in the Data Label box, and then ‘P2’ in the Format box. Robert Bruckner has an excellent whitepaper that shows an example of how to do this with the pie chart:

    http://msdn.microsoft.com/en-us/library/aa964128.aspx#moressrscharts_topic3
    (scroll down to the section titled ‘Data Point Labels and Legend Labels’)

    Good luck,
    Milan

  3. nice knowledge thanks for sharing, hope you had the best new year.

  4. sree said

    hi,

    thanks for the detailed explanation and i had a question if one of the value for pie chart is 0 then how to hide the label from displaying it?

    Thank you.

  5. Paradi$e said

    Good detail, and overview of how to create some decent charts.

    Helped me lots! Perfect, Thanks!

  6. shirsho said

    thank you so much, it is very helpful.

    my problem was with “LabelText” property.
    sold it with your “#VALX” 🙂
    thanks again

  7. chinna said

    am using asp.net chart control my problem is if two datapoints have near values it will overlap by one by one please help on this
    in 3d is the problem but in 2d it will fine

  8. promovare prin facebook…

    […]Display Percentages on a Pie Chart « Better Dashboards[…]…

  9. unknown said

    NOT TO MUCH HELP…:E

  10. Sunil Hongekar said

    thanx ,its nice 1

  11. viral said

    thanx ,its very helpful.

  12. pasupathig said

    very helpful.Nice

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: