Live Rate Chart Widget Generator

A real-time sparkline that draws itself from live ticks

Widget Settings

Theme & Symbols

Theme

Chart History (ticks)

Symbols (comma-separated, up to 6)

Colors

Background

Text

Muted Text

Line

Positive

Negative

Border

Live Preview

—

Streaming live ticks Powered by ForexAPI

Embed Code

<!--Live Rate Chart Web Component-->
<live-rate-chart
    symbols="EURUSD,GBPUSD,USDJPY,XAUUSD"
    backgroundColor="#171717"
    textColor="#ffffff"
    mutedTextColor="#9ca3af"
    lineColor="#fbbf24"
    upColor="#10b981"
    downColor="#ef4444"
    borderColor="#383533"
    borderRadius="0.75rem"
    maxPoints="120"
></live-rate-chart>
<!--JavaScript is required to load the widget-->
<script src="http://sveltekit-prerender/web-components/umd/live-rate-chart.js" async></script>

How to Use

Customize

Choose symbols and a line color that fits your brand

Copy & Embed

Paste the generated HTML where the chart should appear

The Live Rate Chart streams ticks over the websocket and draws a self-scrolling sparkline with a big live price, change badge and bid/ask footer. Readers can switch between your chosen symbols with the tabs at the top. Note: the chart builds its history from live ticks, so it starts drawing as soon as the market ticks.