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');
})