[Solved]-How to display tooltips or legends on plotBands?-Highcharts

It is actually possible to make quite elegant labels for gauge plotbands by attaching text to the svg path elements that are generated by Highcharts. By doing this, you can get text that actually follows the curve of the plotband. Specifically look at the code in the annonymous function that triggers after the gauge has initialised. You'll need to get the correct plotband object, assign an id attribute to the path element and then insert text and textPath elements (using createElementNS). You then link the newly-created textPath element using the xlink namespace. In my example I am applying labels for quartiles that are displayed as plotbands around the gauge.

Example:

 $(selector).highcharts({
             chart: {
                 type: 'gauge',
                 plotBackgroundColor: null,
                 plotBackgroundImage: null,
                 plotBorderWidth: 0,
                 plotShadow: false
             },
             title: {
                 //oConfig is my own config object
                 text: oConfig.TITLE,
                 style: {"color": "#333333", "fontSize": fontSize, "font-family": "Arial", "font-weight": "bold"}
             },
             pane: {
                 size: "100%",
                 startAngle: -150,
                 endAngle: 150,
                 background: [{
                     backgroundColor: '#FFF',
                     borderWidth: 0,
                     outerRadius: '100%',
                     innerRadius: '100%'
                 }]
             },
             /*the value axis*/
             yAxis: [{
                 min: oConfig.MIN,
                 max: oConfig.MAX,
                 minorTickInterval: 'auto',
                 minorTickWidth: 0,
                 minorTickLength: 10,
                 minorTickPosition: 'inside',
                 minorTickColor: '#666',
                 tickPixelInterval: 30,
                 tickWidth: 2,
                 tickPosition: 'inside',
                 tickLength: 10,
                 tickColor: '#666',
                 labels: {
                     step: 2,
                     rotation: 'auto'
                 },
                 title: {
                     text: null
                 },
                 plotBands: [{
                     from: oConfig.PB1FROM,
                     to: oConfig.PB1TO,
                     color: 'red',
                     outerRadius: "105%",
                     //innerRadius: "10%",
                     thickness : "5%"
                 }, {
                     from: oConfig.PB2FROM,
                     to: oConfig.PB2TO,
                     color: '#fdd01b',
                     outerRadius: "105%",
                     //innerRadius: "10%",
                     thickness : "5%"
                 }, {
                     from: oConfig.PB3FROM,
                     to: oConfig.PB3TO,
                     color: 'green',
                     outerRadius: "105%",
                     //innerRadius: "10%",
                     thickness : "5%"
                 }]
             }],
               credits: {
                    enabled: false
               },
             series: [{
                 name: name,
                 data: []/*,
                 tooltip: {
                      valuePrefix: 'Score: ',
                     valueSuffix: ' out of 5'
                 }*/
             }]
         },
         //Add some life
         function (chart) {
            var svgNS = "http://www.w3.org/2000/svg";
            var xlinkNS = "http://www.w3.org/1999/xlink";
            //I create a random id using my own helpers.makeid() method - you'll need to roll your own
            var id = helpers.makeid();

            //quartile 1
            var elem = chart.yAxis[0].plotLinesAndBands[1].svgElem.element;
            elem.setAttribute("id", id);
            var newText = document.createElementNS(svgNS,"text");
            newText.setAttributeNS(null,"font-family","Verdana");   
            newText.setAttributeNS(null,"font-weight","bold");
            newText.setAttributeNS(null,"font-size","10");
            newText.setAttributeNS(null,"dy","-5");
            newText.setAttributeNS(null,"fill","red");
            var newTextPath = document.createElementNS(svgNS, "textPath");
            newTextPath.setAttributeNS(null,"startOffset","10%");
            newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
            var textNode = document.createTextNode("Quartile 1 (0% to 25%)");
            newTextPath.appendChild(textNode);
            newText.appendChild(newTextPath);
            elem.parentNode.insertBefore(newText, elem.nextSibling);

            //interquartile range (middle 50)
            var elem2 = chart.yAxis[0].plotLinesAndBands[2].svgElem.element;
            id = helpers.makeid();
            elem2.setAttribute("id", id);
            var newText = document.createElementNS(svgNS,"text");
            newText.setAttributeNS(null,"font-family","Verdana");
            newText.setAttributeNS(null,"font-weight","bold");  
            newText.setAttributeNS(null,"font-size","10");
            newText.setAttributeNS(null,"dy","-5");
            newText.setAttributeNS(null,"fill","#fdd01b");
            newText.setAttributeNS(null,"x", 5);
            newText.setAttributeNS(null,"y", 5);
            var newTextPath = document.createElementNS(svgNS, "textPath");
            newTextPath.setAttributeNS(null,"startOffset","10%");
            newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
            var textNode = document.createTextNode("Middle 50 (25% to 75%)");
            newTextPath.appendChild(textNode);
            newText.appendChild(newTextPath);
            elem.parentNode.insertBefore(newText, elem.nextSibling);

            //quartile 3
            var elem3 = chart.yAxis[0].plotLinesAndBands[3].svgElem.element;
            id = helpers.makeid();
            elem3.setAttribute("id", id);
            var newText = document.createElementNS(svgNS,"text");
            newText.setAttributeNS(null,"font-family","Verdana");
            newText.setAttributeNS(null,"font-weight","bold");  
            newText.setAttributeNS(null,"font-size","10");
            newText.setAttributeNS(null,"dy","-5");
            newText.setAttributeNS(null,"fill","green");
            newText.setAttributeNS(null,"x", 5);
            newText.setAttributeNS(null,"y", 5);
            var newTextPath = document.createElementNS(svgNS, "textPath");
            newTextPath.setAttributeNS(null,"startOffset","10%");
            newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
            var textNode = document.createTextNode("Quartile 3 (75% to 100%)");
            newTextPath.appendChild(textNode);
            newText.appendChild(newTextPath);
            elem.parentNode.insertBefore(newText, elem.nextSibling);
        });

Since it's (for instance) not possible, you can place a subtitle below the chart (in my case, a gauge). For example:

subtitle: {
    text: '<span style="background-color: #55BF3B; border-radius: 2px; padding: 1px 2px;">' +
              '0-10' +
          '</span>' +
          '<span style="background-color: #DDDF0D; border-radius: 2px; padding: 1px 2px;">' +
              '10-20' +
          '</span>',
    useHTML: true,
    verticalAlign: 'bottom'
}