Flat-fill pie beside a legend. Each slice picks a tone from a fixed six-color palette.
The import and the props worth knowing about, in one place.
import { Chart4 } from "@/components/beste/piece/chart4";
<Chart4
slices={[
{
"label": "Direct",
"value": 48,
"tone": "indigo"
},
{
"label": "Referral",
"value": 24,
"tone": "emerald"
},
{
"label": "Social",
"value": 18,
"tone": "amber"
},
{
"label": "Search",
"value": 10,
"tone": "rose"
}
]}
/>Thick donut ring with a centered percent, paired with an uppercase caption on the side.
SVG line with a soft gradient fill beneath. Tone colors the stroke and fade.
Card with a label, headline value, and a row of vertical bars scaled to the data.