CODEWITHSUNDEEP
javascripthtmlcsshighcharts
Exploding Kitten
Exploding Kitten

Reputation: 1910

The tooltip is cut off in Highcharts 3.X

The tooltip is cut off when the width of chart is smaller than the tooltip width.

Issue

So, I've changed the "overflow" attribute of ".highcharts-container" to "visible" and it was fixed the issue in all browsers except IE (I see ScrollBars in some cases).

Normal

The question is "How can I keep ToolTip rendered normally and support IE?"

Upvotes: 1

Views: 3215

Answers (4)

shhdharmen
shhdharmen

Reputation: 1453

By default, highcharts puts tooltip in chart's SVG element box. And if tooltip is bigger than chart, it won't be visible.

In your case, I think you need to allow tooltip to go outside chart's SVG element box.

There is an API option for that: tooltip.outside, by default it's undefined. You can set it to true and your tooltip will render outside chart's SVG Element.

...
// chart options object... just need to update tooltip
{
  ...
  tooltip: {
    outside: true
  },
  ...
}
...

You can read more about it at https://api.highcharts.com/highcharts/tooltip.outside.

Upvotes: 4

gabbi soloer
gabbi soloer

Reputation: 453

The problem is that the containing html element is too small, and the tooltip is cut because of the overflow: hidden defined by highcharts.

you can add the following CSS class:

  .highcharts-container {
    overflow: visible !important;
  }

  .highcharts-container svg {
    overflow: visible !important;
  }

you need to use !important to override the style that is configured by highcharts.

Upvotes: 2

Christian Hill
Christian Hill

Reputation: 378

Set the z-index of the tooltip to 1000 and the z-index of the HighCharts outer container to a lower number.

Upvotes: 0

Lokesh Sardana
Lokesh Sardana

Reputation: 43

Why don't you define the width of your tooltip which is smaller than the width of your chart and wrap the text inside it: http://jsfiddle.net/4qLsw34t/

tooltip: {
            style: {
              width: "100px"
            }
  }

Or you can use the formatter option if using any earlier version of the highcharts: http://jsfiddle.net/4qLsw34t/5/

tooltip: {
        	useHTML: true,
        	formatter: function() {
                    return "<div style='white-space: normal; width: 150px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>";
                }
        },

Upvotes: 0

Related Questions