I would like to set a two-line tooltip in a column chart. I want the weighted value in the first line and another information in the second line. How to do a break line for CHARTS > Column Chart? I am using the 9.1 Service Studio version. 

I have tried with this code but to no avail.

"tooltip:{   useHTML:true,
             formatter: function(){
             return 'O valor da média ponderada é de ' + " +  Avg + " + ' %<br/> o VALOR do dominante é ' + " + Dominante + ";

* avg and dominante are local variables. 

The graph has disappeared with this code set in the ADVANCED FORMAT property. I have tried several versions of the code.. but it never works.  (in the data point, on tooltip property,  \n , NewLine() does not work as well, and I cannot use HTML tags like the break tag.. )

I am almost sure that syntax is not correct somewhere.... may you help me to overcome this problem? 

I have tried with several variations but it still does not work. 


Solution: it will not work the way I was trying. To make it working check below.

First step: go to the column chart and set the Advanced Format as 

    "tooltip: {   

Then , in the DATAPOINT (user action) in the preparation set the TOOLTIP as

"<b>Média " + Avg + "%</b><br/>" + Dominante

But if I want to align the text (center), it does not work 
I have used align:'center'.... any hints for this?

I have not tried this, but what if you use a <div align="center"> </div> around the content that you want to center?

Hi Paulo

Nice to meet you here as well. 
I'm afraid that option does not work. It does not recognize the center part...


Hello Jorge,

I investigated this further and unfortunately it seems that there is no easy way of centering the text inside a tooltip.

The Charts in OutSystems actually use a JavaScript library called Highcharts (http://www.highcharts.com/). This library renders the charts on the screen using SVG. This means that the HTML that you are defining for the tooltip is converted to SVG (even when you define useHtml to yes, which is strange).

I used JSFiddle to play around with the CSS and HTML and even SVG attributes without success: http://jsfiddle.net/ehrqxh41/1/

The Highcharts documentation includes some advanced examples of formatting the tooltip using tables but I wasn't able to obtain the same results: http://api.highcharts.com/highcharts#tooltip

Finally, on the official support forums of Highcharts there is one question on how to center the text in tooltips but the answer doesn't help: http://forum.highcharts.com/post64399.html#p64399

so.... no one has remembered to set a very simple way to center text in tooltip. 

Thanks, Paulo.
Just one more question: any ideas how to set the minimum value for y axis. Imagine that I have a column chart and the first value is 1. By default it shows the 0.2, 0.4, 0.6, 0.7, 0.8 .... and I want to show only the 1 (without the decimals) , as the value are all INTEGERS.  (so I'll need to set the Y axis scale to be 1 at mininum, and it is set as 0.2.... )
I have tried the following code and it does not work. 
    "tooltip: {   
     yAxis: { allowDecimals: false,} 


The AdvancedFormat_Init() function includes YAxisJSON and XAxisJSON inputs for the configuration of both axes of graphs. And here's the Highcharts documentation for the Y axis configuration.

So, you can limit the minimum value in the Y axis to 1 and avoid the decimals as follows (while still keeping other advanced formatting in the HighchartsJSON input:

AdvancedFormat_Init(YAxisJSON: "min: 1, allowDecimals: false", HighchartsJSON: "...")