HighCharts

Power your website with charts, gauges and other widgets from HighCharts.js with TAAPI.IO data.

Getting started

To get started, you’re gonna need a few things

Price Chart

Setting up a live updating price chart is easy. Simply make a new HTML file and add a few dependencies

// High Charts
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

// jQuery
<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>

// TAAPI.IO
<script src="https://taapi.io/demo/highcharts/taapi.js"></script>

Second, you’ll need a container to assign the chart to

<div id="container"></div>

After that create your HighCharts chart. The following example displays a stripped down chart, just like the one you see above. Put this JS code in a new file:


var taapi = new Taapi("wss://my-taapi-streamer");

taapi.init();

const candlesKey = "btcusdt_candles_1m";

var chart = null;

taapi.connect(chart, function (snapshot) {
    
    // create the chart
    chart = Highcharts.stockChart('container', {

        title: {
            //text: 'TAAPI.IO + HighCharts (BTC/USDT)'
        },

        chart: {
            events: {
                load: function() {

                    // Wait for chart to load
                    setTimeout( () => {
                        taapi.setChart(chart, candlesKey);

                        document.addEventListener("taapi-data", function(e) {
                            taapi.updatePriceChart(e.detail[candlesKey]);
                            $("#rsi_container").html(e.detail.btcusdt_rsi_1m.value);
                            $("#ema200_container").html(e.detail.btcusdt_ema_200_1m.value);
                        });
                        
                        
                    }, 2000);                    
                }
            },
        },

        navigator: {
            enabled: false
        },

        exporting: {
            enabled: false
        },

        tooltip: {
            //enabled: false,
            split: false,
            //shared: true,
        },

        scrollbar: {
            enabled: false
        },

        rangeSelector: {
            buttons: [],
            selected: 1,
            inputEnabled: false
        },

        yAxis: {
            visible: false,
            /* crosshair: {
                enabled: false
            } */
        },

        xAxis: {
            visible: false,
            left: -30,
            scrollbar: { enabled: false },
            crosshair: {
                enabled: false
            }
        },

        series: [{
            name: 'BTC/USDT',
            type: 'candlestick',
            data: snapshot[candlesKey],
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

Import this new file in your index.html file, just below the other dependencies, and that should do it!

Widgets

HighCharts comes with a ton of widgets. Example of an Activity widget showing a few indicator values for BTC/USDT on the minute chart.

CMF

Chaikin Money Flow (CMF) developed by Marc Chaikin is a volume-weighted average of accumulation and distribution over a specified period. The standard CMF period is 21 days. The principle behind the Chaikin Money Flow is the nearer the closing price is to the high, the more accumulation has taken place. Conversely, the nearer the closing price is to the low, the more distribution has taken place. If the price action consistently closes above the bar’s midpoint on increasing volume, the Chaikin Money Flow will be positive. Conversely, if the price action consistently closes below the bar’s midpoint on increasing volume, the Chaikin Money Flow will be a negative value.

CHOP

The Choppiness Index (CHOP) is an indicator designed to determine if the market is choppy (trading sideways) or not choppy (trading within a trend in either direction). The Choppiness Index is an example of an indicator that is not directional at all. CHOP is not meant to predict future market direction, it is a metric to be used to for defining the market’s trendiness only. A basic understanding of the indicator would be; higher values equal more choppiness, while lower values indicate directional trending.

RSI

The relative strength index (RSI) is a momentum indicator that measures the magnitude of recent price changes to evaluate overbought or oversold conditions in the price of a stock or other asset. The RSI is displayed as an oscillator (a line graph that moves between two extremes) and can have a reading from 0 to 100.

That’s it!

As always, comments, feedback much appreciated!