1(self.webpackChunkpatternfly_org=self.webpackChunkpatternfly_org||[]).push([[7239],{18571:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>l});var s=a(2784),r=a(66159),c=a(59357),n=a.n(c);const i={id:"Pie chart",section:"charts",subsection:"",deprecated:!1,template:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"design-guidelines",tabName:null,slug:"/charts/pie-chart/design-guidelines",sourceLink:"https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/pie-chart/pie-chart.md",relPath:"packages/documentation-site/patternfly-docs/content/design-guidelines/charts/pie-chart/pie-chart.md",examples:{}},o=()=>s.createElement(s.Fragment,null,s.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"A ",s.createElement("strong",{className:""},"pie chart")," is commonly used to show percentages or proportional data."),s.createElement(r.sg,{id:"usage",headingLevel:"h2",className:"ws-title ws-h2"},"Usage"),s.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Choose a pie chart when you need to compare a set of values to a whole. For example, you might choose a pie chart when visualizing the number of sales made by a team of five people; each segment of the chart represents one salespersonâs performance in the context of the rest of the team. The sum of all of the segments of the chart must equal 100%, and the data points should be mutually exclusive. It is recommended that there are no more than six segments per single pie chart."),s.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"A pie chart may be the wrong choice when you need to compare categories to one another, because it can be difficult to distinguish small differences between segments. If you wish to compare values to each other, a ",s.createElement(r.rU,{to:"/charts/bar-chart",className:""},"bar chart")," may be a more effective pattern."),s.createElement(r.sg,{id:"example",headingLevel:"h3",className:"ws-title ws-h3"},"Example"),s.createElement("img",{src:n(),height:428*n().height/n().width,alt:"Pie chart",width:"428",className:"ws-img "}),s.createElement("ol",{className:"pf-v6-c-content--ol pf-m-editorial ws-ol "},s.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},s.createElement("strong",{className:""},"Pie chart fill:")," We recommend fill colors based on the ",s.createElement(r.rU,{to:"/charts/colors-for-charts",className:""},"colors for charts"),"."),s.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},s.createElement("strong",{className:""},"Legend:")," Each variable on the legend should report their current value.")));o.displayName="ChartsPieChartDesignGuidelinesDocs",o.pageData=i;const l=o},59357:(e,t,a)=>{e.exports={srcSet:a.p+"images/pie-chart.93b6ba7b98f4ba8d.png 856w",images:[{path:a.p+"images/pie-chart.93b6ba7b98f4ba8d.png",width:856,height:500}],src:a.p+"images/pie-chart.93b6ba7b98f4ba8d.png",toString:function(){return a.p+"images/pie-chart.93b6ba7b98f4ba8d.png"},width:856,height:500}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.