How to add an economic chart to your website
- Choose a chart above and the range, size and 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, in a sidebar or on a dashboard – and publish.
The code has two parts: a <div> that marks where the chart goes, and a <script> that draws it:
<div class="ql-macro" data-series="unemployment-rate" data-range="10y" data-theme="light">
<a href="https://www.quotelinks.com/economy/unemployment-rate.html">US unemployment rate chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/macro.js" async></script>The two links are shown under the chart. If JavaScript is turned off, visitors still see them as plain links.
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 and add a Custom HTML widget.
- 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. Give the frame about 640 × 440 px (compact: 320 × 380).
- GhostIn the editor add an HTML card and paste the code.
- Plain HTMLPaste the code anywhere inside
<body>.
Options
| Attribute | Values | What it does |
|---|---|---|
data-series | a chart id from the list below | The indicator to show. |
data-range | 1y, 5y, 10y (default), 20y, max | The range shown first. Visitors can switch with the buttons. |
data-size | full (default), compact | Full fits the width of your column, up to 720 px. Compact is up to 320 px wide for sidebars. |
data-theme | light (default), dark, auto | Auto follows each visitor’s light or dark system setting. |
data-recessions | on (default), off | Grey bands for US recessions (NBER dates). |
All charts
| data-series | Chart | Source |
|---|---|---|
fed-funds-rate | Federal Funds Rate | Federal Reserve |
10-year-treasury-yield | 10-Year Treasury Yield | Federal Reserve |
2-year-treasury-yield | 2-Year Treasury Yield | Federal Reserve |
30-year-treasury-yield | 30-Year Treasury Yield | Federal Reserve |
3-month-treasury-bill | 3-Month Treasury Bill Rate | Federal Reserve |
yield-curve | Yield Curve (10Y − 2Y) | Federal Reserve |
prime-rate | Prime Rate | Federal Reserve |
real-interest-rate | Real Interest Rate (10-Year TIPS) | Federal Reserve |
inflation-expectations | Inflation Expectations (10-Year) | Federal Reserve |
inflation-rate | US Inflation Rate | BLS |
core-inflation-rate | Core Inflation Rate | BLS |
pce-inflation | PCE Inflation Rate | BEA |
core-pce-inflation | Core PCE Inflation Rate | BEA |
unemployment-rate | US Unemployment Rate | BLS |
job-growth | US Job Growth | BLS |
wage-growth | US Wage Growth | BLS |
gdp-growth | US GDP Growth | BEA |
misery-index | Misery Index | BLS |
personal-saving-rate | Personal Saving Rate | BEA |
retail-sales-growth | Retail Sales Growth | Census Bureau |
industrial-production | Industrial Production Growth | Federal Reserve |
housing-starts | Housing Starts | Census Bureau |
gas-prices | US Gas Prices | EIA |
oil-prices | Crude Oil Prices (WTI) | EIA |
home-price-growth | US Home Price Growth | FHFA |
m2-money-supply | M2 Money Supply | Federal Reserve |
national-debt | US National Debt | U.S. Treasury |
Several charts on one page
Repeat the <div> for each chart and add the <script> tag only once:
<div class="ql-macro" data-series="inflation-rate" data-size="compact">
<a href="https://www.quotelinks.com/economy/inflation-rate.html">US inflation rate chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<div class="ql-macro" data-series="fed-funds-rate" data-size="compact">
<a href="https://www.quotelinks.com/economy/fed-funds-rate.html">Fed funds rate chart</a> by
<a href="https://www.quotelinks.com/">Quotelinks</a>
</div>
<script src="https://www.quotelinks.com/widgets/macro.js" async></script>More free widgets
The Stock Card shows a quote for any US stock or ETF, the Ticker Tape a scrolling strip of prices, and Market Movers the day’s top gainers and losers. See all widgets and the investing calculators.
Terms of use
The Economic Chart widget is free for any website, personal or commercial. In return, please keep the two links in the code visible and unchanged. The data are public-domain US government statistics; Quotelinks shows them for information only, not as investment advice. See the disclaimer.
Frequently asked questions
Is the Economic 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 data updated?
Quotelinks checks FRED for new releases every day. Most indicators are monthly and change when the agency publishes a new number, for example the unemployment rate on the first Friday of the month. Charts of daily data such as Treasury yields update every day with the month-to-date average.
Where does the data come from?
From US government agencies (BLS, BEA, the Federal Reserve, the Census Bureau, EIA, FHFA and the Treasury) through FRED at the Federal Reserve Bank of St. Louis. These are public-domain statistics.
Will it slow down my page?
No. The script is about 7 KB compressed, loads with async so it never blocks your page, and makes one small request per chart. Charts are drawn as SVG, without a charting library.
Will my site's CSS break the chart?
No. The chart is drawn inside a Shadow DOM, so your styles don't change it and its styles don't leak into your page.
Can visitors change the time range?
Yes. The buttons switch between 1 year, 5 years, 10 years, 20 years and the full history without reloading. data-range only sets the range shown first.
Can I show several charts on one page?
Yes. Repeat the <div> for each chart and include the <script> tag only once.
What if a chart id is mistyped?
The widget shows “Chart unavailable” and keeps the links, so nothing breaks on your page.