Basic Chart with Legend

by MrSnrub

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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="div-container">

  <div id="div-highstock-stock-price-chart"></div>
  <div id="div-stock-price-legend"></div>
  <div style="clear: both;"></div>
  
</div>

CSS

#div-container {
  width: 940px;
  overflow: auto;
  margin: 0;
  padding: 0;
}

#div-highstock-chart,
#div-highstock-stock-price-chart,
#div-highstock-percentage-change-chart {
  float: left;
  height: 400px;
  width: 630px;
  
}
#div-legend,
#div-stock-price-legend,
#div-percentage-change-legend {

  margin-left: 632px;
  font-size: 0.8em;
  font-family: sans-serif;
  vertical-align: middle;
  width: 300px;
}

.ui-tabs .ui-tabs-panel {
  border: 1px solid #c5c5c5;
}

.ui-widget.ui-widget-content {
  border: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border: 0;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 0;
}



.ui-datepicker {
  z-index: 9999 !important;
}

.ui-tabs {
  background: none;
}

.ui-tabs ul.ui-tabs-nav {
  background: 0;
  border: 0;
}

/* Style li */
.ui-tabs .ui-state-active,
.ui-tabs .ui-widget-content .ui-state-active,
.ui-tabs .ui-widget-header .ui-state-active {
  border-top: 1px solid #c5c5c5;
  border-left: 1px solid #c5c5c5;
  border-right: 1px solid #c5c5c5;
  border-bottom: 0;
  background: #ffffff;
  font-weight: normal;
  color: #ff0000;
}
.ui-state-default, 
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, 
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background: none;
}
.ui-tabs .ui-state-default,
.ui-tabs .ui-widget-content .ui-state-default,
.ui-tabs .ui-widget-header .ui-state-default {
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #c5c5c5;
  border-left: 1px solid #c5c5c5;
  
  border-bottom: 0;
  
  font-weight: normal;
  color: #454545;
}

/* Style a */

.ui-tabs .ui-state-default .ui-tabs-anchor,
.ui-tabs .ui-state-active .ui-tabs-anchor {
  outline: none;
 ...

JavaScript

$(function () {

  Highcharts.setOptions({
    lang: {
      rangeSelectorZoom: ''
    }
  });
  
  var stock_price_series = [];
  var series_counter = 0;
  var names = ['MSFT', 'AAPL', 'GOOG'];


  var stock_price_chart_options = {

    chart: {
      renderTo: 'div-highstock-stock-price-chart',
      events: {
        load: function(e) {
          create_legend(e, "stock-price");
        }
      }
    },

    credits: {
      enabled: false
    },

    legend: {
      enabled: true,
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
      borderColor: 'black',
      borderWidth: 0.5
    },

    rangeSelector: {
      selected: 0,
      buttons: [{
        type: 'week',
        count: 1,
        text: '1w'
      }, {
        type: 'month',
        count: 1,
        text: '1m'
      }, {
        type: 'month',
        count: 3,
        text: '3m'
      }, {
        type: 'ytd',
        text: 'YTD'
      }, {
        type: 'year',
        count: 1,
        text: '1y'
      }, {
        type: 'year',
        count: 5,
        text: '5y'
      }, {
        type: 'all',
        text: 'All'
      }]
    },


    xAxis: {
      events: {
        afterSetExtremes: function(e) {
          create_legend(e, "stock-price");
         // set_extremes_of_other_chart(e, "percentage_change_chart");
        }
      }
    },

    tooltip: {
      pointFormat: '<span style="font-weight: bold;color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
      valueDecimals: 4
    },

    series: stock_price_series

  }; // end define stock_price_chart_options variable.


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

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {

      stock_price_series[i] = {
        name: name,
        data: data
      };

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and...