How can I add text as a jqplot canvasOverlay?

Question

I'd like to overlay a label on a jqplot chart. The label should consist of text or ideally, any markup. I've examined the documentation and examples, and can't find examples of arbitrary labels in the main jqplot chart area.

Related features of jqplot: canvasOverlay is used to draw arbitrary lines on the chart. Additionally, the 'title' label exists, but sits outside the chart.

It seems like this should be simple. Some options:

1. Change jqplot CSS for the main label to move it inside the chart.
2. New label in jqplot.
3. Problem scope is really outside jqplot, and proper solution is generic using Canvas.

Thanks in advance!

Answer 1

Found a solution, posted by Chris Leonello the jqplot author to the google groups in 2010: https://groups.google.com/forum/?fromgroups=#!topic/jqplot-users/GDZW4BsDMiA

Chris' solution is to place this line after the plot1 code, and it works well for me.

mytitle = $('<div class="my-jqplot-title" style="position:absolute;text-align:center;padding-top: 15px;width:100%">My Custom Chart Title</div>').insertAfter('.jqplot-grid-canvas');

Answer 2

Try doing it in HTML5 Canvas, like this:

<script type="text/javascript">
window.addEventListener('load', function () {
  // Get the canvas element.
  var elem = document.getElementById('chart1');
  if (!elem || !elem.getContext) {
    return;
  }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context) {
    return;
  }

  // Let's draw "Hello world!" in blue.
  context.fillStyle    = '#00f';

  // The font property is like the CSS font property.
  context.font         = 'italic 30px sans-serif';
  context.textBaseline = 'top';

  if (context.fillText) {
    context.fillText('Hello world!', 0, 0);
  }

  // It looks like WebKit doesn't support the strokeText method.
  // Tested on Ubuntu 8.10 Linux in WebKitGTK revision 38095 (2008-11-04, svn 
  // trunk build).
  context.font = 'bold 30px sans-serif';
  if (context.strokeText) {
    context.strokeText('Hello world!', 0, 50);
  }
}, false);
</script>