Skip to content

Donut Chart

ts
const data = [
  { category: 1, value: 4 },
  { category: 2, value: 6 },
  { category: 3, value: 10 },
  { category: 4, value: 3 },
  { category: 5, value: 7 },
  { category: 6, value: 8 },
];

Frame({ coord: Polar() }, [
  StackX({ y: 50, spacing: 0, sharedScale: true },
    For(data, (d, i) =>
      Rect({ h: 50, w: v(d.value), fill: color6[i % 6] }))),
]).render(root, { w: 500, h: 300, x: 300, y: 200 });