StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ok, so here is a workaround for my problem... The idea is to create your own custom tooltip.</p> <p>The solution was given on the Highcharts forum: <a href="http://highslide.com/forum/viewtopic.php?t=22633" rel="noreferrer">Highcharts forum post</a></p> <p>To do so, set the 'useHTML' property on both datalabels and tooltips, remove some defaults properties of the tooltips and setup the CSS classes in the formatters functions:</p> <pre><code>//JS datalabels: { ... useHTML: true, formatter: function() { return ("<span class='datalabel'>" + this.y + "</span>"); } } tooltip: { ... borderWidth:0, borderRadius:0, shadow:false, useHTML: true, formatter: function() { return ("<div class='tooltip'>" + this.y + "</div>"); } } </code></pre> <p>The final step (the most important) is to set up the CSS rules for the highcharts-tooltip span class (which is used by Highcharts to render HTML tooltips).</p> <pre><code>//CSS .highcharts-tooltip span { background-color:white; z-index:9999!important; } </code></pre> <p>Notice the z-index property, which is the property that will allow the tooltip to render over the datalabel.</p> <p>Now you can just custom your tooltip by setting CSS rules for the 'tooltip' class.</p> <p>For a full live example, see the jsfiddle here: <a href="http://jsfiddle.net/alapenna/Rbaqw/53/" rel="noreferrer">Custom tooltip</a></p> <p>Note: It is not mandatory to specificy the datalabel class in the formatter for this solution to works, I just need so I can register a specific mouse event on it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload