Home ‹ Trading Widgets ‹ Trading Chart Widget

Trading Chart Widget

A clean price chart for USD/ZAR and the majors, from one month to one year. No charting library, no API key.

📉
4 periods1M to 1Y
ðŸŠķ
Pure SVGNo chart library
🆓
FreeCommercial use allowed

i In short

Most chart widgets are a wrapper around a third-party charting platform. They load several hundred kilobytes of JavaScript, set cookies, and put a commercial brand inside your page whose terms can change whenever that company decides. This one draws the chart as plain SVG in the reader's browser from a small series of daily closes, which means it weighs almost nothing, loads no external library and adds no data processor to your site.

The reader picks a pair and a period. USD/ZAR, EUR/ZAR, GBP/ZAR and AUD/ZAR are there alongside EUR/USD, GBP/USD and USD/JPY, over one month, three months, six months or a year. Above the chart the widget shows the latest level and the percentage change across the selected period, which is usually the number a reader is actually after.

Be honest with your audience about the scope. These are daily closing reference rates, so the chart shows trend rather than intraday structure. There are no candles, no indicators and no drawing tools, and there is no pretence that there are. For a reader asking whether the rand has strengthened since March, this answers the question completely. For a reader wanting to place a trade, their broker's platform is the right tool and the widget does not compete with it.

The chart redraws when the reader changes the pair or the period, adapts to light and dark mode, and scales to the width of whatever container you place it in.

Try the Trading Chart Widget

Live previewThis is exactly what your readers will see

Embed code

Copy this into your page

Free for any site, including commercial ones. Keep the small credit line at the bottom of the widget so readers can find the full version. Nothing is stored about the people who use it. See the disclaimer.

How to add it to your site

  1. Copy the code above Use the copy button so nothing is lost to line wrapping. It is a single iframe tag and it does not need anything else.
  2. Open the page you want it on In WordPress add a Custom HTML block, in Wix use the Embed HTML element, in Squarespace use a Code block, and on a hand-built site paste it straight into your HTML.
  3. Paste and publish The widget appears immediately. If you see an empty space instead, your editor has stripped the iframe tag, which the HTML embed guide explains how to work around.
  4. Adjust the look if you want to Add the parameters in the table below to the iframe URL to change the theme, the accent colour or the height. Nothing needs to be configured on our side.

Customisation options

ParameterValuesWhat it does
themeauto, light, darkDefault follows the reader's own system setting, so the widget looks right on a dark site and a light one without you choosing.
accentSix hex digits, e.g. accent=1A56DBRecolours the header bar and the primary button to match your brand.
header1 or 0Set to 0 to hide the title bar when your page already has a heading above the widget.
breakdown1 or 0Set to 0 to hide the calculation breakdown for a more compact block.
corners1 or 0Set to 0 for square corners if your design has no rounding anywhere else.
widthfullRemoves the 520px maximum so the widget stretches to its container.

Parameters are added to the iframe URL as a normal query string, for example /embed/position-size-calculator.html?theme=dark&accent=1A56DB&header=0. The widget builder lets you set all of them visually and hands you the finished code.

What the widget calculates

The widget fetches a daily series for the selected pair and period, then draws it as an SVG path with a filled area beneath, a small set of gridlines labelled with rate levels, and the first and last dates on the horizontal axis. Everything is calculated and rendered client side with no charting dependency.

The header shows the latest value and the change across the period, coloured and signed. Changing the period reuses data already fetched where possible, so switching between views is instant rather than triggering a new request each time.

Who this widget suits

Currency and economics articles

A chart of the actual pair under discussion, which keeps updating after the article is published.

Country and market overview pages

A one-year USD/ZAR chart says more about an economy than a paragraph describing it.

Education pages about trends

A clean trend chart without indicator clutter is a better teaching illustration than a full trading terminal.

Related widgets

The full library of free trading widgets has more than seventy tools, and the widget builder lets you preview and configure any of them before you copy the code.

Frequently asked questions

Is this a candlestick chart?

No. It is a line chart of daily closing reference rates. Candlesticks need open, high, low and close for each period, which requires a commercial data feed. If your readers need candles, they should use their broker's platform, and there is more on reading them in the candlestick guide.

Can I preset which pair the chart opens on?

Not through a URL parameter yet. It opens on USD/ZAR and the reader switches in one click. If presetting the pair would be useful for your site, say so through the contact page, because that is how this list gets prioritised.

What data source is behind the chart?

A free public endpoint built on European Central Bank reference rates, which publishes one value per business day. No key is required and there is no quota. Because it is ECB data, weekends and euro-area holidays have no entry, which is why the line occasionally has a longer flat segment.

Does it work on mobile?

Yes. The SVG scales to the container width and the period buttons are sized for touch. On a narrow screen the chart keeps its proportions rather than becoming unreadably short.

How heavy is the widget?

Under 25KB including the chart code, with no external libraries or fonts. A conventional embedded charting platform is typically twenty to forty times that.

Can I show a chart of a JSE share or an index?

Not currently. The chart covers currency pairs, because that is the data available from a free public source without a licence. JSE price data is licensed by the exchange and cannot be redistributed in a free widget.

ðŸ›Ąïļ
Test the numbers on real prices

Try a Free Demo Account

Widgets show the maths. A demo account shows how the same maths behaves against live spreads and real market movement, without risking funds.

Open a free demo account
  • FSCA RegulatedTrade with confidence
  • Practice Risk FreeReal market conditions
  • Beginner FriendlyPerfect for learning

79% of retail CFD accounts lose money. Demo accounts do not guarantee future profits.