Chart.js Financial Charting

Chart.js module for Candlestick and OHLC charts

Roadmap

Chart.js 2.7.0 added our timeseries scale as new option called distribution: series. This has greatly improved support for financial timeseries.

Chart.js 2.7.1 added fixes for timeseries.

Chart.js 2.7.2 added formatting of timestamps in tooltips.

Chart.js 2.7.3 included a fix for hovering.

Chart.js 2.8.0 added datetime adapters and time scale performance improvements. This allows users to use a datetime library of their choosing such as Luxon in order to get i18n and timezone support

Chart.js 2.9.0 added improved autoskipping, support for floating bars, better support for mixed chart types, and numerous performance improvements.

Chart.js 3.0.0 removed the need for custom scales, which means logarithmic scale is now supported. It also has numerous performance improvements.

Chart.js 4.0.0 has some breaking changes that required modifying this library configuration. Check the updated examples to see which changes are necessary.

Comparison

We are aiming to make Chart.js the only popular JavaScript library that is both performant and has good timescale handling.

Most chart libraries don't have great handling of timescale axes and will not always choose the first of the month, year, etc. as labels. This library leverages the concept of major ticks that we introduced in Chart.js. E.g. it will make sure that the first day of each month is plotted before plotting days in between.

One of the best libraries we've found for financial charts is react-stockcharts. However, it ties the user to utilizing React.

Because Chart.js utilizes canvas it is more performant than the majority of JavaScript charting libraries. In a benchmark of the fastest JavaScript chart libraries, Chart.js performs respectably. Chart.js is slower than some of the fastest libraries like uPlot because it accepts varied input (parsing, linear and timeseries support in time scale, etc.) and has animation support (which is still costly even when off due to the way the code is structured).

Documentation

As we near an initial release we will add additional documentation. For now, please see the docs directory.

Examples

Examples are available here: https://chartjs.github.io/chartjs-chart-financial/

Date Libraries & IE Support

IE may not be supported because we use some newer ES features. We will need to apply Babel to fix this

Chart.js requires that you supply a date library. The examples utilize chartjs-adapter-luxon, which has the best support for i18n and time zones. However, in order to use Luxon with IE you need to supply polyfills. If you require IE support you may find it easier to use another date library like Moment or date-fns. Please see the Chart.js documentation for more details on date adapters.

Related Plugins

The plugins below may be particularly interesting to use with financial charts. See the Chart.js plugin API and longer list of plugins for more info about Chart.js plugins generally.

• chartjs-plugin-zoom
• chartjs-plugin-crosshair (demo)
• chartjs-plugin-streaming (demo)

Building

npm install
gulp build