How to display tooltips or legends on plotBands?
I would like to have hints or legends on the gauge bars. I draw groups like this:
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B'
}, {
from: 10,
to: 20,
color: '#DDDF0D'
}]
I would like to see tooltips on the mouse in the stripes.
Or another solution I would like to have shows the legends for each group with the corresponding color. There is an option for legends for points, but not for groups.
Is there any option like showInLegend:true
for plotBands? Or any other solution to get them?
source to share
In general, plotBands has no tooltip or legend parameters, however you can add some custom events to plotBand, such as mouseover. See: http://api.highcharts.com/highcharts#xAxis.plotBands.events
So, you can create your own tooltip for this.
source to share
Since it is (for example) not possible, you can put subtitle
under the diagram (in my case, caliber). 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'
}
source to share
It is actually possible to make pretty elegant shortcuts for gauge plots by adding text to the SVG path elements that Highcharts generates. By doing this, you can get text that actually follows the curve of the strip. In particular, take a look at the code in the anonymous function that runs after the sensor is initialized. You will need to get the correct stripe object, assign an id attribute to the path element, and then insert the text and textPath elements (using createElementNS). Then you link the newly created textPath element using the xlink namespace. In my example, I use labels for quartiles, which appear as conspiracy ranges around the caliber.
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);
});
source to share