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
- How to set new yAxis data in chart dynamically (highcharts + angular2(4))?
- Show Google Analytics 30 Day traffic on Highcharts.js
- Highcharts dates
- Do I need to install anything to run Highchart?
- Highcharts select chart by button click and adjust width
- Highcharts JS: Gap between X-Axis labels is too thin
- How to add multiple data types to list
- How to set category type with Highcharts and chartkick?
- omit top border of highcharts chart
- Rails App Plotting Zeros in Highchart Graph via Lazy_High_Charts Gem
- Highcharts series visibility with csv data source
- Highstock chart - selecting '1 month' button in rangeSelector not changing button style as selected
- Setting Highcharts color theme using CSS
- Query selector for the individual buttons in range selector
- use material icons in highcharts
- Highcharts show two line series with same values
- Highcharts area charts with single data, not rendering
- highcharts donut pie - How to calculate pie size percentages after resize the chart
- How do I create a graph from JSON data in Ruby on Rails?
- Highcharts get selected column index
- Decrease distance between point in highchart
- Scroll bar alway to right when updating highstock graph
- Dealing with large numbers on yAxis
- How to convert long string into CSV using the export-csv plugin for HighCharts
- Center visible HighMaps area
- Highcharts sunburst dodrilldown
- highcharts legend overlapping
- HighCharts activity gauge populated with series data from a function
- highcharts end point to endpoint connection
- Highcharts component that creates secondary yAxis based on props.boolean