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, y

Solution 1:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        var chart = this.points[0].series.chart; //get the chart objectvar categories = chart.xAxis[0].categories; //get the categories arrayvar 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
}

Solution 2:

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;
}

Solution 3:

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.

Solution 4:

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 :)