jQplot with tooltip for the peak value?

Question

Is there a way to display a tooltip or bubble as per the image below to show the highest value in the line graph? It should be visible at all time not just when roll over with the mouse.

Does jQplot support this? If not, is there any other graphing librabry that does this?

Many thanks.

Answer 1

With jqplot, this is possible using the pointLabels plugin:

JS:

$(document).ready(function(){
  var line1 = [[0,14,null],[1,32,null], [2,41,null], [3,44,'Hello World!'], [4,40,null], [5,47,null], [6,53,null], [7,67,null]]; // Only the 'Hello World' will have a label
  var plot1 = $.jqplot('chart1', [line1], {
      title: 'Chart with Point Labels', 
      seriesDefaults: { 
        showMarker:false,
        pointLabels: { show:true } 
      }
  });
});

CSS for bubble (from here):

#chart1 .jqplot-point-label {
    width: 100px;
    height: 25px;
    padding: 0px;
    background: #CC857E;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding-top: 10px;
    margin-bottom: 8px;
}
.jqplot-point-label:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 10px 0;
    border-color: #CC857E transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -10px;
    left: 40px;
}

Produces this (fiddle here):

Answer 2

In the highstock you can use flags like this

Other options is using renderer to add custom shapes: http://api.highcharts.com/highstock#Renderer