Paul Jaker

HighChart

by Black Label

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://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/exporting.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="mainContainer">
	<div id="container" class="chart"></div>
	<div id="popup">
		some popup
		<br>
		<button id="popupClose">Close popup</button>
	</div>
</div>

CSS

#mainContainer {
	position: relative;
	height: 400px;
}

#popup {
	position: absolute;
	border: 1px solid red;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	visibility: hidden;
	padding: 20px;
	background: white;
}

JavaScript

function indicator_hide(series) {
  series.setVisible();
}

function indicator_remove(series) {
  series.remove();
}

function indicator_settings(series) {
  const popupEl = document.getElementById('popup');

  popupEl.style.visibility = "visible";
}



Highcharts.getJSON('https://api.npoint.io/0a4122f134b91d347536', function(data) {
  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    i = 0;

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

    volume.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
  }

  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          this.legend.allItems.forEach(item => {
            const btns = item.legendItem.element.children;

            btns[0].addEventListener('click', () => indicator_hide(item));
            btns[1].addEventListener('click', () => indicator_remove(item));
            btns[2].addEventListener('click', () => indicator_settings(item));
          });

          document.getElementById('popupClose').addEventListener('click', function() {
            this.parentElement.style.visibility = "hidden";
          });
        }
      }
    },
    legend: {
      enabled: true,
      useHTML: true,
      labelFormatter: function() {
        return this.name + ' <button>Toggle</button>' +
          '<button>Remove</button>' +
          '<button>Settings</button>';
      }
    },
    plotOptions: {
      series: {
        showInLegend: true,
        events: {
          legendItemClick: function() {
            return false;
          }
        }
      }
    },

    rangeSelector: {
      buttonPosition: {
        align: 'left',
        // x: '0',
        y: '-1',
      },

      allButtonsEnabled: true,
      buttons: [{
          count: 180,
         ...