Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

Introduction

ChartIQ is a JavaScript library and W3C-standard web component framework. ChartIQ charts display time series data (such as stock quotes), financial term structures (such as interest rate yield curves), and free-form x/y data in web-based and mobile applications.

Chart features include interactive chart navigation (such as panning and zooming), Section 508 compliance, an extensive set of drawing tools, a comprehensive suite of technical indicators, multi-panel views with drag-and-drop configuration, internationalization support, and much more.

ChartIQ requires no external libraries and is fully compatible with React, Angular, and Vue.

To see live charts created with ChartIQ, go to our demo site or our collection of JSFiddles.

Getting started

To get a copy of the library, see the Getting the SDK tutorial.

If you're completely new to the library, check out our Quick Start guide to learn how to implement a basic chart, integrate the chart with a data feed, and build a simple chart user interface.

If you feel comfortable jumping right in, ChartIQ supports three development strategies:

  • Sample templates — Take advantage of ready-made chart user interfaces constructed with W3C Web Components.

  • GitHub projects — Get a head start developing in Angular, React, Vue, iOS, or Android with one of our public repos

  • Library API — Use the library API in your programming environment to build a custom charting application

See the UI Development Methodologies tutorial for more information.

Using the documentation

Take a look at our extensive library of tutorials. Read what's relevant to your use case. Learn as you go.

Consult our API reference for all the details of instantiating classes, calling library functions, referencing namespaces, and more.

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

End-user documentation

The ChartIQ User Guide provides help with using our advanced charting application, technical-analysis-chart.html. The guide explains all user interface elements — what they do, how to use them.

The ChartIQ Charts and Studies Guide provides a comprehensive guide to the chart styles, types, and studies available in ChartIQ.

Download the guides, customize them to match your application (they are Word documents), add your branding, and deliver them to your end users to help them make the most of your charts with the least amount of effort (for everybody).

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, and 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 quote feed to do this). This is very different from 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 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 from 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!