Highcharts Demo

author(s): Torstein Hønsi

by Gert Vaartjes

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://github.highcharts.com/789f97aeb5f59e5e1c308b659c1f3a20740802df/highstock.js"></script>

<script src="https://github.highcharts.com/789f97aeb5f59e5e1c308b659c1f3a20740802df/modules/annotations-advanced.js"></script>

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

<div class="tools-container">
  <button class="highcharts-circle-annotation">Add Circle</button>
</div>

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

<!--custom popup change color -->
<div class="highcharts-popup highcharts-popup-annotations">
  <div class="highcharts-popup-wrapper">
    <label for="stroke">Color</label>
    <input type="text" name="stroke" />
  </div>
  <button>Save</button>
</div>

CSS

.highcharts-popup {
  background: #fff;
  display: none;
  height: 116px;
  left: calc(50% - 120px);
  top: calc(50% - 105px);
  padding: 20px;
  position: absolute;
  width: 200px;
  z-index: 10;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(133, 133, 133, 0.3);
  -moz-box-shadow: 0px 0px 11px 0px rgba(133, 133, 133, 0.3);
  box-shadow: 0px 0px 11px 0px rgba(133, 133, 133, 0.3);
}

.highcharts-popup input,
.highcharts-popup label,
.highcharts-popup select {
  color: #666;
  float: left;
  font-size: 0.876em;
  margin-left: 0px;
  margin-bottom: 5px;
  padding: 5px;
  width: calc(100% - 14px);
}

.highcharts-popup select {
  width: 100%;
}

.highcharts-popup label {
  padding-left: 0px;
}

.highcharts-popup .highcharts-close-popup {
  cursor: pointer;
  display: block;
  padding: 5px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.highcharts-popup .highcharts-close-popup:hover {
  background-color: #e6ebf5;
}

.highcharts-popup button {
  font-size: 0.876em;
  float: right;
  margin-top: 20px;
  padding: 5px 10px;
}

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          var chart = this;
          document.querySelectorAll('.highcharts-popup-annotations button')[0].addEventListener(
            'click',
            function() {
              var color = document.querySelectorAll(
                '.highcharts-popup-annotations input[name="stroke"]'
              )[0].value;
							debugger;
              chart.currentAnnotation.shapes[0].update({
                /*typeOptions: {
                  backgroundColors: [color, color, color, color, color, color]
                }*/
                options: {
                	stroke: 'red'
                }
              });

              chart.stockToolbar.annotationsPopupContainer.style.display = 'none';
            }
          )
        }
      }
    },
    stockTools: {
      gui: {
        toolbarClassName: 'tools-container',
        enabled: false
      },
      events: {
        showPopup: function(event) {

          if (!this.annotationsPopupContainer) {
            this.annotationsPopupContainer = document
              .getElementsByClassName('highcharts-popup-annotations')[0];
          }

          if (event.formType === 'annotation-toolbar') {
            this.chart.currentAnnotation = event.annotation;
            this.annotationsPopupContainer.style.display = 'block';
          }

        },
        closePopup: function() {
          this.annotationsPopupContainer.style.display = 'none';
          this.chart.currentAnnotation = null;

        }
      }
    },
    title: {
      text: 'AAPL Stock Price'
    },

    series: [{
      id: 'aapl',
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});