Documentation for versions prior to m-2016-12-01 can be found here.


Introduction

ChartIQ is a professional-grade charting solution for financial, time-series data. Built with HTML5 Canvas and in conformance with web standards, it runs on all modern browsers and touch devices out of the box. Features include interactive chart navigation (such as panning and zooming), drawing tools, multi-panel view with drag-and-drop configuration of multiple stocks and studies, and a full suite of technical indicators. The library is fully compatible with all modern web frameworks (such as React, Angular, and Vue) and requires no external libraries to run.

To see the library in action, see the demo and our collection of JSFiddles.

Learn more about the world's most powerful HTML5 charts or contact us today.

Getting Started

To get a copy of the library, follow the instructions here.

If you are completely new to the library, check out our Quick Start guide, which details a basic installation with UI customization and integration with a data feed.

If you feel comfortable jumping right in, the library offers three options to suit your development requirements:

1) Plug-and-play - Take advantage of a fully-featured user interface built with W3 Web Components and jQuery.

2) Starter Kit - Get a head start developing in Angular, React, Java, iOS, or Android with one of our starter kits.

3) Advanced - Just use the rendering engine and build your own user interface.

Read more about these UI methodologies here. Note: All of these methodologies use the same underlying library API. This is a decision on (1) how you want your app to look and (2) how you wish to architect your app.

How to Use the Documentation

Take a look at our extensive library of tutorials. There's no need to read them all -- simply pick what's relevant to your use case.

You may also find our API reference useful for your more specific questions.

If you can't find something, try the Search option in the upper right corner.

Developer Overview

JavaScript version support

In order to keep the library compatible with most modern browsers, we use ES5 (EcmaScript 5) standards on our core library, which is the JavaScript version used in the “HTML5” world. As such, ES6 will also be fully supported since all ES5 syntax is compatible with ES6.

Our Web Components UI wrapper leverages ES6 capabilities/syntax in order to support Web Components Version 1, embedded on all modern browsers.

Browser and OS version support

The Charting Library will support all current release versions of all major browsers running on Windows, macOS, Android and iOS operating systems; so long as mainstream support is still being provided by the OS and the browser combination.

The Library's focus is on highly interactive charts

An interactive chart is one that can be panned and zoomed quickly and easily by the end user. The end user can add content to the chart (studies, comparison symbols). The user can quickly flip between symbols. The user can change chart type, range, interval, etc. The libraries API, data model, layout are all based on this underlying requirement. This may differ from other charting tools that are focused primarily on static charts.

To streamline library functionality and use it as a static chart, see the Creating Static Charts tutorial, after you have connected your data to the chart..

The Library's focus is on charting market data (aka "stock charts")

Many choices in API design and interactivity defaults have been made with a preference towards traders. In particular, the charts are optimized for technical analysis (the use of charts for trading securities). For instance, the data model assumes Open, High, Low and Close values. Other charting tools are typically focused on generic "time series" charting (for instance, charting temperature over the past century). ChartIQ can be used for generic time series charting (analytics for instance) but the API is intended to make stock charting the easiest.

You host the library. You provide the market data.

You will receive the ChartIQ Library as a zip file which contains the core library (chartiq.js), UI templates, examples and support files. You host the the library on your own servers, as part of your application. You must provide a source of data. Typically, the source of data is a market data server you attach to the chart engine via a quote feed, but you can also use static data files.

An "event based" data model is recommended for highly interactive stock charts

Highly interactive charts require fetching data in response to user activity - changing symbol, adding a comparison, changing interval, paginating, streaming. Managing the "state" of a chart can quickly become difficult, so we've designed the library to manage its own state. Instead of feeding data into the chart, the chart will ask you for the data it needs (you write code called a "quotefeed" to do this). This is very different than most charting tools. It requires a little bit more effort and understanding at the beginning but saves a lot of work.

ChartIQ makes a distinction between "the chart" and the "UI" that controls the chart

The charting library creates a chart inside of a div tag. The chart can be controlled either by a user interface (menus, dialogs, symbol entry) or it can be controlled with the API (calling functions). The UI is optional. This is different than many stock charting tools that come with a hard coded user interface (which probably would look terrible in your app!).

Need Help?

Please feel free to contact us with any questions!

[email protected]