My working demo to learn how to use Highcharts

stock-master-demo

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

<!-- Dark Unica theme -->
<script>
    /**
 * (c) 2010-2017 Torstein Honsi
 *
 * License: www.highcharts.com/license
 *
 * Grid-light theme for Highcharts JS
 * @author Torstein Honsi
 */


/* global document */
// Load the fonts
Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
 }, null, document.getElementsByTagName('head')[0]);

 Highcharts.theme = {
    colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
       '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
    chart: {
       backgroundColor: {
          linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
          stops: [
             [0, '#2a2a2b'],
             [1, '#3e3e40']
          ]
       },
       style: {
          fontFamily: '\'Unica One\', sans-serif'
       },
       plotBorderColor: '#606063'
    },
    title: {
       style: {
          color: '#E0E0E3',
          textTransform: 'uppercase',
          fontSize: '20px'
       }
    },
    subtitle: {
       style: {
          color: '#E0E0E3',
          textTransform: 'uppercase'
       }
    },
    xAxis: {
       gridLineColor: '#707073',
       labels: {
          style: {
             color: '#E0E0E3'
          }
       },
       lineColor: '#707073',
       minorGridLineColor: '#505053',
       tickColor: '#707073',
       title: {
          style: {
             color: '#A0A0A3'

          }
       }
    },
    yAxis: {
       gridLineColor: '#707073',
       labels: {
          style: {
             color: '#E0E0E3'
          }
       },
       lineColor: '#707073',
       minorGridLineColor: '#505053',
       tickColor: '#707073',
       tickWidth: 1,
       title: {
          style: {
             color: '#A0A0A3'
          }
       }
    },
    tooltip: {
       backgroundColor: 'rgba(0, 0, 0, 0.85)',
       style: {
          color: '#F0F0F0'
       }
    },
    plotOptions: {
       series: {
          dataLabels: {
             color: '#B0B0B3'
          },
          marker: {
             lineColor: '#333'
          }
       },
       boxplot: {
          fillColor: '#505053'
       },
       candlestick: {
          lineColor: 'white'
       },
       errorbar: {
          color: 'white'
       }
    },
    legend: {
       itemStyle: {
          color: '#E0E0E3'
       },
       itemHoverStyle: {
          color: '#FFF'
       },
       itemHiddenStyle: {
          color: '#606063'
       }
    },
    credits: {
       style: {
          color: '#666'
       }
    },
    labels: {
       style: {
          color: '#707073'
       }
    },

    drilldown: {
       activeAxisLabelStyle: {
          color: '#F0F0F3'
       },
       activeDataLabelStyle: {
          color: '#F0F0F3'
       }
    },

    navigation: {
       buttonOptions: {
          symbolStroke: '#DDDDDD',
          theme: {
             fill: '#505053'
          }
       }
    },

    // scroll charts
    rangeSelector: {
       buttonTheme: {
          fill: '#505053',
          stroke: '#000000',
          style: {
             color: '#CCC'
          },
          states: {
             hover: {
                fill: '#707073',
                stroke: '#000000',
                style: {
                   color: 'white'
                }
             },
             select: {
                fill: '#000003',
                stroke: '#000000',
                style: {
                   color: 'white'
                }
             }
          }
       },
       inputBoxBorderColor: '#505053',
       inputStyle: {
          backgroundColor: '#333',
          color: 'silver'
       },
       labelStyle: {
          color: 'silver'
       }
    },

    navigator: {
       handles: {
          backgroundColor: '#666',
          borderColor: '#AAA'
       },
       outlineColor: '#CCC',
       maskFill: 'rgba(255,255,255,0.1)',
       series: {
          color: '#7798BF',
          lineColor: '#A6C7ED'
       },
       xAxis: {
          gridLineColor: '#505053'
       }
    },

    scrollbar: {
       barBackgroundColor: '#808083',
       barBorderColor: '#808083',
       buttonArrowColor: '#CCC',
       buttonBackgroundColor: '#606063',
       buttonBorderColor: '#606063',
       rifleColor: '#FFF',
       trackBackgroundColor: '#404043',
       trackBorderColor: '#404043'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#C0C0C0',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'
 };

 // Apply the theme
 Highcharts.setOptions(Highcharts.theme);
</script>
<!-- End of theme -->

<!-- Draw chart -->
<script>
var seriesOptions = [],
seriesCounter = 0,
names = ['AAPL', 'GOOGL', 'MSFT', 'AAPL'];

/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {

Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 4
    },

    yAxis: {
        labels: {
            formatter: function () {
                return (this.value > 0 ? ' + ' : '') + this.value + '%';
            }
        },
        plotLines: [{
            value: 0,
            width: 2,
            color: 'silver'
        }]
    },


    title: {
        text: 'Stock Master'
    },
    subtitle: {
        text: 'Stay updated'
    },

    plotOptions: {
        series: {
            compare: 'percent',
            showInNavigator: true
        }
    },

    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
        valueDecimals: 2,
        split: true
    },

    series: seriesOptions
});
}

$.each(names, function (i, name) {

    $.getJSON('https://www.quandl.com/api/v3/datasets/wiki/' + name.toLowerCase() + '.json?start_date=2016-01-01&end_date=2017-11-02&order=asc&column_index=4&api_key=enterYourAPIKey',    function (result) {
        let formattedData = result.dataset.data.map(element => {
            return [
                (new Date(element[0])).getTime(),
                element[1]
            ]
        });

        seriesOptions[i] = {
            name: name,
            data: formattedData
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === names.length) {
            createChart();
        }
    });
});
</script>