PieChart
SVG-based pie chart with up to four segments, custom colors, labels, and configurable size.
Default Pie
Standard pie chart with four segments using default data and colors.
With Labels
Labeled pie chart for department budget allocation breakdown.
SalesMarketingDevSupport
Custom Segments
Custom segment sizes and colors for precise data representation.
Size Variants
Pie charts at different sizes for various display contexts.
Market Share
Browser market share visualization with labeled segments.
ChromeFirefoxSafariOther
Budget Split
Company budget allocation across four primary categories.
R&DOpsMarketingAdmin
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
s1 | text | "40" | Segment 1 percentage |
s2 | text | "25" | Segment 2 percentage |
s3 | text | "20" | Segment 3 percentage |
s4 | text | "15" | Segment 4 percentage |
c1 | text | "#c9952c" | Segment 1 color |
c2 | text | "#17a2b8" | Segment 2 color |
c3 | text | "#28a745" | Segment 3 color |
c4 | text | "#6c757d" | Segment 4 color |
size | text | "200" | Chart size in pixels |
labels | text | "" | Comma-separated segment labels |