CODEWITHSUNDEEP
javascripthighcharts
Nuri Tasdemir
Nuri Tasdemir

Reputation: 9842

Series for tooltip only in highcharts

I need to use several series in tooltip in a highchart chart. These series should be completely invisible except tooltip. I 've tried setting visible to false. However in this case, legends for that series are still visible though faded. If I state "ignoreHiddenSeries: true", hidden series are not there at all and I cannot use them at tooltip. Is there a way for this type of usage? Currently I am keeping those series in global javascript arrays outside the highchart's scope and using them in tooltip formatter. I prefer to keep those data in highchart as well.

By the way setting showInLegend: false, visible: false also makes the series unusable in tooltip.

Upvotes: 1

Views: 1590

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Each invisible serie should have two params:

visible: false,
showInLegend: false,

You need to use the tooltip formatter and use loop over each serie / each point to print values.

tooltip: {
  formatter: function() {
    var series = this.series.chart.series,
      x = this.x,
      each = Highcharts.each,
      txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';

    each(series, function(serie, i) {
                each(serie.data, function(data, j){
        if(data.x === x) {
            txt += '<span style="color:' + data.color + '">\u25CF</span> ' + data.series.name + ': <b>' + data.y + '</b><br/>';
        }
      });
    });

    return txt;
  }
},

Example: http://jsfiddle.net/697e8seo/

Upvotes: 3

Related Questions