Build your embed code
Pick a chart and the options, check the live preview, then copy the code into any HTML page, blog post or sidebar. There is nothing to install and no account to create.
Preview
Free for personal and commercial sites. The only condition: leave the two credit links in the code visible. All settings are explained below.
Adding the code to your site
Paste the code wherever your platform accepts raw HTML. The chart sizes itself to the column it is placed in.
- WordPress: add a Custom HTML block (block editor) or use the Text tab (classic editor). For a sidebar, add a Custom HTML widget and choose the Sidebar width.
- Blogger: switch the post editor to HTML view, or add an HTML/JavaScript gadget in Layout for a sidebar chart.
- Squarespace: add a Code block and leave “Display source” off.
- Wix: add Embed HTML (Embed code › Embed HTML) and size the box to about 640 × 460 px, or 340 × 400 for the sidebar width.
- Ghost: insert an HTML card.
- Plain HTML: paste it anywhere inside
<body>.
Here is what the code looks like:
<div class="cw-chart" data-series="gas-prices" data-range="5y">
<a href="https://chartwidgets.com/charts/gas-prices.html">Full history and data</a> at
<a href="https://chartwidgets.com/">ChartWidgets</a>
</div>
<script src="https://chartwidgets.com/widgets/chart.js" async></script>The <div> is a placeholder that holds the settings and the credit links; the script finds every placeholder on the page and draws a chart in it. Want three charts in one article? Add three placeholders and keep a single script tag.
Settings you can change
| Attribute | Accepted values | Effect |
|---|---|---|
data-series | chart id (table below) | Which indicator is drawn. |
data-range | 1y · 5y · 10y · 20y · max | Time span shown when the page loads (20y if omitted, 5y for compact; a series with less than 20 years of data opens on max). Readers can still change it. |
data-size | full · compact | Full width adapts to your column up to 840 px; compact is up to 340 px for sidebars. |
data-theme | light · dark · auto | Color scheme; auto matches the visitor’s system setting. |
data-recessions | on · off | Show or hide the grey recession bands. |
Technical details
- One small script (about 7 KB compressed), loaded asynchronously so it never delays your page.
- Charts are drawn as SVG inside a Shadow DOM: your stylesheet can’t distort them, and theirs can’t leak into your page.
- No cookies, no tracking, no third-party requests – just one small data file per chart.
- The data refreshes automatically whenever the source agency publishes a new figure; you never need to update the code.
- If a chart id is wrong or the data can’t load, the placeholder shows a short notice and the links remain.
Chart ids
| data-series | Chart | Group |
|---|---|---|
fed-funds-rate | Federal Funds Rate | Interest rates |
10-year-treasury-yield | 10-Year Treasury Yield | Interest rates |
2-year-treasury-yield | 2-Year Treasury Yield | Interest rates |
5-year-treasury-yield | 5-Year Treasury Yield | Interest rates |
1-year-treasury-yield | 1-Year Treasury Yield | Interest rates |
30-year-treasury-yield | 30-Year Treasury Yield | Interest rates |
3-month-treasury-bill | 3-Month Treasury Bill Rate | Interest rates |
yield-curve | Yield Curve (10Y − 2Y) | Interest rates |
yield-curve-10y-3m | Yield Curve (10Y − 3M) | Interest rates |
prime-rate | Prime Rate | Interest rates |
real-interest-rate | Real Interest Rate (10-Year TIPS) | Interest rates |
inflation-expectations | Inflation Expectations (10-Year) | Interest rates |
5-year-breakeven-inflation | 5-Year Breakeven Inflation Rate | Interest rates |
5y5y-forward-inflation | 5-Year, 5-Year Forward Inflation Expectation | Interest rates |
mortgage-rates | 30-Year Mortgage Rate | Interest rates |
inflation-rate | US Inflation Rate | Inflation |
core-inflation-rate | Core Inflation Rate | Inflation |
pce-inflation | PCE Inflation Rate | Inflation |
core-pce-inflation | Core PCE Inflation Rate | Inflation |
ppi-inflation | PPI Inflation Rate | Inflation |
shelter-inflation | Shelter Inflation | Inflation |
grocery-inflation | Grocery Inflation (Food at Home) | Inflation |
energy-inflation | Energy Inflation | Inflation |
used-car-prices | Used Car Price Inflation | Inflation |
car-insurance-inflation | Car Insurance Inflation | Inflation |
unemployment-rate | US Unemployment Rate | Jobs and growth |
job-growth | US Job Growth | Jobs and growth |
wage-growth | US Wage Growth | Jobs and growth |
gdp-growth | US GDP Growth | Jobs and growth |
us-gdp | US GDP | Jobs and growth |
real-gdp | US Real GDP | Jobs and growth |
misery-index | Misery Index | Jobs and growth |
personal-saving-rate | Personal Saving Rate | Jobs and growth |
retail-sales-growth | Retail Sales Growth | Jobs and growth |
industrial-production | Industrial Production Growth | Jobs and growth |
jobless-claims | Initial Jobless Claims | Jobs and growth |
job-openings | Job Openings (JOLTS) | Jobs and growth |
labor-force-participation | Labor Force Participation Rate | Jobs and growth |
sahm-rule | Sahm Rule Recession Indicator | Jobs and growth |
u6-unemployment-rate | U-6 Unemployment Rate | Jobs and growth |
quits-rate | Quits Rate (JOLTS) | Jobs and growth |
layoffs-rate | Layoffs Rate (JOLTS) | Jobs and growth |
recession-probability | Recession Probability | Jobs and growth |
housing-starts | Housing Starts | Housing |
new-home-sales | New Home Sales | Housing |
new-home-supply | New Home Supply (Months' Supply) | Housing |
home-price-growth | US Home Price Growth | Housing |
gas-prices | US Gas Prices | Food and energy |
oil-prices | Crude Oil Prices (WTI) | Food and energy |
brent-oil-prices | Brent Crude Oil Prices | Food and energy |
diesel-prices | US Diesel Prices | Food and energy |
natural-gas-prices | Natural Gas Prices (Henry Hub) | Food and energy |
electricity-prices | US Electricity Prices | Food and energy |
egg-prices | US Egg Prices | Food and energy |
ground-beef-prices | Ground Beef Prices | Food and energy |
coffee-prices | Coffee Prices | Food and energy |
bread-prices | Bread Prices | Food and energy |
m2-money-supply | M2 Money Supply | Money and debt |
m1-money-supply | M1 Money Supply | Money and debt |
national-debt | US National Debt | Money and debt |
federal-deficit | US Federal Deficit | Money and debt |
debt-to-gdp | US Debt to GDP | Money and debt |
interest-on-debt | Federal Interest Payments | Money and debt |
fed-balance-sheet | Fed Balance Sheet | Money and debt |
us-dollar-index | US Dollar Index (Broad) | Money and debt |
Terms of use
You may embed any chart on any website, commercial or not, free of charge and without registration. We only ask that the two credit links in the embed code stay visible and unchanged. The government statistics themselves are in the public domain; the mortgage rate series is © Freddie Mac and must keep its attribution. Please read the disclaimer, and write to support@chartwidgets.com with questions or ideas for new charts.
Questions
Is it really free?
Yes, for personal and commercial websites alike. The only condition is that the two credit links in the code stay visible.
Will the chart keep updating?
Yes. The script loads the latest data file every time a visitor opens your page, so the chart shows new releases without any change to your code.
Can I put several charts on one page?
Yes. Add one placeholder <div> per chart and include the script tag once.