CODEWITHSUNDEEP
highcharts
user1249791
user1249791

Reputation: 1271

adapting text to highchart tooltip max width

I wanna adapt vertically the text in my highcharts tooltip (a max-width is defined, so if text does not fit to this max width, increase tooltip height to fit the text in)

What works for simple HTML stuff...

#my_div
{
   height:auto;
   max-width:140px;
   overflow:auto
}

does not work for highcharts tooltips, see http://jsfiddle.net/perikut/hNCDb/2/

Upvotes: 9

Views: 22219

Answers (3)

Arcel Maendeleo
Arcel Maendeleo

Reputation: 43

Simply add this to the chart options:

tooltip:{
    shared: false,
    useHTML: true
}

Then add the following to your CSS:

.highcharts-tooltip span {
    height:auto !important;
    width:140px !important;
    max-width:140px !important;
    overflow:auto !important;
    white-space:normal !important; 
}

You are good to go! ;-)

Upvotes: 4

Tim M.
Tim M.

Reputation: 54387

If you only want to change the white-space behavior ofthe tooltip for a single chart and/or seperately control the style for each individual chart, you can use the following approach:

 tooltip: {
    useHTML: true,
    formatter: function() {
        return "<div style='width: 400px; white-space:normal;'>" + this.points[0].point.yourDataPointValue + "</div>";
    }  
 }

Demo

Note that you can/should use use a class name versus an inline style if you want to reuse the same style for multiple tooltips.

Upvotes: 5

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

default white-space is set nowrap, you should change it to normal.

.highcharts-tooltip span {
    height:auto;
    width:140px;
    background-color:green;
    overflow:auto;
    white-space:normal !important; // add this line...
}

DEMO

Upvotes: 18

Related Questions