Search code examples
highchartscolumn-chart

Commas in tooltip of Highchart


I use Highchart to draw some charts. I use this format in tooltip of highchart:

tooltip: {
     crosshairs: [true, true],
     shared: true,
     useHTML: true,
    formatter: function() {

            var s = [];
            s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' + 
             this.x + '</b></td></tr>');
            $.each(this.points, function(i, point) {
                s.push('<tr><td style="text-align: right;">'+
                              '<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
                           '</td>'+
                           '<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
                           '<td><b>' + point.y+'</b></td>'+
                       '</tr>');
            });

            s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
             this.points[0].point.NumberNews + '</b></td></tr></table>');                                   
            return s;   
    }
},

The result is same :

Result

My question is: Why top of this tool-tip print some commas? How can I delete those?

thanks


Solution

  • You are returning an array. The formatter expects a string to be returned. It seems to print the separator commas from the array entries.

    You have the code:

    var s = [];
    // ...
    return s;
    

    Instead you could do (JSFiddle):

    var s = [];
    // ...
    return s.join('');
    

    This just concatenates the array entries with no separator sign.