highcharts - Tooltip issue on columnrange -
please @ example. i've created on jsfiidle. http://jsfiddle.net/cr1t/ldln2/1/
the issue i'm having tooltip floats above graph. text on column range seems have higher z-index. no matter try , set on div style sheet, shows threw. i'd have point detail in html, because want make hyperlink tag.
plotoptions: { columnrange: { datalabels: { inside: true, enabled: true, usehtml: true, formatter: function () { if (this.y === this.point.low) { return '<div style="padding:2px;text-align:center;color:black;overflow:hidden;width:' + (this.point.plotlow - this.point.plothigh - 4) + 'px">' + this.point.low + '°c - ' + this.point.high + '°c </div>'; } } } } },
thanks anto
i followed duplicate.
i managed working way wanted css
http://jsfiddle.net/cr1t/ldln2/2/
.highcharts-data-labels { z-index: 1 !important; } .highcharts-tooltip span { background-color:white; opacity:1; z-index:9999 !important; padding:5px } .tooltip { padding:5px }
and setting style on tooltip
tooltip: { backgroundcolor: "rgba(255,255,255,1)", style: { padding: '1px' }, shadow: false, usehtml: true, percentagedecimals: 2, formatter: function () { return '<div class="tooltop">'+ this.point.category + '<br />' + 'temprature ' + this.point.low + '°c - ' + this.point.high + '°c </div>' } }
Comments
Post a Comment