Tooltip formatting

[papito]

Aside from this https://canvasjs.com/docs/charts/chart-options/tooltip/content-formatter/

Is there an easier way to format the tooltip by passing a function like the one below so that the values gets formatted? Much like using the xValueFormatString but passing the function name instead.

function getReadableHashRateString(hashrate){
	hashrate = (hashrate * 2);
	if (hashrate < 1000000) {
		return (Math.round(hashrate / 1000) / 1000 ).toFixed(2)+' Sol/s';
	}
    var byteUnits = [ ' Sol/s', ' KSol/s', ' MSol/s', ' GSol/s', ' TSol/s', ' PSol/s' ];
    var i = Math.floor((Math.log(hashrate/1000) / Math.log(1000)) - 1);
    hashrate = (hashrate/1000) / Math.pow(1000, i + 1);
    return hashrate.toFixed(2) + byteUnits[i];
}

[Indranil]

@papito,

Just like formatting the axis labels can be achieved using labelFormatter as shown in this example, you can also format toolTip content using contentFormatter according to your requirements as shown in the below code snippet –

toolTip: {			
  contentFormatter: contentFormatter
},

function contentFormatter(e){
  var hashrate = e.entries[0].dataPoint.x;
  if (hashrate < 1000000) {    
    return (Math.round(hashrate / 1000) / 1000 ).toFixed(2)+' Sol/s';
  }
  var byteUnits = [ ' Sol/s', ' KSol/s', ' MSol/s', ' GSol/s', ' TSol/s', ' PSol/s' ];
  var i = Math.floor((Math.log(hashrate/1000) / Math.log(1000)) - 1);
  hashrate = (hashrate/1000) / Math.pow(1000, i + 1);
  
  return hashrate.toFixed(2) + byteUnits[i];
}

Please take a look at this JSFiddle for a working example.

___________
Indranil Deo
Team CanvasJS

[papito]

But the format applies to all line series. I have two data that needs to be formatted separately.

Sample jsfiddle https://jsfiddle.net/spakdhku/9/

[papito]

It also doesnt work when you use shared: true on toolTip

Edit: Looks like I was wrong, I guess you could loop through the entries?

• This reply was modified 6 years, 1 month ago by papito.

[Indranil]

@papito,

When shared property of toolTip is set to true it lists all the dataPoints of corresponding x-value for each dataSeries. You can loop through the entries to get all dataPoints of corresponding x-value in contentFormatter as shown in the code snippet below –

function contentFormatter(e){
  var content = " ";
  for (var i = 0; i < e.entries.length; i++) {
    var hashrate = e.entries[i].dataPoint.x;
    if (hashrate < 1000000) {    
      content += (Math.round(hashrate / 1000) / 1000 ).toFixed(2)+' Sol/s';
      content += "<br/>";
    }
    else {
      var byteUnits = [ ' Sol/s', ' KSol/s', ' MSol/s', ' GSol/s', ' TSol/s', ' PSol/s' ];
      var j = Math.floor((Math.log(hashrate/1000) / Math.log(1000)) - 1);
      hashrate = (hashrate/1000) / Math.pow(1000, j + 1);
      content += hashrate.toFixed(2) + byteUnits[j];
      content += "<br/>";
    }
  }
  return content;
}

Also, please take a look at this JSFiddle for a working sample.

___________
Indranil Deo
Team CanvasJS