I've created a custom tooltip (white background, black text) when mouseover title.
I create a load function on events, using chart.renderer.text and positioned center of chart. But i would like my tooltip to follow the mouse when "mouseover" title, likewise with highcharts tooltip on points in the chart.
As highcharts title is a span element and not a data point, I can't use tooltip default function.
How do I position my tooltip to title span element? Please see fiddle:
https://jsfiddle.net/marialaustsen/w4k87jyo/
var ranges = [
[-315622800000, -0.2408609, -0.1937498],
[-284000400000, -0.2066399, -0.1349633],
[-252400303000, -0.2413356, -0.1261202],
[-220864303000, -0.3176987, -0.1810053],
[-189328303000, -0.4309874, -0.2753718],
[-157705903000, -0.2806764, -0.13673],
[-126169903000, -0.2479743, -0.1690026],
[-94633903000, -0.2753191, -0.1816201],
[-63097903000, -0.1408235, -0.08435556],
[-31475503000, -0.2512668, -0.1149224],
[31596497000, -0.2825769, -0.148437],
[63132497000, -0.2823197, -0.2037938],
[94754897000, -0.09643359, 0.03295682],
[126290897000, -0.281654, -0.2110296],
[157826897000, -0.3120279, -0.2342878],
[189362897000, -0.294176, -0.1824594],
[220985297000, -0.1799132, -0.09212867],
[252521297000, -0.01628482, 0.08050994],
[284057297000, -0.08310624, 0.026883],
[315593297000, -0.06155353, 0.01404597],
[347215697000, -0.05226778, 0.09032121],
[378751697000, -0.1971111, -0.06158315],
[410287697000, -0.1459778, -0.02733667],
[441823697000, -0.197513, -0.1444241],
[473446097000, -0.1752219, -0.004927497],
[504982097000, -0.06020115, 0.04069498],
[536518097000, 0.02077712, 0.1431516],
[568054097000, 0.01049873, 0.1441043],
[599676497000, -0.06178449, 0.02140319],
[631212497000, 0.1006601, 0.16657],
[662748497000, 0.1378711, 0.2378923],
[694220400000, -0.07528869, 0.05768261],
[725842800000, -0.1404296, 0.03590908],
[757378800000, -0.05985879, 0.0664241],
[788914800000, 0.1580115, 0.2895567],
[820450800000, 0.01749986, 0.113983],
[852073200000, 0.05137634, 0.139564],
[883609200000, 0.3796172, 0.4717335],
[915145200000, 0.05874969, 0.1611843],
[946681200000, 0.07699493, 0.1700459],
[978303600000, 0.09742911, 0.2219135],
[1009839600000, 0.3231945, 0.4256165],
[1041375600000, 0.3584458, 0.5381736],
[1072911600000, 0.3219613, 0.4200903],
[1104534000000, 0.3028862, 0.4872178],
[1136070000000, 0.2818642, 0.4433356],
[1167606000000, 0.2753396, 0.2993396],
[1199142000000, 0.1016727, 0.1561865],
[1230764400000, 0.1421884, 0.188136],
[1262300400000, 0.3960869, 0.4253292],
[1293836400000, 0.08512741, 0.1863386],
[1325372400000, 0.1859731, 0.2682165],
[1356994800000, 0.389729, 0.5635341],
[1388530800000, 0.287804, 0.4060001],
[1420066800000, 0.399705, 0.5534601],
[1451602800000, 0.6159819, 0.6743248],
[1483225200000, 0.5742405, 0.661474],
[1514761200000, 0.5399001, 0.6114452]
],
midranges = [
[-315622800000, -0.2184705, -0.206202],
[-284000400000, -0.1999558, -0.1942447],
[-252400303000, -0.162079, -0.1395678],
[-220864303000, -0.2275385, -0.2023986],
[-189328303000, -0.3017941, -0.2794814],
[-157705903000, -0.2674059, -0.2142369],
[-126169903000, -0.236345, -0.1855258],
[-94633903000, -0.2423138, -0.1929999],
[-63097903000, -0.1141278, -0.08552658],
[-31475503000, -0.2052396, -0.1841571],
[31596497000, -0.2666847, -0.2537797],
[63132497000, -0.2455502, -0.2108166],
[94754897000, -0.08606912, -0.05789221],
[126290897000, -0.2770694, -0.2230173],
[157826897000, -0.301831, -0.245429],
[189362897000, -0.2415157, -0.2263551],
[220985297000, -0.1445465, -0.1026627],
[252521297000, -0.002124243, 0.04977401],
[284057297000, 0.01136355, 0.02368604],
[315593297000, -0.02714447, -0.009183146],
[347215697000, -0.03374328, 0.01723201],
[378751697000, -0.1531832, -0.08042887],
[410287697000, -0.07963118, -0.03845775],
[441823697000, -0.17972, -0.1595059],
[473446097000, -0.1295439, -0.03657699],
[504982097000, -0.0554782, -0.04038309],
[536518097000, 0.05867161, 0.1321761],
[568054097000, 0.04968223, 0.1257274],
[599676497000, -0.0589936, -0.006304938],
[631212497000, 0.1388284, 0.1635819],
[662748497000, 0.152022, 0.2352976],
[694220400000, -0.03502923, 0.04075381],
[725842800000, -0.1136759, 0.01325552],
[757378800000, -0.03579155, 0.03047966],
[788914800000, 0.1958629, 0.2298041],
[820450800000, 0.0601462, 0.07727504],
[852073200000, 0.0573891, 0.1240177],
[883609200000, 0.3878401, 0.4501741],
[915145200000, 0.120206, 0.1338366],
[946681200000, 0.09684783, 0.1409384],
[978303600000, 0.1417549, 0.2172643],
[1009839600000, 0.3463299, 0.3858525],
[1041375600000, 0.4588, 0.4949837],
[1072911600000, 0.3398826, 0.3961508],
[1104534000000, 0.3668142, 0.4720009],
[1136070000000, 0.3217134, 0.3849795],
[1167606000000, 0.2786052, 0.2919385],
[1199142000000, 0.1179707, 0.1482561],
[1230764400000, 0.1554107, 0.1809372],
[1262300400000, 0.4087261, 0.4249718],
[1293836400000, 0.1127912, 0.1619051],
[1325372400000, 0.2240146, 0.2367521],
[1356994800000, 0.3972811, 0.4682488],
[1388530800000, 0.329196, 0.3689734],
[1420066800000, 0.4728232, 0.5235964],
[1451602800000, 0.6447842, 0.6699023],
[1483225200000, 0.5991459, 0.6276736],
[1514761200000, 0.5731335, 0.5976004]
],
observations = [
[-315622800000, -0.125027967],
[-284000400000, -0.133224861],
[-252400303000, -0.197758772],
[-220864303000, -0.331218885],
[-189328303000, -0.373631621],
[-157705903000, -0.226318323],
[-126169903000, -0.255212388],
[-94633903000, -0.257971262],
[-63097903000, -0.081025598],
[-31475503000, -0.173977982],
[31596497000, -0.281273127],
[63132497000, -0.183436095],
[94754897000, 0.055941514],
[126290897000, -0.278558516],
[157826897000, -0.200998486],
[189362897000, -0.469871227],
[220985297000, -0.106479309],
[252521297000, -0.14627142],
[284057297000, -0.104259949],
[315593297000, -0.02087272],
[347215697000, -0.072292756],
[378751697000, -0.073050476],
[410287697000, 0.107439219],
[441823697000, 0.012630117],
[473446097000, -0.038703932],
[504982097000, -0.066400826],
[536518097000, 0.063566479],
[568054097000, 0.136294049],
[599676497000, 0.023849885],
[631212497000, 0.195750464],
[662748497000, 0.084860468],
[694220400000, -0.13771961],
[725842800000, -0.019893232],
[757378800000, -0.002683881],
[788914800000, 0.167108316],
[820450800000, 0.106736819],
[852073200000, 0.075128975],
[883609200000, 0.403869158],
[915145200000, 0.175163852],
[946681200000, 0.117469801],
[978303600000, 0.2271733],
[1009839600000, 0.27220394],
[1041375600000, 0.413409872],
[1072911600000, 0.264274741],
[1104534000000, 0.323817598],
[1136070000000, 0.347397113],
[1167606000000, 0.354140463],
[1199142000000, 0.252877549],
[1230764400000, 0.341797012],
[1262300400000, 0.53463092],
[1293836400000, 0.36467825],
[1325372400000, 0.159806498],
[1356994800000, 0.281102946],
[1388530800000, 0.412804597],
[1420066800000, 0.475081416],
[1451602800000, 0.674438445],
[1483225200000, 0.579642985],
[1514761200000, 0.317730373]
]
$(function() {
function reloadFlash() {
$("#flash").fadeIn();
}
function hideFlash() {
$("#flash").fadeOut();
}
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ['#79ea61', '#2b908f', '#F09448', '#6E8CD0', '#aaeeee', '#ff0066',
'#f45b5b', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#eeaaee'
],
chart: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, '#152036'],
[1, '#1b2a47']
]
},
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#1b2a47'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '1.4em'
}
},
xAxis: {
gridLineColor: '#546c9b',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#546c9b',
minorGridLineColor: '#546c9b',
tickColor: '#546c9b',
title: {
style: {
color: '#E0E0E3'
}
}
},
yAxis: {
gridLineColor: 'rgba(84, 108, 155, 0.5)',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: 'rgba(84, 108, 155, 0.5)',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#E0E0E3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#1b2a47'
}
},
credits: {
style: {
color: '#E0E0E3'
}
},
labels: {
style: {
color: '#E0E0E3'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#1b2a47',
states: {
hover: {
fill: '#546c9b'
},
select: {
fill: '#546c9b'
}
}
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#1b2a47',
stroke: '#000000',
style: {
color: '#E0E0E3'
},
states: {
hover: {
fill: '#546c9b',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
},
select: {
fill: '#071023',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
}
}
},
inputBoxBorderColor: '#E0E0E3',
inputStyle: {
backgroundColor: '#152036',
color: '#E0E0E3',
fontWeight: 'bold',
states: {
hover: {
fill: '#546c9b',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
},
select: {
fill: '#071023',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
}
}
},
labelStyle: {
color: '#E0E0E3'
}
},
navigator: {
handles: {
backgroundColor: '#1b2a47',
borderColor: '#7798BF',
},
outlineColor: '#546c9b',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#546c9b'
},
xAxis: {
gridLineColor: '#546c9b',
labels: {
style: {
color: '#FFF',
fontWeight: 'bold'
}
}
},
},
scrollbar: {
barBackgroundColor: '#1b2a47',
barBorderColor: '#1b2a47',
buttonArrowColor: '#FFF',
buttonBackgroundColor: '#1b2a47',
buttonBorderColor: '#1b2a47',
rifleColor: '#FFF',
trackBackgroundColor: '#152036',
trackBorderColor: '#152036'
},
// special colors for some of the
/*legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#FFF',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'*/
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function() {
var chart = this
if (grossLabel) {
grossLabel.destroy();
}
var newX = chart.plotWidth / 2,
newY = chart.plotHeight / 8;
var grossLabel = chart.renderer.text('<div id="flash"></div>', newX, newY, true)
.attr({
zIndex: 10
}).add();
}
}
},
title: {
useHTML: true,
text: 'Global mean surface Temperature',
events: {
mouseover: function() {
reloadFlash();
$('#flash').html('Global mean Surface temperature anomalies with respect to 1970-2000')
},
mouseout: function() {
hideFlash();
},
}
},
subtitle: {
text: 'CRPSS = 0.3 ACC= 0.6'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Temperature'
}
},
/*
annotations: [{
labels: [{
point: {
x: 0,
y: 0,
},
shape: 'rect',
text: '0.6'
}],
labelOptions: {
padding: 8,
borderRadius: 5,
backgroundColor: '#FFF',
borderWidth: 1,
borderColor: 'rgba(84, 108, 155, 1)',
align: 'left',
allowOverlap: true,
verticalAlign: 'top',
}
}],*/
/*
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
*/
tooltip: {
xDateFormat: '%Y-%m-%d',
headerFormat: '<span style="font-size: 16px">{point.key}</span><br/>',
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.y}</span><br/>',
crosshairs: true,
shared: true,
useHTML: true,
valueSuffix: ' C',
},
legend: {
enabled: true
},
series: [{
name: 'Observations',
data: observations,
zIndex: 0,
lineWidth: 0,
marker: {
fillColor: 'white',
}
}, {
name: 'MIN - MAX',
data: ranges,
type: 'arearange',
lineWidth: 0,
fillOpacity: 0.5,
zIndex: 1,
marker: {
enabled: false
},
tooltip: {
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
valueSuffix: ' C',
},
}, {
name: 'HINDCAST (33%) - SPREAD (66%)',
data: midranges,
type: 'arearange',
lineWidth: 0,
fillOpacity: 0.5,
zIndex: 2,
marker: {
enabled: false
},
tooltip: {
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
valueSuffix: ' C',
},
}, {
name: 'BOXPLOT',
type: 'boxplot',
fillColor: '#6E8CD0',
lineWidth: 2,
medianWidth: 0,
stemColor: '#6E8CD0',
stemDashStyle: 'solid',
stemWidth: 2,
whiskerColor: '#6E8CD0',
whiskerLength: '75%',
whiskerWidth: 2,
zIndex: 3,
data: [
[1577833200000, 0.5729389, 0.6131609, 0.61648345, 0.6465600, 0.660028],
],
tooltip: {
pointFormatter: function() {
const x = this.x;
const currentData = this.series.data.find(data => data.x === x);
const boxplotValues = currentData ? currentData.options : {};
return `<span style="font-size: 14px; color: #aaeeee">
Max: ${boxplotValues.high}<br>
Q3: ${boxplotValues.q3}<br>
Median: ${boxplotValues.median}<br>
Q1: ${boxplotValues.q1}<br>
Low: ${boxplotValues.low}<br></span>`;
}
}
}]
}
/*, function (chart) { // on complete
var point = chart.series[0].points[0];
chart.renderer.label('CRPSS = 0.3 ACC = 0.6', 5, 5, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#000000',
fontWeight: 'bold',
fontSize: '1.4em'
})
.attr({
fill: 'rgba(255, 255, 255, 0.9)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}*/
);
});
````
You can create a custom tooltip as you did by using SVGRenderer using rect and text inside it. Highcharts allows combining SVG elements into a group and use SVGElement methods on it like show() and hide() that allows you to toggle the custom tooltip. Also to make the tooltip follow the mouse the on() method will be helpful to add an event listener on title element and translate() to change the position of it. Check the code and demo posted below.
Code:
chart: {
events: {
load: function() {
var chart = this,
title = chart.title,
titleBBox = title.getBBox(),
gTooltip = chart.renderer.g().add(),
textSvg,
textSvgBBox;
textSvg = chart.renderer
.text(
'Global mean Surface temperature anomalies with respect to 1970-2000' +
'<br>' + 'more text, more text more text more text',
titleBBox.x,
title.alignAttr.y + titleBBox.height
)
.css({
fill: '#fff'
})
.add(gTooltip);
textSvgBBox = textSvg.getBBox();
chart.renderer.rect(
titleBBox.x - 15,
title.alignAttr.y + titleBBox.height - 20,
textSvgBBox.width + 20,
textSvgBBox.height + 20
).attr({
fill: 'rgba(0, 0, 0, 0.8)',
stroke: 'black',
'stroke-width': 1
}).add(gTooltip);
textSvg.toFront();
gTooltip.hide();
title.on('mousemove', function(e) {
gTooltip.show().toFront();
gTooltip.translate(e.x - textSvgBBox.x, e.y - 10);
});
title.on('mouseleave', function(e) {
gTooltip.hide();
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/yx6738q4/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#g
https://api.highcharts.com/class-reference/Highcharts.SVGElement#add
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
I need to add custom labels for the solid gauge high charts as shown in the fiddle - http://jsfiddle.net/195gmh5k/1/
$(function () {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
plotLines: [{
color: 'red', // Color value
value: 0, // Value of where the line will appear
width: 2, // Width of the line,
zIndex: 10
}, {
color: 'red',
value: 33.3,
width: 2,
zIndex: 10
}, {
color: 'red',
value: 66.6,
width: 2,
zIndex: 10
}]
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Move icon
this.renderer.label('hello1', 180, 35, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Exercise icon
this.renderer.label('hello2', 180, 65, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Stand icon
this.renderer.label('hello3', 180, 100, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
});
});
I am using Renderer.label api to specify the position of labels.
Currently I tried locating the x and y coordinates on trial and error basis.
What is the more efficient (basis method) way to specify the coordinates for the labels. I need to specify that align all the labels along the vertical plot line at different gauges.
I found a better solution and cleanest:
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '50%',
events: {
render: renderIcons,
redraw: function () {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
},
},
legend: {
enabled: true
},
title: {
text: 'My chart',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true,
showInLegend: true,
//colors: ['#F62366', '#9DFF02', '#0CCDD6'],
}
},
series: [{
name: 'Move',
colorByPoint: true,
marker: {
fillColor: '#7cb5ec',
},
data: [{
color: '#7cb5ec',
radius: '112%',
innerRadius: '88%',
y: 80
}],
}, {
name: 'Exercise',
marker: {
fillColor: '#f7a35c',
},
data: [{
color: '#f7a35c',
radius: '87%',
innerRadius: '63%',
y: 65
}],
}, {
name: 'Stand',
marker: {
fillColor: '#90ee7e'
},
data: [{
color: '#90ee7e',
radius: '62%',
innerRadius: '38%',
y: 50
}],
}],
});
Now, the function renderIcons can render a label as icon:
function renderIcons() {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
And this function is for add legends with the color´s series:
Highcharts.Legend.prototype.colorizeItem = function(item, visible) {
item.legendGroup[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
if (!this.chart.styledMode) {
var legend = this,
options = legend.options,
legendItem = item.legendItem,
legendLine = item.legendLine,
legendSymbol = item.legendSymbol,
hiddenColor = legend.itemHiddenStyle.color,
textColor = visible ?
options.itemStyle.color :
hiddenColor,
symbolColor = visible ?
(item.color || hiddenColor) :
hiddenColor,
markerOptions = item.options && item.options.marker,
symbolAttr = {
fill: symbolColor
};
if (legendItem) {
legendItem.css({
fill: textColor,
color: textColor // #1553, oldIE
});
}
if (legendLine) {
legendLine.attr({
stroke: symbolColor
});
}
if (legendSymbol) {
// Apply marker options
if (markerOptions) { // #585
symbolAttr = item.pointAttribs();
if (!visible) {
// #6769
symbolAttr.stroke = symbolAttr.fill = hiddenColor;
}
}
legendSymbol.attr(symbolAttr);
}
}
Highcharts.fireEvent(this, 'afterColorizeItem', {
item: item,
visible: visible
});
}
Regards.