Pie Chart

A Pie Chart is one of the most widely used visualization types for showing proportions, percentages, and categorical breakdowns. Each slice of the chart represents a category’s contribution to the whole, making it ideal for illustrating how values sum up to 100%.

Pie charts are easy to read but work best with a limited number of categories (ideally six or fewer) to avoid clutter and maintain clarity.

Best Situations to Use

Use a pie chart when:

  • You want to show the proportional breakdown of categories.

  • A dataset’s values or totals represent 100% of a whole.

  • Highlighting top or bottom performers is important.

  • You want to compare groups within a single variable.

Examples:

  • Comparing top vs. least-performing departments.

  • Showing expense breakdown across categories.

  • Displaying market share percentages by brand.

Variations

Pie charts can be extended into multiple formats:

  • Pie Chart (Default) – Standard circular proportion chart.

  • Doughnut Chart – A pie chart with a center cut-out (donut style).

  • Semi-Doughnut Chart – Half-circle version for compact displays.

Properties

General

  • Component Name – Auto-generated unique identifier.

  • Position (Left/Top) – Placement coordinates on the canvas.

  • Height / Width – Set chart dimensions.

  • Initial Visibility – Show/hide chart on load.

  • Max Button – Enable maximize option.

  • Series Colors – Customize slice colors.

  • Opacity – Adjust slice transparency.

  • Chart Type – Choose Pie, Doughnut, or Semi-Doughnut.

  • Show Percentage – Display percentage labels on slices.

  • Animation – Add transitions and effects.

  • Show Limited Slices – Limit number of visible slices.

  • Maximum Slices – Set threshold for limited slices.

  • Doughnut Width – Define hole size for doughnut charts.

  • Chart Alignment – Align chart (Left, Center, Right).

  • Actions – Enable quick actions like show data, sort data, export.

Tooltip

  • Supported options: None, Default, Custom.

  • Customize background, border, opacity, font size, and width.

  • Configure precision for numerical values.

  • Tooltips display series description and values.

Background & Styling

  • Gradient rotation, opacity, and color customization.

  • Borders (color, radius, width).

  • Shadows with configurable color and transparency.

Title & Subtitle

  • Show/hide title and subtitle.

  • Customize text (font color, size, style, weight, alignment, decoration).

  • Option to use dataset descriptions dynamically.

Legend

  • Show/hide chart legend.

  • Customize font (color, size, style, weight, decoration).

  • Option to hide legend on load.

Formatter

  • Units (%, $, count).

  • Decimal precision.

  • Currency formatting.

  • Number formatting (International/Indian).

  • Value positioning (Prefix/Suffix).

Export Options

  • Enable context menu for exporting.

  • Supported formats: Excel, CSV, JPEG, PNG, PPT, PDF, Print.

  • Customize export heading, subheading, and file name.

  • Define global export type (Screenshot or Tabular).

Example Use Cases

  • Finance: Expense category distribution (e.g., salaries, operations, marketing).

  • Sales: Market share by competitor.

  • Education: Student distribution by grade band.

  • Healthcare: Patient proportion by treatment type.

Sample Data Setup:

  • Category Field: ExpenseHeads (e.g., Rent, Travel, Salaries).

  • Series Field: DollarInMillion (numeric values).

⚠️ Note:

  • Category fields can be string, numeric, or date.

  • Series fields must be numeric.