Develop Reference

Highcharts, get point index when shared tooltip is shows/hides

I have a group of charts which have the same categories.
When user hover on the chart and the tooltip is shown, I need to set all charts's corresponding point state to hover to help user to compare the data.
Firstly I use mouseOver and mouseOut events and it almost meet my needs, but I use shared tooltip so sometimes the tooltip shows without mouse on the point, so the event is not fired.
So I guess I need an event that when the tooltip shows/hides, and I find this and try tooltipRefresh event but I can't find the exactly index of on which point the tooltip shows. I have tried:
tooltipRefresh: function(e) {
var index = this.hoverPoint.index; //No dependentable
}
Is that any way that I can get the index at the right event firing moment?

you can use Label which just like the tootip, show X, Y value on the Lable.
What i did is :
1.click on one chart === >
2.get X value ===>
3.fire a Event (click event of chart) === >
4.render Label on every other chart using X (get Y value in each chart by X)
when create chart, I set an click event
options.chart = $.extend(true, options.chart, {
renderTo: 'hChart_' + chartIndex,
type: 'spline',
events: {
click: function (event) {
if($scope.label.length > 0){
$scope.clearAllLabels();
}else{
var charts = $scope.ui.charts;
$.each(charts, function (index, chart) {
//render Label to chart
});
}
}
}
});
Below is add label in chart.
var label = chart.renderer.label(
moment(xAxis).format('dddd, MMM DD, HH:mm:ss') + '<br>' + kpiName + ': <b>' + Highcharts.numberFormat(yAxis, 2) + kpiUnit + '</b>',
120,
40)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
lineHeight: '20%',
fontSize: '11px',
color: '#FFFFFF'
})
.add();
Hope it will help you.

Highcharts Pie Chart: How to ignore disabled legend items

Please see this JSFiddle.
In this example, you can see sum of all values at top left corner.
If you click on any legend item, it will be disabled, but the total value doesn't reflect it. The text should be updated to not include that disabled item. How can I do this?

While Ondkloss's answer works fine. But I have found a simpler solution, by using redraw event instead of load. JSFiddle

You can use the legendItemClick event to update the rendered text by keeping a reference to the Element. For example:
var totalText;
var chart = new Highcharts.Chart({
chart: {
events: {
load: function(event) {
totalText = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
}
//...
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
var newTotal = this.series.total + (this.visible ? -this.y : this.y);
totalText.attr({ text: 'Total: '+newTotal });
}
}
}
}
}
});
See this updated JSFiddle for a demonstration.

How to add third set of data for use in Highcharts tooltip?

I have a chart which shows points, when I hover over these points the co-ordinates of the point is shown.
I want to add a third line to this tooltip showing the date associated with the point. I have added this date to the raw data fed to the graph but I'm not sure how to make it show in this box? Basically I want to add a different value into MY DATE VALUE below for every point. How can this be done?
tooltip: {
borderRadius: 10,
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>' + MY DATE VALUE;
}
},
Thanks!

highstocks - legend position and refresh legend values on mousemove of multiple charts

Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.
No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.
Above screenshot shows 2 charts. Return, Basket, vs Basket Spread are legends and it's values are updated on every mousemove.
Please find this fiddle for example. In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.
Update
User #wergeld has posted new fiddle. As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.
Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???
Using this as a reference.

Basic example would be to use the events.mouseover methods:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var theLegendList = $('#legend');
var theSeriesName = this.series.name;
var theYValue = this.y;
$('li', theLegendList).each(function (l) {
if (this.innerText.split(':')[0] == theSeriesName) {
this.innerText = theSeriesName + ': ' + theYValue;
}
});
}
}
}
}
}
This is assuming I have modded the <li> to be:
$('<li>')
.css('color', serie.color)
.text(serie.name + ': NA')
.click(function () {
toggleSeries(i);
})
.appendTo($legend);
You would then need to handle the mouseout event but I do not know what you want to do there.
Working example.
EDIT:
Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
//using the ohlc and volumn data sets created at runtime.
var stockVal = ohlc[this.index][4]; // show close value
var stockVolume = volume[this.index][1];
var theChart = $('#container').highcharts();
var theLegendList = $('#legend');
$('li', theLegendList).each(function (l) {
var legendTitle = theChart.series[l].name;
if (l === 0) {
this.innerText = legendTitle + ': ' + stockVal;
}
if (l === 1) {
this.innerText = legendTitle + ': ' + stockVolume;
}
});
}
}
}
}
}

highcharts show additional custom data in tooltip

I want to add informations in the tooltip of my highcharts (I already tried the other similar questions about this, but none solved my problem...).
I want to have the day (jj.mm.aaaa) as the label of each data in my xAxis. But in my tooltip, I want to have as the tooltip title, the date AND another information that is not rendered in the chart : (jj.mm.aaaa) = n items
For example, I have this xAxis data :
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014']
};
that's the label I want for my xAxis, but in my tooltips I want to have :
------------------------ ------------------------ ------------------------
- 23.01.2014 = 5 items - - 24.01.2014 = 3 items - - 25.01.2014 = 4 items -
------------------------ ------------------------ ------------------------
I tried to add an option to the xAxis object like this :
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
nbItems: [5,3,4]
};
but this will output all cell of the array for each element :
---------------------------- ---------------------------- ----------------------------
- 23.01.2014 = 5,3,4 items - - 24.01.2014 = 5,3,4 items - - 25.01.2014 = 5,3,4 items -
---------------------------- ---------------------------- ----------------------------
Is there a way to have only the corresponding nb of item ?
Here is a fiddle to help you understand my problem : http://jsfiddle.net/upE3T/1/

I managed to do something similar to what you want using the custom tooltip formatter function.
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
nbItems: {"23.01.2014":5,'24.01.2014':3,'25.01.2014':4}
};
...
chartOptions.tooltip = {
formatter: function() {
var s = '<b>'+ this.x + ' (' + chartOptions.xAxis.nbItems[this.x] + ')</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
});
return s;
},
shared: true,
useHTML: false
};
http://jsfiddle.net/c8CaB/
Not ideal, as you no longer have full html support, but you can still style the output using a subset of HTML (http://api.highcharts.com/highcharts#tooltip.formatter).