How to display an overlay label on a chart?

Answer 1

In order to dynamically center some type of label in each quadrant of the graph, you'll have to have some way of calculating the coordinates. Of course, I'm not really familiar with Birt and I'm making the assumption that the graph's red markers will vary.

Anyway, assuming that you can get the coordinates, you could write a function that would dynamically generate the label based on a couple of parameters:

function generateLabel(sContent, iXoffset, iYoffset) {

  var eLabel = document.createElement('span');
  eLabel.appendChild(document.createTextNode(sContent));

  var eDivision = document.createElement('div');
  eDivision.appendChild(eLabel);

  eDivision.style.left = iXoffset + 'px';
  eDivision.style.top = iYoffset + 'px';
  // include other styles here...

  return eDivision;

}

and then from there, you can call this function with the set label content and offset coordinates:

var eQuadrantOneLabel = generateLabel('Quadrant One', 10, 25);
// and so on...

Then just add the element to the graph's container (assuming that is has an id of, say, graph):

var eGraphContainer = document.getElementById('graph');
eGraphContainer.appendChild(eQuadrantOneLabel);
// and so on for each label...