eds-pie
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the values like:
In React
Pie Chart Color Palettes
Our <eds-pie> component supports two built-in color schemes. Colors are applied in order from highest to lowest value:
- Semantic (9 colors)
- Mono (9 colors)
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
colorScheme | color-scheme | Color scheme: semantic, brand, or mono | "mono" | "semantic" | 'semantic' |
display | display | Show raw value or percentage | "percent" | "value" | 'value' |
legend | legend | Show legend | boolean | true |
size | size | Diameter in pixels | number | 200 |
slices | slices | Array or JSON string of slices | PieSlice[] | string | [] |
thickness | thickness | Inner-radius fraction (always 0.5-1) | number | 1 |
Built with StencilJS