Scatter Plots

Below you will find a few ways to progressively enhance your scatter plots.

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.

96
98
100
102
10
60
110
160
180

Adding animations

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

1591317209698100102

Explore all examples

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