Add series total to legend in Highcharts - javascript

Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});

A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}

Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});

Related

How to position custom tooltips on mouseover, equivalent to default tooltip by using chart.renderer.text on event load in chart property

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

How to add labels for highcharts activity gauge for each series

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.

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?
I know it is possible if you are using only 1 series per category. But I was wondering if this is possible as well, when using multiple series.
What i have now:
$(function () {
var cats = ['1', '2', '3', '4', '5'];
var width = 375;
var height = cats.length * 100;
var value = 0;
var maxScore = 2453 + 50;
var chart = $('.highchart').highcharts({
chart: {
backgroundColor:'#fff',
type: 'bar',
width:width,
height:height,
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
}
},
min:0,
},
yAxis: {
/* stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x];
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},*/
allowDecimals: false,
min: 0,
max: maxScore,
gridLineWidth: 0,
title: {
text: '',
rotation:0,
margin:0
},
labels: {
formatter: function () {
return '';
},
},
},
tooltip: {
enabled:false,
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: { bar:{borderWidth:0, dataLabels:{align:'right'}},series: { pointWidth: 25, pointPadding: 0, groupPadding: 0.24} },
series: [{
name: 'score1',
data: [800, 1312, 833, 944, 432],
stack: 'you',
color: 'blue',
dataLabels: {
enabled: true,
color: 'blue',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}, {
name: 'score2',
data: [2208, 800, 1375, 1531, 971],
stack: 'academy',
color: 'red',
dataLabels: {
enabled: true,
color: 'red',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}],
});
$hc = $('.highchart');
});
http://jsfiddle.net/jbw8ou5g/
The idea is to have the 1,2,3,4,5 left from the bars, but above the corresponding bars.
Try this mate.Replace your x-axis properties with the below
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
},
x:350,
},
min:0,
},
Fiddle

Highcharts multi y-axis min-max issue

I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.
I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.
Any ideas ?
Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/
And here's (some of) the code:
jQuery('#chartContainer').highcharts({
chart: { width: 600, height: 500 },
title: { text: '' },
credits: { enabled: false },
xAxis: {
categories: client_age_array,
title: {
text: 'Client age',
style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
},
labels: {
step: 5,
staggerLines: 1
}
},
yAxis: [{ // First yAxis - Income
labels: {
style: {
color: gradTop,
fontSize: '12px'
}
},
title: {
text: 'Income',
style: {
color: gradTop,
fontSize: '12px'
}
},
opposite: true,
min: null,
max: null
},
{ // Second yAxis - Fund value
gridLineWidth: 0,
labels: {
style: {
color: '#003466',
fontSize: '12px'
}
},
title: {
text: 'Fund value',
style: {
color: '#003466',
fontSize: '12px'
}
},
min: null,
max: null
},
{ // Third yAxis - Survival probability
gridLineWidth: 0,
labels: {
format: '{value}%',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
title: {
text: 'Survival probability',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
opposite: true,
min: 0,
max: 100
}],
tooltip: {
formatter: function() {
var toolTip = '<b>Age : '+ this.x +'</b><br />';
jQuery.each(this.points, function(i, point) {
if( point.series.name == 'Survival probability' ){
if( isNaN(point.y) ){
// -- do nothing
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
});
return toolTip;
},
shared: true
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -5
}
},
series: [
{
name: 'Income',
type: 'column',
yAxis: 0,
data: income_array
},
{
name: 'Fund value',
type: 'spline',
yAxis: 1,
data: fund_value_array,
marker: {
enabled: false
}
},
{
name: 'Survival probability',
type: 'line',
lineWidth: 0,
yAxis: 2,
data: survival_array_2
}
],
colors: [{
linearGradient: perShapeGradient,
stops: [ [0, gradTop], [1, gradBottom] ]
},
'#003466',
'#fe6f01'
]
});
Simply set alignTicks to false for the Survival Probability axis. That's it.

Categories