HTML5 Charting

FX Blue Labs offers market-leading HTML5 financial charting, with full support for tablets and mobile phones as well as desktop browsers.

The charting can be used either as a single widget on a website, for example to illustrate analysts' research notes, or can be deployed as a complete charting application with multiple layouts, saved templates and workspaces, pop-out into new browser windows etc.

The FX Blue Labs charting includes all of the features expected of professional charting, plus many other refinements such as momentum scrolling; full handling of touch devices such as tablets; new chart types such as Baseline; support for event markers and axis levels/bands; many advanced indicators and drawing tools; and support for end-users creating their own technical indicators.

Website widget

In its simplest form, the HTML5 charting can be embedded as a single widget on a web page. You can control every aspect of the charting yourself via parameters in the widget URL, ranging from simple colour changes through to bespoke modifications of which indicators and drawings should be displayed.

The widget can be integrated with external data such as analysts' recommendations, and draw information such as recommended support and resistance levels automatically on the chart.

Charting application

The HTML5 charting is also available as a complete charting application, as illustrated on our retail website. Such a charting app can support multiple layouts, saved workspaces and templates, indicator studies etc. Charts can also be popped out into new floating browser windows for multi-monitor support.

(Example screenshot - click to open in new window)

Price feeds

The charting can be integrated with potentially any broker price feed.

FX Blue Labs can also process a broker's price feed and history data in order to add additional timeframes. For example, based on MT4 history where only a limited range of timeframes is available such as M1, M5, H1, D1 etc, FX Blue Labs can add in periods such as M3 and H8, and create charts for sub-minute periods such as S10.

Browser and device compatibility

The HTML5 charting works with any modern web browser, including mobile phones and tablets as well as desktop computers. The charting has full support for touch devices, and no features are lost when not using a mouse and keyboard.

Bespoke data and custom indicators

FX Blue Labs can create indicators which read your proprietary data such as your analysts' recommendations, and draw that automatically on the chart - as markers, trend lines, widgets etc.

For a simple example, see the screenshot in the gallery below which shows calendar events drawn on the chart as markers. Similarly, it is possible to create an indicator which automatically draws an analyst's recommended support and resistance levels as trend lines or a price range, or which lists them in a widget at the side of the chart.

Price styles

The charting provides all the usual price styles, such as filled candles and OHLC bars, plus some extra options such as baseline charts and Renko bars with tails

Candles (with optional gradient fill)

Hollow candles

Open/high/low/close bars

High/low/close bars

Line chart

Mountain (area) chart

Baseline, with user-moveable dividing line

High-low chart

Heikin Ashi

Bar averaging (each bar is the average of the last N bars)

Renko bars

Renko, with tails showing adverse price movement

Range bars

Three Line Break


Point and Figure

Display options

The charting display is extremely flexible, giving traders the ability to create exactly the chart that they want

The trader can set any indicator to draw in the background, behind the bars...

...or the trader can set any indicator to draw in front of the bars

The trader can set any drawing to display in the background, behind the bars...

...or the trader can set any drawing to display in front of the bars

Individual indicators can be temporarily hidden

All indicators in the main chart area can be temporarily hidden, to reveal the chart

Indicators can be positioned above the chart, as well as below it

Indicators can be "maximized" so that they take up the whole chart space

Indicators can have price markers on the axis, showing their current value

Technical indicators

In addition to all the usual technical indicator options, the charting provides many extra features which indicators can use to create a more informative display for traders

Indicators can draw filled channels, with transparency, as well as simple lines

Indicators can draw lines of markers, as well as solid or dotted lines

Indicators can draw occasional markers for some data points only, such as a "fractal" indicator

Indicators can draw vertical or horizontal lines, highlighting important events such as moving average crosses

Indicators can draw event markers, at the bottom (or top) of the chart, such as calendar events

Indicators can change the graphical style of individual candles, to highlight them

Indicators can draw markers and also highlight individual bars, for example to pick out "inside" bars

Indicators in sub-windows can have a baseline value, such as 50, and a fill to that baseline

Indicators in sub-windows can have level markers, to pick out important thresholds such as 20 or 80 in RSI

The parameters for indicators can be quickly changed using the pop-up menu, without needing to display the full settings for the indicator


Indicators can be applied to other indicators. This can range from smoothing a moving average by applying another moving average to it, through to more complex examples such as applying Bollinger bands to RSI or ATR.

A simple moving average applied to an exponential moving average

A simple moving average applied to volume

An exponential moving average applied to RSI

Bollinger bands applied to ATR

MACD histogram applied to the upper band of a Keltner channel

User-defined indicators

