eds-gauge
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
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | Diameter of the pie chart (pixels) | number | 100 |
thickness | thickness | Thickness of inner mask as fraction of radius (0.1–0.2). Values outside this range will be clamped. | number | 0.1 |
value | value | Current value | number | 60 |
valueMax | value-max | Maximum value (gauge end) | number | 100 |
valueMin | value-min | Minimum value (gauge start) | number | 0 |
variant | variant | "black" | "dark" | "default" | "strong" | 'default' |
Built with StencilJS