Annotations Demo

author(s): Black Label

HTML

<link rel="stylesheet" href="https://blacklabel.github.io/annotations/css/styles.css">
<script src="https://code.highcharts.com/stock/js/highstock.js"></script>
<script src="https://blacklabel.github.io/annotations/js/annotations.js"></script>
<h3>Add annotation via buttons</h3>
<div id="container"></div>
<button id="btn">Hide all</button>

JavaScript

$(function() {

function hideAll () {
	const els = document.querySelectorAll('[class^=annotation]')
  els.forEach((el) => {
    console.log(el.parentNode)
    const parent = el.parentNode
    parent.parentNode.removeChild(el.parentNode)
  })
}

document.getElementById('btn').addEventListener('click', hideAll)


var options = {
    chart: {
      renderTo: 'container',
      marginTop: 50
    },
    xAxis: {
      min: 0,
      max: 10
    },
    title: {
      useHTML: true,
      x: -10,
      y: 8,
      text: '<span class="chart-title"> Drag and drop on a chart to add annotation  <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    annotations: [{
      title: {
        text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
        style: {
          color: 'red'
        }
      },
      anchorX: "left",
      anchorY: "top",
      allowDragX: true,
      allowDragY: true,
      x: 515,
      y: 155
    }, {
      title: 'drag me <br> horizontaly',
      anchorX: "left",
      anchorY: "top",
      allowDragY: false,
      allowDragX: true,
      xValue: 4,
      yValue: 10,
      shape: {
        type: 'path',
        params: {
          d: ['M', 0, 0, 'L', 110, 0],
          stroke: '#c55'
        }
      }
    }, {
      title: 'on point <br> drag&drop <br> disabled',
      linkedTo: 'high',
      allowDragY: false,
      allowDragX: false,
      anchorX: "center",
      anchorY: "center",
      shape: {
        type: 'circle',
        params: {
          r: 40,
          stroke: '#c55'
        }
      }
    }, {
      x: 100,
      y: 200,
      title: 'drag me <br> verticaly',
      anchorX: "left",
      anchorY: "top",
      allowDragY: true,
      allowDragX: false,
      shape: {
        type: 'rect',
        params: {
          x: 0,
          y: 0,
          width: 55,
          height: 40
        }
      }
...