Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<div id="runtime-annotation">
    <div id="0.06088421709933667" class="annotation-popup" onclick="event.stopPropagation()">
                <div class="annotation-header">
                    <div title="Pin to chart" onclick="window.togglePinnedAnnotation('0.06088421709933667')" class="annotation-pin-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 32 32" width="18px" height="18px"><path d="M 20.46875 2.5625 L 19.75 3.3125 C 18.707031 4.460938 18.207031 5.917969 18.09375 7.375 L 14.03125 11.4375 C 11.558594 11 8.902344 11.691406 7 13.59375 L 6.28125 14.3125 L 7 15 L 11.3125 19.3125 L 3 27.59375 L 3 29 L 4.40625 29 L 12.6875 20.6875 L 16.90625 24.90625 L 17.59375 25.625 L 18.3125 24.90625 C 20.410156 22.808594 21.003906 19.933594 20.375 17.34375 L 23.9375 13.78125 C 25.675781 13.988281 27.449219 13.488281 28.71875 12.21875 L 29.40625 11.5 L 28.71875 10.78125 L 21.21875 3.28125 Z M 20.6875 5.625 L 26.375 11.3125 C 25.550781 11.78125 24.660156 12.070313 23.75 11.84375 L 23.1875 11.6875 L 18.15625 16.71875 L 18.34375 17.3125 C 18.929688 19.074219 18.660156 21.0625 17.5 22.6875 L 9.3125 14.5 C 10.765625 13.5 12.519531 13.042969 14.15625 13.46875 L 14.6875 13.625 L 20 8.3125 L 20 7.90625 C 20 7.101563 20.292969 6.34375 20.6875 5.625 Z"></path></svg>
                        </div>
                    <div class="annotation-color-icon" onclick="window.changeAnnotationColor('0.06088421709933667', event.target.getAttribute('color'))">
                        <div color="yellow" class="annotation-yellow">
                            <div color="yellow" class=""></div>
                        </div>
                        <div color="green" class="annotation-green">
                            <div color="green" class=""></div>
                        </div>
                        <div color="red" class="annotation-red">
                            <div color="red" class=""></div>
                        </div>
       ...

CSS

.annotation-popup {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    width: 300px;
    min-height: 80px;
    max-height: 100px;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 2px 2px 4px #2b2b2b, 0px 0px 0px #ffffff;
    position: absolute;
    z-index: 100000000000;
    padding: 2px 3px;
}

.annotation-popup>* {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    flex-direction: row;
    margin: 0px 3px;
}

.annotation-pin-icon {
    fill-opacity: 0.7;
    cursor: pointer;
}

.annotation-action-buttons {
    cursor: pointer;
    fill-opacity: 0.7;
}

.annotation-color-icon {
    display: flex;
    margin-left: auto;
    margin-top: 6px;
    margin-right: 18px;
}

.annotation-color-icon>* {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 8px;
}

.annotation-selected-color {
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
}

.annotation-yellow {
    background: #fbd92b;
}

.annotation-yellow>.annotation-selected-color {
    border-color: #fbd92b;
}

.annotation-green {
    background: #5bce02;
}

.annotation-green>.annotation-selected-color {
    border-color: #5bce02;
}

.annotation-red {
    background: #f45e2a;
}

.annotation-red>.annotation-selected-color {
    border-color: #f45e2a;
}

.annotation-blue {
    background: #4262ff;
}

.annotation-blue>.annotation-selected-color {
    border-color: #4262ff;
}

.annotation-black {
    background: #050038;
}

.annotation-black>.annotation-selected-color {
    border-color: #050038;
}

.annotation-text {
    font-family: Formular, sans-serif;
    font-weight: bold;
}

.runtime-annotation {
    display: flex;
}

#runtime-annotation-text {
    background: white;
    color: #666;
    outline: none;
    width: 300px;
    border:none;
    resize: none;
}

.annotation-header {
  ...

TypeScript

function setElementDraggable(element: HTMLElement, headerElement: HTMLElement) {

      let pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;

      if (headerElement) {
        headerElement.onmousedown = dragMouseDown; // if present, the header is where you move the DIV from:
      } else {
        element.onmousedown = dragMouseDown; // otherwise, move the DIV from anywhere inside the DIV:
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        element.style.top = (element.offsetTop - pos2) + "px";
        element.style.left = (element.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
    
		setElementDraggable(document.getElementById(0.06088421709933667), undefined);