Pie Charts

As opposed to bar and line charts, pie charts are confined to a circular shape and can't really be stretched in the x or y direction. To make sure it looks consistent while being rendered on the server, we specify a fixed max chart width and center the chart horizontally on the container. You will notice that shrinking the height of the container will proportionally shrink the width of the chart, and increasing the width above the max-width threshold will stop affecting the height so it never looks stretched.

Adding client interactivity

Even though rosen charts support RSC by default, you will often need to add some client interactivity. In this example, we'll add a custom tooltip to the chart. Hover over it to see it in action.

---

Adding animations

One way to add animations, is to wrap your slices in a client component - similar to the tooltip example above. Here, we are using Framer Motion, but any similar library would work.

---

Explore all examples

Click here to explore all examples and copy the source code to use and adapt to your projects.

---