Traders can be given the ability to create their own indicators, in simple Javascript. User-defined indicators (UDIs) can plot any values, just like built-in indicators, and can create drawings, event markers, and bar highlights. UDIs have access to the full features of Javascript, including the ability to communicate with remote servers and read any external data.

Example user-defined indicator, plotting multiple values in different styles, and drawing shapes and event markers on the chart

Drawing options

In addition to all the usual drawing tools, the charting provides a range of unique drawing features

Many types of drawing can have text attached to them (without needing to create two separate drawings, one for the line and one for the text)

Rectangles can have embedded text, displayed in the middle or at any corner

Many types of drawing can display markers as well as solid or dotted lines, for more graphical impact

The text and marker options can be combined - particularly useful when sharing a chart in a webinar, or by email

A price-range drawing highlights the range between two prices, all the way across the chart

A date-range drawing highlights the range between two dates

The call-out drawing can have variables in its text which automatically update if the drawing is moved, or if it is attached to the current bar and the price changes

Traders can draw statistical measures such as averages and linear regressions, projecting their value into the future

Traders can quickly draw lines across a price range, subdivided into halves, quarters, thirds, or eighths

Among other measuring tools, there is an OHLC measure which calculates the prices differences across a range

Chart widgets

In addition to traditional technical indicators, the charting also includes widgets which provide extra functionality

Charts can have widgets, in addition to the more traditional type of indicator

The available chart widgets include alerts about price levels

There is a notepad widget for recording trading thoughts and plans

There is a clock widget, showing local time or a major market such as New York or Tokyo

Alerts from indicators

Indicators can have alert conditions attached to them, displaying a pop-up notification and/or a marker on the chart when an event occurs - e.g. moving-average cross, price moving outside Bollinger band

An alert from an indicator can display a pop-up notification

Alerts can also create markers on the chart (as well as, or instead of, message boxes)

Alerts can compare indicators to fixed values (e.g. RSI > 80), or the current price, or another indicator value

Each indicator can have any number of different alerts attached to it (e.g. RSI > 80 or < 20)

For simple alerts about price levels, there is a widget which can be given any number of prices to watch

Alerts from drawings

Drawings can also have alert conditions attached to them, comparing the drawing either to price action or to indicator values - for example, a moving average crossing a threshold or a trend line

An alert on a drawing can be as simple as the price crossing a trend line

More complex shapes can also generate alerts. For example, you can set an an alert when a price enters a recentangle.

Alerts can also be set on statistical measures such as regression channels, or on Fibonacci drawings

Drawings can also be compared to indicator values. For example, you can set an alert when a moving average or Bollinger Band crosses a trend line

Like indicator alerts, drawing alerts can be checked on every new tick, or only at each bar end

Server alerts

In combination with user registration and a user database, the charting can issue server-side alerts via email or SMS. When the user closes their browser or goes offline, a server continues to monitor all the alerts on drawings and indicators, and sends out notifications when conditions are met.

Alert issued from server via SMS

Axis settings

Each axis in a chart is fully configurable

Every axis can be quickly configured via a pop-up menu

Every axis has a window for full control over its settings

An axis can have levels which are drawn across the chart without needing to create objects such as horizontal lines

An axis can have have bands which are drawn across the chart without needing to create objects such as price ranges

Colours and settings

All the chart colours and other settings can be changed by the trader

Charts can be quickly switched between different colour themes

All chart colours (and other settings) are fully configurable

Charts can have a watermark, displaying the symbol name or even user-defined text

Charts can have background images, loaded from a URL, as well as a simple background colour

The scrollbar at the bottom of the chart, and the navigation options, can be turned on and off

The cursor type can be switched between cross-hairs, markers, and a simple arrow

Layouts and templates

Chart settings, templates, and workspaces can be saved and re-loaded, and charts can be popped out into new browser windows

Indicators can be saved as a "study" for loading onto other charts

Charts can be saved as templates

The charting area can be switched between different layouts - a tabbed view or multiple charts side by side

An entire workspace of multiple charts can be saved for re-use in future

Chart actions can be quickly undone

Charts can be popped out into a new browser window (which can then be moved onto a second monitor)

Chart data

FX Blue Labs can run its own price server for you, adding extra timeframes including sub-minute periods such as tick candles and seconds candles, and allowing the trader to choose their own time zone for the chart

Charts can have sub-windows displaying data for other instruments

The time zone used for the chart data can be changed

The charting provides tick candles (made up of each batch of e.g. 10 ticks rather than being time-based)

The charting provides seconds candles: sub-minute periods such as 10-seconds

The charting provides the full range of minute periods

The charting provides the full range of hour periods

The charting provides daily, weekly, and monthly candles

The prices in the chart can be inverted (e.g. turning EUR/USD into USD/EUR)