score:8
ok, so here is a workaround for my problem... the idea is to create your own custom tooltip.
the solution was given on the highcharts forum: highcharts forum post
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:
//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>");
}
}
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).
//css
.highcharts-tooltip span {
background-color:white;
z-index:9999!important;
}
notice the z-index property, which is the property that will allow the tooltip to render over the datalabel.
now you can just custom your tooltip by setting css rules for the 'tooltip' class.
for a full live example, see the jsfiddle here: custom tooltip
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.
score:-1
check http://api.highcharts.com/highcharts#tooltip.backgroundcolor for tooltip background color.
same kind problem was solved with this property at highslide forum
score:4
6 years later, along with hc v6.1.1, a new tooltip option has been added, which solves this problem. see tooltip.outside
datalabels: {
usehtml: true,
formatter: function() {
return ("<span class='datalabel'>" + this.y + "</span>");
}
},
tooltip: {
outside: true
}
Source: stackoverflow.com
Related Query
- Highcharts - HTML tooltip & datalabels render issue
- Highcharts complex tooltip formatting issue with embedded html link
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Highcharts tooltip using HTML allows advanced formatting like images
- highcharts display in my render html page which i want to convert into PDF using wkhtmltopdf in rails
- Highcharts bubble chart datalabels color contrast issue
- How to edit tooltip in Highcharts C# code
- highcharts dataLabels support RTL with enable hover it for show tooltip
- how to use highcharts tooltip formatter in python code
- Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue
- Highcharts display label for pie chart using html table as data source
- HTML table as data source for highstock charts using highcharts
- Highcharts bar chart tooltip HTML positioning
- Highcharts Highmaps display tooltip of bubbles under datalabels
- show dataLabels or tooltip on Highcharts packed bubble outer circle
- Highcharts Tooltip - Returns unwanted empty string causing render problems
- Highcharts cloud issue with data source when duplicating chart
- Render title with dynamic html in highcharts
- Highcharts - issue with tooltip formatting in synchronized charts
- How to render html with highcharts in ionic 2
- Use HTML class as Highcharts table data source
- Highcharts columnrange tooltip issue
- HighCharts tooltip issue
- Clickable HTML element that closes Highcharts tooltip
- Highcharts DateTime xAxis and tooltip formatting issue
- Rendering Highcharts legend using HTML causes issue with positioning/spacing
- Issue with tooltip on Highcharts with multiple series added dynamically
- Disable highcharts tooltip on certain lines, leave it enabled on others?
- Highcharts - issue about full chart width
- Customize tooltip and format the number to 2 decimal places of highcharts
More Query from same tag
- Highcharts column range change color for negative numbers
- linkedTo with multiple ID in highcharts
- How to use 'compare' for all series except one
- angular2-Highcharts not working in angular-cli project
- Highcharts - bubble diagram need smaller bubbles infront of bigger
- Hide segment of a line in Highcharts
- Re-query mysql on .change <select>
- Highcharts - add minor ticks on zoom?
- Navigator line is different than series line
- HighCharts/HighStock memory leak with addPoints() in Chrome only
- Style specific data element in highchart
- Show Google Analytics 30 Day traffic on Highcharts.js
- How do I detect a zoom event in highcharts?
- Highcharts simple column chart: data not showing
- Disable the UTC timezone
- HIghcharts column graph with more than 50 data points
- Highcarts doesn't load my JSON data
- How to initiate AngularJs directive when its name is set with ng-class
- how to set Navigator label formatter in highcharts
- How to center the title text in pie chart highchart?
- Hide Scrollbar when Printing highchart from export menu
- Use a variable for Highcharts yAxis.Max
- Highcharts Highmaps How to import data from google spreadsheet
- Highstock - change range input beyond the data max
- Highcharts. How to start areaspline chart from start y axis?
- React highcharts unable to call function from data label onclick
- Show only the first and last y-axis label on a graph highcharts
- Yii vs Highcharts vs Ajax
- Highcharts saying undefined is not a function when trying to add a new chart
- highcharts multiple line live graph