SVG line with a soft gradient fill beneath. Tone colors the stroke and fade.
The import and the props worth knowing about, in one place.
import { Chart5 } from "@/components/beste/piece/chart5";
<Chart5
surface="card"
bordered={true}
inverted={false}
label="MRR · 90d"
value="$124K"
data={[
20,
28,
24,
34,
40,
38,
48,
52,
60,
58,
72,
84
]}
tone="success"
/>Mini SVG line plotting any number array. Tone sets the stroke color.
Flat-fill pie beside a legend. Each slice picks a tone from a fixed six-color palette.
Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.