user15299 user15299 - 3 months ago 47
Javascript Question

How can I make HighCharts 4.2.5 with boost.js invoke the tooltip formatter?

We recently tried to update our use of HighCharts from 4.0.4 to 4.2.5 in order to take advantage of their boost.js module for improved performance in our scatter-charts. The issue we are having is that the tooltips are no longer showing when we click any of the individual points.

From what we've been able to figure out so far, it looks as if the formatter function in the tooltip option is not being called at all. We are not sure what is causing this and have not been successful in our efforts to find an answer.

Below is the code we used to reproduce the problem on JSBin (the same code is at this JSBin link):

var data = [{
"cid": 63113,
"cn": "P 889-189956-01",
"an": "DOE, JAMES",
"ct": 95,
"prb": 28.9,
"prd": 1263,
"cln": "DOE, JOHN R",
"d": "condition 1",
"dt": 721976400000,
"ac": "BIG CORP",
"j": "WV",
"ia": 0,
"wac": null,
"actualPerc": 7.521773555027711
}, {
"cid": 68066,
"cn": "P 889-200629-01",
"an": "DOE, JAMES",
"ct": 3656.0916,
"prb": 32.9,
"prd": 1283,
"cln": "claimant1",
"d": "condition 1",
"dt": 728024400000,
"ac": "BIG CORP",
"j": null,
"ia": 1,
"wac": null,
"actualPerc": 284.96427123928294
}, {
"cid": 129977,
"cn": "P 033-145468-01",
"an": "DOE, JAMES",
"ct": 152,
"prb": 42.3,
"prd": 1737,
"cln": "cln2",
"d": "condition 1",
"dt": 754549200000,
"ac": "BIG CORP",
"j": null,
"ia": 1,
"wac": null,
"actualPerc": 8.750719631548646
}];

var chartdata = [];


...

$(function() {

drawChart(data, "settlement", "settlement-chart", "settlement");
drawChart(data, "tracking", "tracking-chart", "tracking");

function drawChart(data, type, containerId) {
var chart, watchlistClaimsIDs,
defaultClaimColorString = 'rgba(158, 196, 229, 1)',
baseChartColor = '#fff',
axisLabelColorString = '#526e97';


...(truncated)...

myChart = new Highcharts.Chart({
chart: {
renderTo: containerId,
type: 'scatter',


...(truncated)...

Under the "chart: {" level, we have defined the tooltip as follows:

tooltip: {
useHTML: true,
enabled: false,
animation: false,
backgroundColor: baseChartColor,
borderColor: baseChartColor,

formatter: function() {
console.log("tooltip");
var lookupClaims = {};
var erQuadrant = Math.floor((Math.random() * 4) + 1),
acQuadrant = Math.floor((Math.random() * 6) + 1),
xVal = this.point.x,
claim = lookupClaims[this.point.id];
var selectedUser = "none";
if (this.point.x >= 1000 && this.point.x < 1000000) {
xVal = (this.point.x / 1000).toFixed(0) + 'K';
} else if (this.point.x >= 1000000) {
xVal = (this.point.x / 1000).toFixed(0) + 'M';
}

return '<div class="chart-tooltip">' +
'<h6>CLAIM NUMBER</h6>' +
'<span>' + claim.cn + '</span>' +
'<h6>ACCOUNT</h6>' +
'<span>' + claim.ac + '</span>' +
'<h6>CLAIMANT</h6>' +
'<span>' + claim.cln + '</span>' +
'<div><span>' + yAxisLabel.toUpperCase() + '</span><span>' + (type === 'settlement' ? this.point.y.toFixed(1) : claim.actualPerc.toFixed(1)) + '%</span></div>' +
'<div><span>EST. LEGAL SPEND</span><span>$' + xVal + '</span></div>' +
(!!selectedUser ? ('<a href="#/ecs/claim/' + this.point.id + '/' + ((type === 'tracking') ? 'ac' : 'er') + '/' + btoa(erQuadrant + '~' + acQuadrant) + '">See more</a>') : '') + '</div>';
}

}


...(truncated)...

Answer

It turns out that the problem is really basic: The 'enabled' attribute for the Tooltip is false, thus the tooltip is disabled.

tooltip: {
        useHTML: true,
        enabled: false, // tooltip is disabled
        animation: false,
        backgroundColor: baseChartColor,
        borderColor: baseChartColor,

The solution is to set that to 'true':

tooltip: {
        useHTML: true,
        enabled: true, // tooltip is enabled
        animation: false,
        backgroundColor: baseChartColor,
        borderColor: baseChartColor,
Comments