Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highcharts tooltip text align

I have created a graph using high charts. The tooltip works fine in FF and IE but in chorme the text goes out of the frame.

I tried using HTML

tooltip:
    {
     //Tried this also
    /* formatter: function()
    {
    return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y;
    }, */
    useHTML: true,
    formatter: function() {
    var html="<div style='width:140px;text-align:center; direction:ltr'>"+
    Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y+
    "</div>"; 
    return html;
    }

},
like image 298
devmonster Avatar asked Oct 25 '25 23:10

devmonster


1 Answers

Answer from Highcharts.com:

tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '<small>{point.key}</small><table>',
        pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
        '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
        footerFormat: '</table>',
        valueDecimals: 2
    },

Fiddle Here

like image 126
Lucho Avatar answered Oct 29 '25 11:10

Lucho



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!