Dots plus an OLS line of best fit. Optional confidence band.
A free, animated scatter with regression line you can read here or embed on any website, from Scrollchart.
Scatter with Regression Line
This diagram adds an ordinary least-squares (OLS) regression line to a scatter plot. The line is positioned to minimize the sum of squared vertical distances between itself and each dot. A shaded confidence band shows the range within which the true population regression line is expected to fall with 95% confidence.\n\nThe R-squared annotation tells you what fraction of variance in Y is explained by X. An R-squared of 0.8 means 80% of the vertical spread of dots is accounted for by the linear relationship; the remaining 20% comes from other sources.
OLS assumes a linear relationship. If the true relationship is curved, the line will fit poorly and residuals will show a systematic arch. Check a residual plot before trusting the fitted line.\n\nThe confidence band is about the line, not about individual future observations. A prediction interval (wider) is the correct band for asking where a new data point will fall. Mistaking the confidence band for a prediction interval overstates precision.\n\nCorrelation captured by R-squared is not causation. A strong linear fit does not establish that X causes Y.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This scatter with regression line is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
How ordinary least squares finds the best line
Ordinary Least Squares (OLS) regression places a line through scatter data in a specific way: it minimizes the sum of squared vertical distances from each point to the line. This mathematical criterion means the line balances overpredictions and underpredictions, producing the 'best fit' in a least-squares sense. The resulting slope and intercept give the most probable linear relationship in the sample.
Confidence bands show prediction uncertainty
A confidence band (shaded region around the regression line) depicts the range where the true population line likely lies. Bands grow wider toward the edges of your data because uncertainty about the line increases when extrapolating beyond observed values. A very narrow band indicates you have strong evidence for the relationship; a wide band signals weak data or high variability.
When regression lines mislead
A regression line can fit 'well' numerically yet describe an inappropriate relationship if the underlying connection is actually nonlinear, clustered in subgroups, or driven by outliers. Always inspect the scatter alongside the line. If points curve systematically away from the line, a polynomial or other nonlinear model may fit better. A single influential outlier can tilt the entire line in its direction.
Embed this diagram
Add this animated scatter with regression line to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated scatter with regression line for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Scatter with Regression Line" for my website?
Scrollchart provides "Scatter with Regression Line" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a scatter with regression line in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.