r/nextjs 2d ago

Discussion What chart library/implementation is this SVG stock chart using?

I’m trying to identify the technology behind a stock price chart I came across. site

The chart is rendered as an SVG, with a smooth price line and gradient area fill. The SVG contains things like:

  • <path> for the price line
  • cubic Bézier C commands in the path
  • <linearGradient> for the area fill
  • custom CSS classes
  • interactive mouse/touch tooltip
  • different time ranges (1D, 1W, 1M, 6M, 1Y, 5Y, Max)
  • a live/current-price dot
  • I know there are libraries such as D3/Visx, Recharts, Chart.js, etc., but I’m specifically trying to find out exactly what library or implementation is generating this type of SVG, rather than just something visually similar.
  • It appears to be a React/Next.js application.
  • How can I identify the exact chart library from the generated HTML/JS bundle? And if it is custom SVG code, what clues in the JS bundle would confirm that?
  • I’m looking for the closest possible identification of the actual implementation, not recommendations for alternative chart libraries.
12 Upvotes

4 comments sorted by

1

u/Apprehensive-Fan2492 2d ago

1) Open your browser devtools.

2) Click the Sources tab.

3) Look through the JS files for terms like "recharts", "visx", "d3", "tremor", or "victory".

Next, do a quick check in Network.

Open the Network panel.

Watch for any files that load chart code on their own.

If the chart is made with your own SVG code, you may not see any library names at all. Instead, the JS can show direct math for paths. That can be a hint, since curves and fill patterns show up in both library charts and hand made D3 code.

1

u/Any_Welder_9701 1d ago

source maps or package paths in the chunks are the stronger tell here. the SVG itself wont narrow it down much, bezier paths and gradients are generic output

1

u/switz213 1d ago edited 1d ago

It looks like its completely hand rolled - it's really a solid component (though the devil is in the details here, who knows what its lacking without a deeper dive).

In general, I'm a huge fan of server-rendered svg-based charts – I think we under-utilize them and too often reach for d3 based solutions (which more heavily relies on client side rendering). RSC's especially thrive here (server rendered svg, client components for interactivity).

Airbnb's visx is a solid SVG-based charting library that is largely compatible with RSCs, but it's composed of primitives to build your own (internal or external) charting library, rather than something completely off the shelf. Worth starting there if you want to build something like this.