If you stick to React, make sure to also check out https://www.tremor.so/ https://raw.tremor.so/, which is built on top of Recharts. Beautiful defaults, easy API.

tremor.so/figma

Another example built by vercel: edge-data-latency.vercel.app

cal.com uses it for its insight section -> cal.com/insights

Hi, Chris here from Tremor. Many thanks for the feedback! I wasn't aware that it is not directly understood as an open-source library by our website hero title

I totally missed it as well, got to the bottom of the page, saw something about pre-release and assumed it was paid for. This comment above is what has made me go back and bookmark.

Regarding the charts, you would have to use low-level chart libraries, such as VisX or D3

There are server-rendered charts, but those have more or less fallen out of vogue since there's no interactivity.

Write the SVG by hand use DOM manipulation to alter the d attribute of an SVG <path>, use a low lever library like d3-shape to compute the interpolations.

Highcharts seems also really customizable

This library just wraps Recharts

chartscss.org could cover off basic stuff

Tinybird built a simple, free-to-use, open-source web analytics solution. Everything from back-end to front-end is pre-deployed, and ready to be used and customized for your website in just a few minutes. See the example in the blog article.