Develop Reference

HighChart - Can draw line between Title and SubTitle

In HighChart, how can I make a green line appear between my title and my subtitle?
JSFiddle
title: {
useHTML: true,
text: 'Header Text in Line1 </br> Line 2 Text',
style: {
"text-align": "center"
}
},
subtitle: {
// useHTML: true,
text: 'SubTitle',
style: {
"color": "red",
}
}

What you'd need to do is modify the style attribute like this:
title: {
useHTML: true,
text: 'Header Text in Line1 </br> Line 2 Text',
style: {
"text-align": "center",
"border-bottom": "1px solid green"
}
},
Output

You can make the title display:block and then set the left to 0px. Then set the width to 100%. Now the title spans the whole width of the chart. Now apply a bottom border of green color. You will get the desired effect.
In the style property of the title, you could give
"width": '100%',
"display": 'block',
"left": 0
Have a look at this fiddle - https://jsfiddle.net/rwmntze8/
Hope this helps!
PS: Someone removed the original image containing the requirements, attached by the OP in the question, during the edits (You can find it in the edit revisions). I have attached it here for reference, in case someone thinks why the green line spans till the end.

Just need to add an empty css below, nothing more:
.highcharts-title {
border-bottom: 1px solid black;
}
Doing it by pure CSS (not by setting element style using JS) gives you the best performance.
Live example: http://jsfiddle.net/fqes890o/

Hiding an object using css

I am trying to hide a vertical bar I have created in a jQuery Flot graph when the mouse is not within the bounds of the grid. I set me horizontal bounds for the grid as such: horizontalBounds = [leftOffset, plot.width() + leftOffset];. I then used an if statement to say "if the mouse is within the vertical bounds, do this to the verticalBar.css."
if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
if (typeof verticalBar !== "undefined" && verticalBar !== null) {
verticalBar.css({
transform: "translate(" + position.pageX + "px, 0px)"
});
}
Below is my css code (which is actually in my javascript file; don't ask...). What do I need to do to hide the verticalBar when the mouse is not within those horizontal bounds? I was thinking I could just add the attribute `visibility: hidden' to the verticalBar.css, but I can't figure out how to do that. Any hints?
verticalBar.css({
backgroundColor: "#F7E4E6",
width: "1px",
height: "100%",
position: "absolute",
padding: 0,
margin: 0,
left: 0,
transform: "translateX(" + plot.getPlotOffset().left + "px)"
});
}

try using "display:none;" in your CSS.

Depending on how you're wanting to hide the bar, you can have something as simple as display: none.
If you're wanting to add in some animations, you could use some jQuery functions to control that particular node.
You could also utilize a set of CSS class name swaps to trigger some CSS animations.

so none of those methods seemed to work for me. I ended up discovering that Flot has a crosshair plugin (flot.crosshair). The crosshair can be configured to act only on the x axis/ x coordinate as it tracks the movement of the mouse. Here is an example of the crosshair tracking in action: Flot Tracking Example.
Once the plugin was added, I was able to get the desired results; as the "vertical bar" only shows up when the cursor is on the grid. Below is really all you need to do to configure it (other than adding the plugin to the appropriate files). Hope this helps someone in the future.
plot = $.plot(
placeholder
data
grid:
clickable: true
hoverable: true
color: "white"
mouseActiveRadius: 1000
tooltip:
show: true
content: '%y'
crosshair:
mode: "x"
color: "#FFFFFF"
lineWidth: 1

Understanding jBox configuration options

I was just playing around with this plugin called jBox.js and came across a few new options. It's a pretty customizeable plugin. The option I am talking about is adjustDistance.
The documentation says, you can pass in an integer or object, like so:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
I did that , but I don't see any difference in the way my tooltip is rendered, made a FIDDLE HERE.
The documentation describes this option as follows:
Distance to the window edge when adjusting should start. Use an object
to set different values, e.g. {top: 50, right: 20, bottom: 5, left:
20}
But I don't quite understand its usage. Can anybody explain?

If we give adjustDistance say 10, the tooltip will try to adjust(reposition) itself when any of window's edge is within 10px distance of the tooltip. You can give custom values for different edges of window as well.
This examples will make it clear:
Example 1:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
Example 2 (changing value for adjustDistance bottom):
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 150,
left : 15,
right : 50
}
});
});
For both of them, try clicking on button to open tooltip and then resize the window shrinking from bottom such that tooltip needs to readjust.

animate width of rectangle from center in raphael.js

I have a question about the .animate() Api in Raphael.js
There is a rectangle which I would like animate the width and height.
r.animate({ width: 50, height: 50 }, 1000, "bounce");
But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?
FIDDLE

There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.
Here is the DEMO
r.click(function() { r.animate({ transform:'s2' }, 500); });
Note that transform:'s2' means scale it 2x. Hope this helped ;)
EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.

You can use x and y to move the retangle and simulate it growing from center.
r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });
Here is a FIDDLE

Highcharts tooltip overflow is hidden

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/