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

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

here scenario. i've multiple highstocks 10 charts on single page. i've written 500 lines of code position legend, show tooltip , refresh legend values on mousemove.

no. of legends vary per chart. on mousemove values of legends updated. need optimize code using highstocks v1.2.2.

above screenshot shows 2 charts. return, basket, vs basket spread legends , it's values updated on every mousemove.

please find this fiddle example. in case legends positioned , updated values on mouse move hundreds of lines of code. when move mouse legend values of return , basket of first chart , legend values of vs basket spread updated. it's working fine lots of javascript code. need optimize less code or highstocks built-in feature.

update

user @wergeld has posted new fiddle. i've shown in screenshot when cross-hair beingness moved on chart, legend values of charts should updated.

is there anyway implement same functionality less code or there built-in feature available in highstocks ???

using this reference.

basic illustration utilize 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 assuming have modded <li> be:

$('<li>') .css('color', serie.color) .text(serie.name + ': na') .click(function () { toggleseries(i); }) .appendto($legend);

you need handle mouseout event not know want there. working example.

edit: here version using reference ohlc chart set values in different legend location when point in chart hovered.

plotoptions: { series: { point: { events: { mouseover: function () { //using ohlc , volumn info sets created @ 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; } }); } } } } }

javascript jquery highcharts