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://code.highcharts.com/stock/highstock.js"></script>

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

<script src="https://code.highcharts.com/stock/modules/stock-tools.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>

<div class="tools-container">
  <button class="highcharts-circle-annotation button">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="color" name="stroke" value="#ff0000" />
  </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;
}

.button {
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button {
  background-color: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
}

.button:hover,
button.active {
  background-color: white;
  color: black;
}

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          // function which saves the new background color.
          var chart = this;
          // Select the save button of the popup and assign a click event
          document.querySelectorAll('.highcharts-popup-annotations button')[0].addEventListener(
            'click',
            function() {
              var color = document.querySelectorAll(
                '.highcharts-popup-annotations input[name="stroke"]'
              )[0].value;

              // update the circle
              chart.currentAnnotation.shapes[0].update({
                fill: color
              });

              // close the container
              chart.stockToolbar.annotationsPopupContainer.style.display = 'none';
            }
          )
        }
      }
    },
    navigation :{
    	bindingsClassName: 'tools-container'
    },
    stockTools: {
      gui: {
        enabled: false
      },
      events: {
      	// on selecting the annotation the showpopup is fired
        showPopup: function(event) {
          if (!this.annotationsPopupContainer) {
            // Get the popup annotations container
            this.annotationsPopupContainer = document
              .getElementsByClassName('highcharts-popup-annotations')[0];
          }

          // Unhide the popup container, but not when we add the annotation.
          if (event.formType === 'annotation-toolbar' && !this.chart.activeButton) {
            this.chart.currentAnnotation = event.annotation;
            this.annotationsPopupContainer.style.display = 'block';
          }

        },
        // Hide the popup container, and reset currentAnnotation
        closePopup: function() {
          this.annotationsPopupContainer.style.display = 'none';
          this.chart.currentAnnotation = null;
        },
        //...