Google Finance Chart Implementation
December 15 2023
Google Finance has one of the cleaner financial chart implementations on the web. This project is an attempt to recreate its 5Y line chart as faithfully as possible using Observable Plot, building every detail from scratch including the gradient fill, the crosshair pointer, and the floating tooltip.
The dataset covers Tesla stock prices from December 2018 to December 2023, with weekly granularity. Each entry includes the closing price, the weekly high, and the weekly low. The data is parsed with d3.autoType so dates and numbers are handled correctly without manual conversion.
The chart is assembled in five layers, each one added on top of the previous using Observable Plot's marks array.
The gradient fill is defined as an SVG linearGradient with four opacity stops. It fades quickly at the top and reaches full transparency before hitting the x-axis, which gives it that characteristic soft glow rather than a hard block of color.
The tooltip uses SVG foreignObject to embed real HTML directly inside the chart. Its horizontal position has three states to avoid clipping at either edge of the container.
The result is below. The full walkthrough with all the code is in the Observable notebook.
