CODEWITHSUNDEEP
javascripthighcharts
j0nes
j0nes

Reputation: 8099

Display tooltip for invisible series in Highcharts

I am trying to display a custom tooltip using Highcharts. You can find an example of the code here: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

When you hover over the chart, you can see that the tooltip only contains values from Series 2, but not from Series 1 (which is invisible). When you click on "Series 1" in the legend, you can see the values from Series 1 in the tooltip.

EDIT: no code to commit, just fixing linkrot/adhering to editing rules...
Is there any way to display the values from an invisible series in a tooltip?

Upvotes: 14

Views: 13658

Answers (4)

Vatsal
Vatsal

Reputation: 2128

Too late for the answer but this is what I did. Plot the chart and make the color transparent. Plotted it on the opposite y axis and set max to zero. Set alignTicks to false. Something like this.

chart: {
        alignTicks: false,
        type: 'line'
    },

Then the only thing needed is to change the color value in tooltip formatter since the label will be transparent.

Hope this helps someone.

Happy Learning :)

Upvotes: 0

Mike Zavarello
Mike Zavarello

Reputation: 3554

Another way to go about this is to make certain attributes of the series invisible, rather than the entire series itself. This will allow you to see it in the tooltip and legend.

Here's what I did:

  1. First, I set the line color of the invisible series to "transparent."
  2. Next, I set the fill color for the invisible series markers to "transparent."
  3. Finally, I disabled the hover state for the markers. This prevents the shadowy highlight circles from appearing as you move your mouse cursor over each point in the visible series.

Here's a modified version of your original fiddle with these changes: http://jsfiddle.net/brightmatrix/fDNh9/184/

series: [{
    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],
    lineColor: 'transparent',       // make the line invisible
    marker: { 
        fillColor: 'transparent',   // make the line markers invisible
        states: {
            hover: {
                enabled: false      // prevent the highlight circle on hover
            }
        }
    }
}, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]

Two items to note:

  1. I've used the attribute enableMouseTracking: false with other invisible series to prevent users from interacting with them (to achieve visual effects). If you set this for your invisible series, it will prevent the series data from appearing in your tooltip.
  2. If you wanted to keep your invisbile series from appearing in the legend, you can add the attribute showInLegend: false. Its data will still show in the tooltip.

I hope this helps others who come across this question.

Upvotes: 2

Bhesh Gurung
Bhesh Gurung

Reputation: 51030

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        var chart = this.points[0].series.chart; //get the chart object
        var categories = chart.xAxis[0].categories; //get the categories array
        var index = 0;
        while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays           
        $.each(chart.series, function(i, series) { //loop through series array
            s += '<br/>'+ series.name +': ' +
                series.data[index].y +'m';     //use index to get the y value
        });           
        return s;
    },
    shared: true
}

Upvotes: 15

eolsson
eolsson

Reputation: 12727

The tooltip formatter is a function like any other function so if you just make the data available it can return a string with values for all series. In this example I moved the series arrays and categories to separate variables and the tooltip formatter uses an index into these arrays to find the values.

formatter: function() {
    var index = $.inArray(this.x, categories);
    var s = '<b>'+ this.x +'</b>';

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index];
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index];

    return s;
}

Upvotes: 4

Related Questions