StackLabels are displayed over tooltip, when useHTML is set to true in stackLabels.
This looks quite odd.
I tried adjusting z-index of .highcharts-stack-labels and .highcharts-tooltip, but no luck.
P.S - I tried the solution here, but that didn't work for me.
Fiddle : https://jsfiddle.net/nrcuks2a/
The below option solved the problem
tooltip: {
outside: true
}
see here
updated fiddle : https://jsfiddle.net/nrcuks2a/2/
I need to make tooltip of some point make visible without moving mouse over the point. Say, I load my chart and have some tooltips already visible. Thanks for any help.
If you want the tooltip to show automatically on a point on load:
chart: {
events: {
load: function(){
// show tooltip on 4th point
var p = this.series[0].points[3];
this.tooltip.refresh(p);
}
}
},
Here's a fiddle.
Defaulty it is not available in the highcharts, but maybe better is using flags
I've got a HighChart bar chart with a whole ton of options, and it works perfectly except for one minor issue. According to all the documentation I've found, if I have a plotOptions of :
{
cursor: "pointer",
column:{
dataLabels: {
color: "#4572A7",
enabled: true,
style: {"fontWeight":"bold"}
},
inside: false,
point:{"events":{}},
stacking: 'normal',
}
}
I should get a caption above each bar in my bar chart. However, instead of appearing above each bar, these captions are being rendered in the center of the bar. I'm sure I'm just missing one key option or something, but I haven't been able to figure out what that option is ... do any HighCharts experts out there happen to know?
It turned out that the option I was missing was verticalAlign; when I added that to my dataLabels options (with a value of "top") it fixed things ... well mostly. I also had to add a y option of "-10" to actually get the labels to be above the bar.
The funny thing is, I have the code for an old version of the chart, and it didn't have a verticalAlign option at all, but it showed its labels above the bar. I guess some other option that I'm using in my version made the verticalAlign necessary.
In any case, I'm leaving this self-conversation behind in case someone else runs in to this same problem.
I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.
With TinyMCE3 we can do it with:
tinymce.init({
...
theme_advanced_path : false
});
How can I have the same result with TinyMCE4?
Thanks
In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:
tinymce.init({ elementpath: false });
This works for me:
.mce-path {/* CSS */
display: none !important;
}
EDIT:
In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!
The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();
tinymce.init({
statusbar : false,
The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.
I wanted to keep this flexibility and found the following solution:
a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}
b) For an editor instance which should provide a resize handle without path display, define the following options:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
From: Remove menu and status bars in TinyMCE 4
Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:
.mce-path {
display: none;
}
I am using tinyMCE v5. And the following works.
In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.
One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.
Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.
Setting theme_advanced_statusbar_location to empty string worked for me.
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
Mine is based on the opacity concept from Dustin Carr above:
For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...
It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.
Hope it helps some one...
EDIT:The same for mce-divider ;)
Thanks to #Dustin Carr for his answer.
I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
My problem is exactly the same as this post. The context menu gets hidden when charts get below a certain size. The accepted answer:
.highcharts-contextmenu {
bottom: auto !important;
top: 5px;
}
works to make the menu downwards. But it is still hidden if the chart is small. Something like this: FIDDLE.
Could anybody please help? Thanks.
You need to overwrite z-index and overflow on highcharts-1 container
http://jsfiddle.net/xBUXK/16/
#highcharts-0 {
overflow:visible!important;
z-index:1!important;
}
I modified Sebastian Bochans answer to this and it worked:
.highcharts-container {
overflow:visible!important;
z-index:1!important;
}