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

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -