score:15
ok, sorry for the delay. i could not find a better solution, but i found a workaround.
here is what i did and what i suggest everyone to try:
set the tooltip.usehtml property to true (now you can have more control with html and css). like this:
tooltip: {
usehtml: true
}
unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. here is what i did...
tooltip: {
shared: false,
borderradius: 0,
borderwidth: 0,
shadow: false,
enabled: true,
backgroundcolor: 'none'
}
make sure that your chart container's css property "overflow" is set to visible. also make sure that all dom elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". in this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (is this a correct term? :)).
customize your tooltip formatter as you wish, using standard css styling. here is what i did:
tooltip.formatter: {
< div class ="tooltipcontainer"> tooltip content here < /div >
}
this is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipcontainer"> tooltip content here < /div >
},
usehtml: true,
shared: false,
borderradius: 0,
borderwidth: 0,
shadow: false,
enabled: true,
backgroundcolor: 'none'
}
if you have a better solution, please post.
score:0
none of the solutions worked for me. when the tooltip was bigger than the chart it simply didn't show.
eventually we realized that highcharts actually hides the tooltip in the class highcharts-tooltip-box
, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
after that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
and make sure to set the z-index higher in the container if you're having any problems.
score:1
i would just like to add an example and prove that .highcharts-tooltip-box doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
score:2
i know the question is old but i just wanted to share my solution, it's based on the other two answers but i think that you obtain a better-looking result with this code:
tooltip options:
tooltip: {
usehtml: true,
shared: false,
borderradius: 0,
borderwidth: 0,
shadow: false,
enabled: true,
backgroundcolor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
css:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divcontainerid .highcharts-container{
z-index: 10 !important; /*if you have problems with the label hiding behind some other div or chart play with z-index*/
}
score:5
adding simply this css worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
the tooltip option usehtml was not required:
tooltip: {
usehtml: false
}
works on both ie8/9 & ff33.1 (ff was causing trouble).
score:5
i recently got the same problem, but with bootstrap container ! (bs3)
none of those solutions worked but i found by my own.
its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
so add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
score:10
a modern approach (highcharts 6.1.1 and newer) is to simply use tooltip.outside
(api):
whether to allow the tooltip to render outside the chart's svg element box. by default (
false
), the tooltip is rendered within the chart's svg element, which results in the tooltip being aligned inside the chart area. for small charts, this may result in clipping or overlapping. whentrue
, a separate svg element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
quite simply this means setting this one value to true
, for example:
highcharts.chart('container', {
// your options...
tooltip: {
outside: true
}
});
see this jsfiddle demonstration of how setting this value to true
fixes space/clipping issues.
score:26
this css helped me:
.highcharts-container { overflow: visible !important; }
Source: stackoverflow.com
Related Query
- Highcharts tooltip overflow is hidden
- How to edit tooltip in Highcharts C# code
- Highcharts tooltip is hidden behind other charts
- how to use highcharts tooltip formatter in python code
- Highcharts tooltip hidden behind second chart
- Highcharts in JQuery Tabs - Resizing hidden tab code stops resizing visible tab
- Disable highcharts tooltip on certain lines, leave it enabled on others?
- Customize tooltip and format the number to 2 decimal places of highcharts
- customize highcharts tooltip to show datetime
- Highcharts - Hidden charts don't get re-size properly
- highcharts pass multiple values to tooltip
- Disable tooltip on certain points in Highcharts
- Highcharts tooltip always on right side of cursor
- Highcharts tooltip formatter
- Format tooltip numbers in Highcharts
- Weird character in front of Highcharts tooltip series names
- Display tooltip for invisible series in Highcharts
- Change Highcharts tooltip formatter from chart Object , after chart is rendered
- Adding thousands separator for custom formatted highcharts tooltip
- Highcharts - How to display legend symbol inside the tooltip
- highcharts tooltip z-index
- Add tooltip to legend in highcharts when hovering
- Highcharts - Keep tooltip showing on click
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Tooltip on custom button in Highcharts
- highcharts customize tooltip for a single point
- Always showing tooltip on all columns in Highcharts
- Highcharts - only show tooltip when hovering directly on point
- Highcharts how to remove headers from tooltip
- Highcharts - How to hide series name and Y value in tooltip
More Query from same tag
- Add CSS to a specific series' legend label in Highcharts
- Highcharts treemap link legends
- Highcharts: is it possible to set up top border radius for the columns in Column chart?
- Highcharts two charts on page
- Highcharts gauge: Circle points on gauge
- Sankey: Show dynamically text on x-axis
- HighCharts tooltip appearing behind the dialog holding the chart
- Django Chartit graph not displaying. Jquery issue?
- Update datalabel position after Heatmap resize with Highcharts
- Highchartjs won't load
- Highchart.Chart() on Marionette App
- horizontal scroll bar in highcharts
- Highcharts: plot a number that was too small to detect?
- JSON string from SQL Table - Bad values in the chart
- Highcharter setExtremes Function in R
- Highcharts not rendering
- Detect a click on, and add hover/selected style for x axis on area chart in Highcharts?
- How to show sum of all visible series' data dynamically
- Highcharts how to create dot hover at end of line chart
- Why ReactHighcharts SolidGauge's rounded is not working in react
- offset long series labels with lines
- How to change highmap bubble color
- Hide columns on Stacked Bar when all values are 0
- HighStocks with Reactjs - Make it occupy full size of div container
- NReco HTML-to-PDF Generator for .NET blank pdf angular 2 highchart
- How to set correct xAxis time data in Highcharts?
- Highcharts Donut chart is rendered as a Pie chart in IE 8
- Logarithmic axis not showing appropriate ticks for small numbers
- datatable and highchart functionality not working with 'View All' bootstrap tab
- Show the chart on IE7?