When I hover on series, It shows perfect data but title in background is also visible.
See these images
Actual chart
Tooltip
Here is code link - https://jsfiddle.net/gkd/97mk583y/
tooltip & Title both are generated using useHTML: true
How can we make sure title doesn't appear in background of tooltip ?
opacity in background color is already 1.
Because both of this elements are outstanding HTML elements try to use this config rather than inline styling:
"tooltip": {
padding: 0,
"style": {
"color": "#FFFFFF"
},
"enabled": true,
"useHTML": true
},
And CSS:
.highcharts-tooltip>span {
padding: 10px;
margin: 0;
background-color: rgba(0, 0, 0, 1);
z-index: 9999 !important;
}
Demo: https://jsfiddle.net/BlackLabel/z5Lb1hmt/
Related
I am trying to increase the line spacing in my Highcharts tooltip in styled mode. I have tried using CSS to set line-height on the .highcharts-tooltip as well as its text and tspan elements:
.highcharts-tooltip,
.highcharts-tooltip text,
.highcharts-tooltip tspan
{
line-height: 40px;
}
I have also tried using the tooltip.style option:
tooltip: {
style: { lineHeight: 40 }
}
Neither approach has any effect in styled mode. Has anyone managed to make this work?
You need to enable useHTML property for a tooltip.
tooltip: {
useHTML: true,
...
}
CSS:
.highcharts-tooltip {
line-height: 40px;
}
Live demo: http://jsfiddle.net/BlackLabel/893k5cnL/
API Reference: https://api.highcharts.com/highcharts/tooltip.useHTML
I am using Highcharts 6.0.1 in styled mode and trying to set a custom color for a specific point and the correspondent halo.
I need to be able to dynamically append a class name to some of the points in the series. These points need to be displayed in a different color, thus overriding the default series colors (.highcharts-color-i).
I managed to override the color of a specific the point, as the point object accepts an optional className which can then be used to style the color of the slice in the pie chart.
The css rule for the halo though, is set to inherit the color of the correspondent .highcharts-color-i and since it is not a child element of the point it cannot inherit the custom class name.
Here is a code snippet. You can see that when hovering over the grey slice, the halo is using the default color.
Highcharts.chart('container', {
title: {
text: 'Pie point CSS'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
keys: ['name', 'y', 'className'],
data: [
['Point1', 29.9,],
['Point2', 14.5],
['Point3', 11.5],
['Point4', 54.5, 'custom-style'],
],
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 400px;
max-width: 800px;
min-width: 320px;
margin: 0 auto;
}
.highcharts-tooltip {
stroke: gray;
}
.highcharts-pie-series .highcharts-point {
stroke: #EDE;
stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
stroke: silver;
stroke-dasharray: 2, 2;
stroke-width: 2px;
}
.highcharts-pie-series .highcharts-point.custom-style,
.highcharts-pie-series .highcharts-data-label-connector.custom-style {
stroke: lightgray;
stroke-dasharray: white;
stroke-width: 1px;
fill:lightgray;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container"></div>
Halo is a property of a series (not a point - only one halo can exist per series). In DOM tree it's on the same level as the rest of the points.
You can use point's mouseOver event for setting the color of the halo:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var point = this,
className = point.className;
if (className) {
point.series.halo.attr({
class: 'highcharts-halo custom-style'
});
}
}
}
}
}
}
.highcharts-halo.custom-style selector is used for styling via CSS.
Live demo: http://jsfiddle.net/kkulig/fv0zen7L/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I would like to make tooltip in Highstock styled differently(not just style of content, but style for tooltip itself. For example, different padding, shadow, border radious etc) when hovering over flag series and line serieses. However, it looks like these properties needs to be configured in the tooltip configuration object. Not sure if it can be dynamically changed.
Like in this jsbin:
http://jsbin.com/cixowuloxa/1/edit?js,output
What's the better way to give 'Summer arrives' tooltip different style than other shared tooltips?
Your approach is correct. In the formatter callback wrap the text in the html tags and style it using css, inline or by class name, depending if it is a flag or line series. Make sure you set useHTML to true.
tooltip: {
useHTML:true,
borderWidth: 0,
headerFormat: '',
shared: true,
formatter: function(){
if (!!this.points) {
return this.points
.reduce(
function(prev, cur) {
return prev +
'<br>' + cur.series.name + ': '+ cur.y;
}, '');
}
return "<div style='border:5px solid black; padding: 20px'>Summer arrives!</div>";
},
padding: 0
}
example: https://jsfiddle.net/hpeq7Lbe/1/
Actually, you can set different options for flag's and line's tooltip, but not all the options are supported, e.g. padding or border width will not work - they have to be set in the tooltip's global options.
plotOptions: {
line: {
tooltip: {
pointFormat: 'line',
borderWidth: 10, // not supported
padding: 10 // not supported
}
},
flags: {
tooltip: {
pointFormat: 'flags',
borderWidth: 1, //not supported
padding: 1 // not supported
}
}
}
example: https://jsfiddle.net/hpeq7Lbe/3/
I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.
},function(chart){
chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})
This works fine, except for the fact that the left border stroke doesn't show the full width i.e.
These are my plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
stacking: 'normal',
pointPadding: 0.1,
borderWidth: 0,
lineWidth: 0,
dataLabels: {
enabled: true,
formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
useHTML: true,
connectorWidth: 1,
style: {
fontSize: "14px",
color: '#FFFFFF',
fontWeight: 'normal'
}
}
}
},
Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:
AFTER HOVERING
Any pointers to resolving either of these issues would be appreciated.
FIXED - Hover Issue
I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.
If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}
FIXED - SVG Border issue on Stacked charts
It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.
$(".highcharts-series:gt(0) rect").each(function(index,value) {
$(this).attr("height",$(this).attr("height")-1);
$(this).attr("y",parseInt($(this).attr("y"))+1);
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
No CSS setting helped and no higher z-index setting helped either.
Here is my example... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
Thank you.
This css helped me:
.highcharts-container { overflow: visible !important; }
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
Here is what I did and what I suggest everyone to try:
Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:
tooltip: {
useHTML: true
}
Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.
Adding simply this CSS worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
I recently got the same problem, but with bootstrap container ! (bs3)
None of those solutions worked but I found by my own.
Its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
So add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
Tooltip options:
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
None of the solutions worked for me. When the tooltip was bigger than the chart it simply didn't show.
Eventually we realized that Highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
After that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
And make sure to set the z-index higher in the container if you're having any problems.
I would just like to add an example and prove that .highcharts-tooltip-box
doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
Demo:
https://jsfiddle.net/BlackLabel/3fubr1av/