Back to Fluentui

PieChartBestPractices

packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md

4.40.2-hotfix2806 B
Original Source

Layout

  • For high cardinality scenarios where the slices are very small, they can be grouped together to form a bigger chunk.
  • Values should always be displayed for easier chart comprehension. There is a 2px space between the chart and the text. The value is centered in relationship to the slice it describes. That can be offset if an overlap happens.
  • Minimum padding is 16px around the chart. That applies to the version with title to accommodate space for values. The chart is centered within the area.
  • The slice labels should be short and concise as they take additional screen space outside the pie visual.

Content

Segments should be ordered from largest to smallest in clockwise direction.

Pie Labels for each segment (optional)

Divider gaps between segments to improve readability.