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):