Bar Charts
The hardest part of creating bar charts that support RSC is that bars can look stretched if you don't know the width of the container. To make sure that rounded-sm corners don't look weird in wider containers, we render divs instead of svgs. If you really need to render svgs, there's an example further below.
Before: 
After:
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 bars in a client component - similar to the tooltip example above. Here, we are using Framer Motion, but any similar library would work.
SVG version
Even though rendering svg bars on the server might get distorted for wider containers, you might still want to use them (in a canvas or similar) if you are rendering a lot of bars.
Explore all examples
Click here to explore all examples and copy the source code to use and adapt to your projects.