Progress Pie

The Progress Pie component is used to display progress toward a goal in a circular or bar-shaped format. It can show a percentage completion value, a target threshold, or a performance indicator.

This component is highly visual and is commonly used for KPIs, targets, and performance tracking where users need a clear, at-a-glance progress indicator.

Best Situations to Use

Use the Progress Pie when you want to:

  • Represent progress toward a target (e.g., 75% of sales achieved).

  • Provide a visual KPI indicator for completion, utilization, or achievement.

  • Display goal comparisons using a compact, engaging chart.

  • Add simple, at-a-glance progress visuals to dashboards.

Not Recommended for:

  • Detailed comparisons across multiple categories (use bar or line charts).

  • Trend analysis over time (use time-series charts).

Properties

Title Properties

  • Title Text: Define the label/title for the Progress Pie.

  • Title Font Color: Set the font color of the title.

  • Title Font Size: Adjust the size of the title.

  • Title Font Style: Apply styles such as italic or normal.

  • Title Font Weight: Control text thickness (e.g., bold, 400/600/900).

  • Title Font Family: Select a typeface consistent with dashboard branding.

Tooltip Properties

  • Enable Tooltip: Toggle tooltips on or off.

  • Tooltip Text: Define custom tooltip content.

  • Tooltip Font Color: Customize text color.

  • Tooltip Background Color: Adjust tooltip background for clarity.

  • Tooltip Transparency: Set transparency for subtle or strong visibility.

Label Properties

  • Label Text: Specify label content (e.g., percentage value).

  • Font Color: Choose label text color.

  • Font Size: Adjust size for visibility.

  • Font Style / Weight: Apply emphasis styles.

  • Font Family: Ensure consistency with dashboard theme.

Variants

The Progress Pie can be displayed in multiple formats by adjusting the Chart Type property:

  1. Round Progress Pie

    • Displays progress as a circular chart.

    • Ideal for KPIs expressed in percentages.

  2. Horizontal Bar

    • Shows progress as a left-to-right bar.

    • Useful for comparing multiple metrics in a compact horizontal format.

  3. Vertical Bar

    • Displays progress as a bottom-to-top bar.

    • Effective for dashboards where vertical stacking is preferred.

Example Configurations

  • Simple Circular Progress Pie: 70% completion with tooltip enabled.

  • Horizontal Bar Progress: Multiple horizontal bars representing KPI completion across teams.

  • Vertical Bar Progress: Progress indicators stacked in a column layout.

Notes

  • Use round format for single KPI emphasis.

  • Use bar formats when displaying multiple progress indicators together.

  • Ensure sufficient contrast between progress fill and background for readability.

PreviousLegendNextSemi Gauge