Highcharts-TraderMade-Data

Use our API to plot data in highcharts

by rahulkhanna

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>

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

JavaScript

Highcharts.getJSON('https://marketdata.tradermade.com/api/v1/timeseries?currency=EURUSD&api_key=apikey&start_date=2021-01-01&end_date=2021-03-01&format=split', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        data = data["quotes"]["data"]
        dataLength = data.length,
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            Number(moment(data[i][0]).format('x')), // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

    }

    Highcharts.stockChart('container', {
        yAxis: [{
            labels: {
                align: 'center',
                // rotation:30,
                overflow: 'left',
                style:{
                color:"#666666",
                cursor:"default",
                fontSize:"11px",
                }
            },
            showLastLabel: true,
            resize: {
                enabled: true
            }
        }],
        tooltip: {
            shape: 'square',
            headerShape: 'callout',
            borderWidth: 0,
            shadow: false,
            positioner: function (width, height, point) {
                var chart = this.chart,
                    position;

                if (point.isHeader) {
                    position = {
                        x: Math.max(
                            // Left side limit
                            chart.plotLeft,
                            Math.min(
                                point.plotX + chart.plotLeft - width / 2,
                                // Right side limit
                                chart.chartWidth - width - chart.marginRight
                            )
                        ),
                        y: point.plotY
                    };
                } else {
                    position = {
                        x: point.series.chart.plotLeft,
      ...