CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Disera
Disera

Reputation: 208

Highcharts shared tooltip(for line series) - Change on hover ACCORDING TO PLOTBAND

Highcharts - Its a bit of a challenge to me, to change the shared Tooltip in accordance with the Plotband.

series: [{
        name : 'one',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },{
        name : 'two',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },{
        name : 'three',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

plotName : {'first','second','third'}
plotFrom : {'0','50','100'}
plotTo : {'49','99','149'}

Condition:

1. On hovering over plotband - "first" tooltip should show value for series "one"
2. On hovering over plotband - "second" tooltip should show value for series "one" & "two"
3. On hovering over plotband - "third" tooltip should show value for series "one","two" & "three"

Really appreciate your time and help.

My Code:

Tooltip part:

tooltip:{
    shared:true,
    shadow: false,
    useHTML: true,
    backgroundColor: 'white',

    formatter: function() {
        var s = '<table><tr  style="font-size:10px; font-face:verdana;"><td>Date: </td><td>'+ this.x +'</td></tr>';

        $.each(this.points, function(i, point) {
            += '<tr style="font-face:verdana; font-size:10px; color:'+point.series.color+'"><td>'+ point.series.name +'</td><td>: '+point.y+'</td></tr>';                   
        });
        s += '</table>';
        return s;
    }
},

Plotband part:

for(var i=0;i<plotName.length;i++) {
    chart.xAxis[0].addPlotBand({
        color: band_Colors[i],
        from: plotFrom[i],
        to: plotTo[i],
        label : {
            useHTML: true,
            text : plotVersion[i],
            style : {
                fontFamily : 'verdana'
            }
        }
    });
}

Can anyone please help me out. Thanks in Advance.

Upvotes: 0

Views: 695

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can use x values of your plotbands inside tooltip formatter. If you are inside specific plotBand (so in specific x ranges) you can display one, two or three series:

  $('#container').highcharts({
    xAxis: {
      plotBands: [{
        name: 'first',
        from: 0,
        to: 3,
        color: 'rgba(200,0,0,0.5)',
        zIndex: 2
      }, {
        name: 'second',
        from: 3,
        to: 6,
        color: 'rgba(0,200,0,0.5)',
        zIndex: 2
      }, {
        name: 'third',
        from: 6,
        to: 11,
        color: 'rgba(0,0,200,0.5)',
        zIndex: 2
      }]
    },
    tooltip: {
      shared: true,
      formatter: function() {
        var x = this.x,
          points = this.points,
          newArr,
          tooltipNew = this,
          tooltip = this.points[0].series.chart.tooltip,
          text;


        if (x <= 3) {
          tooltip.shared = false;
          tooltipNew = points[0];
        } else if (x <= 6) {
          newArr = [];
          newArr.push(points[0]);
          newArr.push(points[1]);
          tooltipNew.points = newArr;
        }
        text = tooltip.defaultFormatter.call(tooltipNew, tooltip);
        tooltip.shared = true;
        return text;
      }
    },
    series: [{
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }]
  });

Here you can see an example how it can work: http://jsfiddle.net/1w9hppvu/1/

Upvotes: 1

Related Questions