2

I have to use pointFormat property to format the tooltips. The problem with this is that I can not figure out a way to use {point.y} (0.0324123) and make it format to a precent (3.24).

As i said above, I have to do this in tooltip.pointFormat. My current code looks like this

$highcharts[$key]['tooltip'] = [
    'pointFormat' => '<p style="margin:0;"><span style="color:{series.color};">{series.name}</span>: <b>{point.y:,.2f}%</b></p>'
];

Is there a way to do {point.y:,.2f} * 100 within the html/HighCharts syntax?

Any help is appreciated.

KernelCurry
  • 1,297
  • 1
  • 13
  • 31
  • Why not use `formatter` instead of `pointFormat`? I know you said you "have" to use `pointFormat`, but I just wanted to make sure we're covering all the bases... – John Chrysostom Jul 09 '14 at 19:17
  • This is because i am making the options array in PHP and passing it to javascript. you can not pass function this way. – KernelCurry Jul 09 '14 at 23:09
  • I usually solve this problem (the passing stuff from PHP one) by having two javascript objects. One of them is hard-coded in the javascript and contains anything that won't be changing... that's formatter functions, most of the setup for the chart, etc. I have another javascript object that contains changing values (e.g., the data, labels, etc.) that need to be generated by PHP. I then merge the two objects together before rendering the chart. See here for how to do that. http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically – John Chrysostom Jul 10 '14 at 11:35
  • 2
    `pointFormat` can only set simple patterns, it won't accept any calculations. For such purposes you indeed need to use `formatter`. – Paweł Fus Jul 14 '14 at 10:18

2 Answers2

2

Here is the DEMO You will have to use tooltip.formatter option like this (will return value truncated upto two decimal places):

tooltip: {
                //valueSuffix: '°C',
                enabled: true,
                formatter:function(){
                  return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>: <b>'+Highcharts.numberFormat((this.y*100),2,'.')+'%</b>';
                }
            },
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • 1
    My dear friend, you will have to understand that `tooltip.pointFormat` does not provide flexibility to perform mathematical calculation on the values as provided by `tooltip.formatter` option. And after all what you want is to display the formatted values in the tooltip, right ? – Rahul Gupta Jul 14 '14 at 05:24
  • I have updated my answer to return value in percentage truncated upto two decimal places – Rahul Gupta Jul 14 '14 at 05:37
0

After looking into this further, there is not way to use 'pointFormat' and multiple (convert to percent).

Solution: DO not use 0.035, use 3.50. If you do this, Highcharts will format the Axis correctly.

Edit: Rahul Gupta Posted below with a way to do this using for Formatter if that is what you want to do.

KernelCurry
  • 1,297
  • 1
  • 13
  • 31