What's included:
- Bar, Line, and Donut chart types (switchable)
- Smooth entrance animations (toggleable)
- Dark/light mode background support
- Per-segment color and label distance control (Donut)
- Show/hide values and labels independently
——— Bar Chart ———
- Bar Width: control the width of each bar as a percentage
- Bar Radius: round the top corners of each bar
- Animate: bars grow up from the bottom on mount
——— Line Chart ———
- Line Width: control the stroke thickness
- Point Size: control the size of data points (supports decimals)
- Animate: line draws in from left to right on mount
——— Donut Chart ———
- Donut Thickness: control the ring thickness
- Label Distance (global): set distance between ring and labels for all segments
- Per-segment settings via Data array:
· color: set a custom hex color for each segment (e.g. #ff5c5c)
· distance: override label distance for individual segments
——— Tips ———
- Recommended size: 500 x 300px or larger
- For Donut chart, if labels overlap, adjust each segment's distance individually
- labelDistance prop controls all segments globally; per-segment distance overrides it
- Animate: false is recommended for static thumbnails or above-the-fold sections
Property Controls:
Data, Chart Type, Primary Color, Secondary Color, Label Color, Value Color, Background Color, Show Values, Show Labels, Animate, Bar Radius, Bar Width, Line Width, Point Size, Donut Thickness, Label Distance, Label Size
Need help or custom modifications? Feel free to reach out.
vora
