<div id="myChart">
  
  <form id="addNote">
    <input type="text">
    <input type="submit">
  </form>
  
</div>

body {
  font-family: Arial;
  margin: 0;
}

#myChart {
  height: 500px;
  width: 600px;
  margin: 0 auto;
}

#addNote {
  opacity: 0;
  transition: .3s linear;
  background-color: #eee;
  padding: 25px;
  position: fixed;
  top: 25%;
  left: 40%;
  z-index: 9999;
  border-radius: 4px;
}

#addNote.open {
  opacity: 1;
}

var chartData = [1,2,3,4];

var myConfig = {
  type: "bar",
  title: {
    text: 'Click A Chart Node To Add Annotation'
  },
  plot: {
    selectionMode: 'multiple',
    selectedState: {
      backgroundColor: 'black'
    }
  },
  series: [
    {
      values: chartData
    }
  ]
};

var chart = zingchart.render({
  id: "myChart",
  data: myConfig
});
// Grabs the <form> element from the DOM
var form = document.querySelector('#addNote');
// Creates variables that will hold node_click x & y coordinates
var xValue = 0;
var yValue = 0;
// This function stores node_click x and y coordinates
chart.bind('node_click', function(e) {
  var nodeXValue = e.x;
  var nodeYValue = e.y;
  // Re-assigns variables to original xValue and yValue variables
  xValue = nodeXValue;
  yValue = nodeYValue;
  // Adds open class to our <form> element
  form.classList.add('open');  
});
// This event listener function fires when our <form> element is submitted
form.addEventListener('submit', function(e) {
  // Prevents a <form> element submit without a value
  e.preventDefault();
  // Grabs the <input> text value from the DOM and assigns to a variable
  var note = form.querySelector('input[type="text"]').value;
  // Creates a ZingChart label object from the <input> text value submitted
  zingchart.exec('myChart', 'addobject', {
    type: 'label',
    data: {
      text: note,
      x: xValue,
      y: yValue,
      backgroundColor: '#eee',
      padding: [10, 25],
      borderRadius: 4,
    }
  });
  // Removes open class form <form> element
  form.classList.remove('open');
})