Additional tooltip in Highcharts using Handlebars

Question

I have a highcharts graph which has both column and spline graph in it. The data sets are passed using handlebars variables. The code is like this

$(function () {
$('#container').highcharts({
    title: {
        text: '',
        style: {
            color: '#cc0000',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        categories: [{{{xaxisLabel}}}]
    },
     yAxis: [{ /* Primary yAxis */
        labels: {
            format: '{value}%',
            style: {
                color: '#cc0000'
            }
        },
        title: {
            text: 'Failure Percentage',
            style: {
                color: '#cc0000'
            }
        }
    }, { /* Secondary yAxis */
        title: {
            text: 'Success Percentage',
            style: {
                color: '#009900'
            }
        },
        max: 100, 
        labels: {
            format: '{value} %',
            style: {
                color: '#009900'
            }
        },
        opposite: true
    }],
    labels: {
        items: [{
            html: '',
            style: {
                left: '2px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    credits: {
      enabled: false
    },
    series: [{
        type: 'column',
        name: 'Success',
        color: Highcharts.getOptions().colors[2],
        yAxis: 1,
        tooltip: {
            valueSuffix: ' %'
        },
        data: [{{barSuccess}}]
    }, {
        type: 'spline',
        name: 'Failure',
        tooltip: {
            valueSuffix: ' %'
        },
        data: [{{barFailure}}],
        marker: {
            lineWidth: 3,
            lineColor: Highcharts.getOptions().colors[8],
            fillColor: 'red'
        }
    }]
});
});

Now i have two more data sets called as {{toolTipSuccess}} and {{toolTipFailure}}.

{{toolTipSuccess}} goes in the column chart and {{toolTipFailure}} goes in the spline chart.

I want the data in these two datasets to come as a tooltip in the respective graphs. I know this can be done if i pass the data in the (x,y,z) format in the graph, but i'll have to do a lot of code change to accommodate that which i am avoiding.

Does anyone know any roundabout to this problem?

The data in the variables is of this type:-

{{barSuccess}} = [100, 99, 99, 99 .........]
{{barFailure}} = [ 0, 0, 1, 0.3........]
{{toolTipSuccess}} = [363, 763, 762, 987, ........]
{toolTipFailure}} = [12, 3, 13, 8, .........]

Thanks in advance

Answer 1

You could define your own tooltip formatter and then use the position of the column data point in the input 'bar' data to retrieve and display the appropriate data from toolTipSuccess / toolTipFailure. Consider this snippet of a series.tooltip definition:

//... more series definition

tooltip: {
  pointFormatter: function(){
    return "Rainfall: " + this.y + ", success: " + successPoints[this.series.data.indexOf( this )] + "<br />";
  } 
}

//... more code

var successPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

JSfiddle here: http://jsfiddle.net/L2ncbenx/1/

(Apologies, this is a rough edit of an existing highcharts example)

As you can see, this uses the position of the highlighted point to find the position of the required data in the other dataset.