how to format a currency in the tooltip into pie chart ?

how to format a currency in the tooltip into pie chart ?

  

Hi guys,

    I tried to put valueDecimals:2 into tooltip and it doesn´t work. After that I tried the FormatDecimal and it seems OS function doesn´t work into tooltip.  Someone knows how to format a currency value on a pie chart ?  This is what I have for while...

Hi Luciano, 


The charts i usually do i get all the data formatted from my advanced query. So in this case i would use the to_char function from the database.

Hope it helps.

Cheers,

João Sousa

Luciano,

Check the Highcharts documentation. It's possible to create a custom tooltip in JavaScript.

Hi Joao,

   how do you set the value in the datapoint_init if you use the value converted to char ?  It is supposed that value in the datapoint is a value ...

Kilian,

    I am using the Highcharts documentation for tooltip and there is a decimal sample too, but it did not work as I showed in my first post. 

   I didn´t see some way to format hundreds.  I am a little lost...

Kilian,

   here is the numberFormat that doesn´t work. Did I do something wrong ? 

SyntaxEditor Code Snippet

 return this.point.name +': '+ numberFormat(this.point.y, 2, ',', '.');
Solution

Luciano,

Do you see errors in the console (DevTools)? Can you debug the JavaScript? Here's a piece of JSON/JavaScript that I've fed to AdvancedFormat_Init/HighchartsJSON:

tooltip:{
    shared: false,
    useHTML: true,
    formatter: function() {

        var tip = '<span style=\'color:rgb(0, 74, 147); font-weight:bold\'>' + Highcharts.dateFormat('%B %Y', this.x) + '</span><br><br>' +
                  '<table style=\'color:rgb(0, 74, 147); border-collapse:collapse\'>';
      
        if (this.point.series.chart.series.length >= 1) {
            var index = this.point.series.xData.indexOf(this.point.x),
                stackname = this.point.series.name,
                yAxisLabel =  ' ' + this.point.series.yAxis.axisTitle.textStr,
                total = 0.0,
                visibleCount = 0;

            $.each(this.point.series.chart.series,
                function(i, s) {
                    if (s.visible && s.name != '" + a_DataPointListPY.Current.DataSeriesName + "') {
                        total += s.data[index].y + s.data[index+1].y;
                        visibleCount++;
                    }      
                    if (s.name == stackname) // This means same connection as the one hovering above
                    {     
                        // for each month 2 values are available. First is the normal and second is the low tariff value
                        if(s.data[index+1].y > 0)
                        {
                            tip += 
                            '<tr>' + 
                                '<td style=>" + "Low" + "</td>' +
                                '<td style=\'text-align:right\'>' +
                                    Highcharts.numberFormat(s.data[index+1].y, 0, " + "','" + ", " + "'.'" + ") + yAxisLabel +
                                '</td>' +
                            '</tr>';   
                             tip += 
                            '<tr>' + 
                                   '<td style=\'border-bottom:2px solid rgb(0, 74, 147)\'>" + "Normal" + "</td>' +
                                    '<td style=\'border-bottom:2px solid rgb(0, 74, 147); text-align:right\'>' +
                                        Highcharts.numberFormat(s.data[index].y, 0, " + "','" + ", " + "'.'" + ") + yAxisLabel +
                                    '</td>' +
                            '</tr>';
                        }                 
                        tip += 
                        '<tr>' + 
                               '<td style=\'font-weight:bold;padding-right: 10px\'>' + s.name + '</td>' +
                                '<td style=\'text-align:right; font-weight:bold\'>' +
                                Highcharts.numberFormat(s.data[index].y + s.data[index+1].y, 0, " + "','" + ", " + "'.'" + ") + yAxisLabel +
                            '</td>' +  
                        '</tr>';                        
                    }          
                }
            );

            if (this.point.series.name == '" + a_DataPointListPY.Current.DataSeriesName + "') {
                tip += 
                    '<tr>' + 
                        '<td style=>" + "Current year" + "</td>' +
                        '<td style=\'text-align:right\'>' +
                            Highcharts.numberFormat(total, 0, " + "','" + ", " + "'.'" + ") + ' ' + this.point.series.yAxis.axisTitle.textStr +
                        '</td>' +
                    '</tr>';

            }
            else if (visibleCount > 1) {
                tip += 
                    '<tr><td colspan=2> </td></tr>' + 
                    '<tr>' + 
                        '<td style=>" + "Total all connections" + "</td>' +
                        '<td style=\'text-align:right\'>' +
                            Highcharts.numberFormat(total, 0, " + "','" + ", " + "'.'" + ") + ' ' + this.point.series.yAxis.axisTitle.textStr +
                        '</td>' +
                    '</tr>';
            }
        }

        tip += '</table>';

        return tip;
    }
}

It's probably more complex than you'll need (it sums stuff), but it has the numberFormat in it.

Solution

You are great Kilian. I had only to do a few adjustments here.  Now it works.

SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"tooltip: { enabled: true, formatter: function() {
        return this.point.name +': '+ Highcharts.numberFormat(this.point.y,2,'.',',') +' (<b>'+this.percentage.toFixed(1) +'</b>%)';}}")

Thanks so much

Luck

Hi Luciano,

Good to hear it works! I admit that most of that code of mine is probably copied from some other source, but when it works, it works :).

P.S. Don't forget to press the "Like" button on my post above, if you like it :).

right :)   done!!  And Thank you again.