BurstGraph
A radial burst drawn on a canvas, with category-colored points spraying outward distributed by value, for decorative categorical texture.
Implementation previewEvery example. In one place.
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/visualizations/BurstGraph/BurstGraph.stories.tsxExport DefaultImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
A radial burst drawn on a canvas, with category-colored points spraying outward distributed by value, for decorative categorical texture.
Implementation API 1 entry point · source-derived preview
Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.
import { BurstGraph } from '@cloakedinc/design-system';BurstGraphBurstGraphProps
packages/design-system/src/components/visualizations/BurstGraph/BurstGraph.tsx:12
| Prop | Type | Presence | Notes |
|---|---|---|---|
items | readonly CategoryDatum[] | Required | Category values used to distribute and color burst points. |
accentColor | string | undefined | Optional | Optional accent color used when no category color is available. |
ariaLabel | string | undefined | Optional | Accessible label for meaningful chart content. |
testId | string | undefined | Optional | Optional test selector. |
Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.
Overview
A radial burst around a single headline stat: the value + label sit in the center while
category points spray outward.
When to use
Use BurstGraph as a hero KPI when you want one big number with categorical texture behind it -
the points distribute by each items value and take their category color (falling back to
accentColor when a category has none). Like BubbleMatrix, it conveys feel, not precise
reads.
Pick BubbleMatrix instead for a scan-field layout, or CategoryBars/ActionOrbs when the
category magnitudes must be read precisely rather than felt. For a headline number paired with
a real trend line, use MetricLineChartCard.
Not currently used in the app.
Component specification
$schema
../../../specs/component-spec.schema.jsonParts
- Id
- canvas
- Label
- Canvas
- Description
- The square canvas the burst is drawn onto.
- Required
- true
- Id
- ray
- Label
- Ray
- Description
- A structural line radiating from the hub.
- Id
- particle
- Label
- Particle
- Description
- A category-colored point spraying outward from the center.
Allowed Design Choices
- Variants
- Base
- Label
- Base
- Description
- Category data changes the reading without changing the burst treatment.
- Sizes
Variants
- Id
- base
- Label
- Base
- Description
- A canvas radial burst of category particles.
- Platforms
- ios
- android
- web
Sizes
None specifiedMeasurements
- Id
- particle-size
- Label
- Particle size
- Kind
- example-only
- Token
- --cds-size-8
- Value
- 8
- Unit
- px
- Applies To
- particle
- Notes
- Particles peak at an 8-unit radius, matching the --cds-size-8 token; the value is a canvas constant rather than a CSS-token binding, and the drawn size is depth- and life-driven, so this is example-only.
Layout
- Alignment
- The canvas is centered up to its width cap and keeps a square aspect.
- Flow
- Rays and particles radiate from the hub.
- Notes
- The burst is drawn on a canvas, so its geometry is expressed in canvas units, not CSS tokens.
Typography And Color
- Typography
- None specified
- Colors
- Label
- Rays
- Description
- Structural rays and their endpoints.
- Token
- --cds-divider
States
- Id
- bursting
- Label
- Bursting
- Description
- With motion allowed particles continuously spawn, travel, and fade.
- Id
- static
- Label
- Static
- Description
- Under reduced motion a single settled frame is drawn with no further spawning.
- Id
- empty
- Label
- Empty
- Description
- No items shows the empty burst state.
Behavior
- Label
- Value distribution
- Description
- Particle colors are weighted by each category value so bigger categories spray more.
- Label
- Accent fallback
- Description
- Categories with no color fall back to the accent color, then to a default accent.
Accessibility
- Label
- Meaningful chart
- Description
- Pass an accessible label so the burst is announced as a meaningful image.
- Label
- Decorative burst
- Description
- Omit the label to hide the canvas from assistive technology when nearby text carries the meaning.
Content Adaptation
- Label
- Decorative texture
- Description
- Use BurstGraph for categorical texture; surface any headline count in nearby copy.
- Label
- Precision elsewhere
- Description
- Use CategoryBars or ActionOrbs when category magnitudes must be read precisely.
Motion Haptics
- Motion
- Label
- Radial burst
- Description
- The structure rotates gently while particles spawn, travel outward, and fade.
- Label
- Reduced motion
- Description
- When reduced motion is set a single settled frame is drawn and no further frames are scheduled.
- Haptics
- Label
- No feedback
- Description
- The chart is a display and requests no haptic feedback.