How to add the Stock Chart to your website
- Type a symbol above and choose the first range, the size and the theme. The preview shows exactly what your visitors will see.
- Click Copy code.
- Paste the code into your page’s HTML where the chart should appear – inside an article, on a company page or in a sidebar (compact size) – and publish.
The code has two parts: a <div> that marks where the chart goes, and a <script> that draws it:
<div class="ql-stockchart" data-symbol="AAPL" data-type="candles" data-range="1y" data-size="full" data-theme="light">
<a href="https://www.quotelinks.com/stocks/aapl.html">AAPL stock chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/stockchart.js" async></script>The two links are shown at the bottom of the chart. If JavaScript is turned off, visitors still see them as plain links.
What the chart shows
- Daily closing prices of the latest US trading sessions, one point per day, updated after every market close.
- Ranges: 1 month, 3 months, 6 months, year to date, 1 year, 5 years and Max (about 5 years for stocks, about 10 years for ETFs). Visitors switch with the buttons above the chart.
- Change over the range in dollars and percent, compared with the close at the start of the range. The line turns green when the price is up over the range and orange when it is down.
- The close on any day: hover with the mouse, tap on a phone, or focus the chart and use the arrow keys.
- Line or candlesticks: visitors switch with the two buttons next to the ranges. Candles show the open, high, low and close of each day (weekly or monthly candles on long ranges) with volume bars.
- Split-adjusted: past prices are adjusted for stock splits. Dividends are not added back (price chart, not total return).
Step by step for popular platforms
- WordPressIn the block editor add a Custom HTML block and paste the code. For a sidebar, use Appearance › Widgets, add a Custom HTML widget and choose the compact size.
- BloggerFor a post, switch to HTML view and paste. For the sidebar, go to Layout › Add a Gadget › HTML/JavaScript.
- SquarespaceAdd a Code block to the page and paste the code. Leave “Display Source” off.
- WixUse Add › Embed Code › Embed HTML, choose “Code” and paste. Wix shows the chart in a frame; give it about 740 × 420 px (compact: 340 × 360 px).
- GhostIn the editor add an HTML card and paste the code.
- Plain HTMLPaste the code anywhere inside
<body>. Upload the page as usual.
Platforms that don’t allow scripts in posts (for example Medium) can’t show the chart; the two links still appear.
Options
| Attribute | Values | What it does |
|---|---|---|
data-symbol | e.g. AAPL, BRK.B, SPY | The stock or ETF to chart. |
data-range | 1m, 3m, 6m, ytd, 1y (default), 5y, max | The range shown first. Visitors can switch to the others. The compact size has no YTD button. |
data-type | candles (default), line | The chart type shown first. Visitors can switch between line and candlesticks. |
data-size | full (default), compact | Full: fills the space you give it, up to 720 px. Compact: up to 320 px, a shorter chart for sidebars. |
data-theme | light (default), dark, auto | Auto follows each visitor’s light or dark system setting. |
Several charts on one page
Repeat the <div> for each symbol and add the <script> tag only once:
<div class="ql-stockchart" data-symbol="MSFT" data-type="line" data-range="5y">
<a href="https://www.quotelinks.com/stocks/msft.html">MSFT stock chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<div class="ql-stockchart" data-symbol="SPY" data-type="candles" data-range="6m">
<a href="https://www.quotelinks.com/etfs/spy.html">SPY ETF chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/stockchart.js" async></script>More free widgets
The Stock Card shows a quote card with key stats, the Ticker Tape a scrolling strip of up to 20 symbols, Market Movers the day’s top gainers and losers, and Economic Charts 27 US economic indicators. See all widgets.
Terms of use
The Stock Chart is free for any website, personal or commercial. In return, please keep the two links in the code visible and unchanged. Prices are end-of-day and for information only; they are not investment advice. See the disclaimer.
Frequently asked questions
Is the Stock Chart widget free?
Yes. It is free for personal and commercial websites, with no sign-up and no API key. The only condition is that the two links in the embed code stay in place and visible.
How often is the chart updated?
Every US trading day. The chart uses end-of-day closing prices, and the newest close is added after each market close, usually by early evening New York time. You never have to change the code.
Does it show intraday or real-time prices?
No. Each point on the chart is one day’s official closing price. During market hours the chart ends at the previous close. For intraday prices, visitors can click through to the full quote page on Quotelinks.
How much history does the chart have?
About five years of daily closes for stocks and about ten years for ETFs. Visitors can switch between 1 month, 3 months, 6 months, year to date, 1 year, 5 years and Max. A recently listed company shows only the ranges its history covers.
Are prices adjusted for stock splits?
Yes. All past closes are adjusted for splits, so a 4-for-1 split does not show up as a 75% drop. Dividends are not added back: the chart shows the share price, not total return.
Which symbols can I use?
More than 5,000 US stocks listed on the NYSE, NASDAQ and NYSE American, and more than 5,000 US-listed ETFs. Class shares work with a dot or a dash (BRK.B or BRK-B).
Will it slow down my page?
No. The script is about 10 KB compressed, loads with async so it never blocks your page, and makes one request per symbol (about 5–10 KB compressed for a line chart, more for candlesticks). The chart is drawn as SVG, without a charting library.
Can it show candlesticks?
Yes, candlesticks are the default (data-type="candles"); set data-type="line" for a line chart. Visitors can switch with the Line / Candles buttons. Each candle shows the open, high, low and close; green when the price closed above the open, orange when below, with volume bars underneath. Up to about a year fits as daily candles; longer ranges use weekly or monthly candles so they stay readable. A day without open/high/low data is shown as a small tick at the close.
How wide is the chart?
The full chart fills the space you give it, up to 720 px, and works down to about 260 px on phones. The compact chart is up to 320 px wide, for sidebars.
What if a symbol is delisted or mistyped?
The widget shows “Chart unavailable” and keeps the links, so nothing breaks on your page.