My issue is as following:
I've created a custom tooltip with formatter callback function and had set useHTML attribute to be true.
The problem with useHTML is that it is not respecting z-indexing, and the result is that whenever i zoom in the chart (when the reset zoom button actually appears), the reset button's text gets covered by the tooltip's text.
tooltip: {
useHTML: true,
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br/>sdsdsddddddddddddssd</b>';
}
}
check this fiddle: http://jsfiddle.net/sahar_rehani/R5Ep4/
try zooming in and then get the tooltip closest to the reset zoom button :)
please help!!!
There's a hacky way to change Highcharts tooltip zIndex:
chart.tooltip.label.attr({zIndex: 300});
Try jsfiddle
Simply remove useHTML: true line and your problem is resolved!. I know it is not the perfect solution but will do the job. z-index issues are very common when you mix svg and html. I will follow up if i find a better solution. You don't need useHTML: true to do the formatting that you are doing.
tooltip: {
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br />sdsdsddddddddddddssd</b>';
}
},
jsfiddle
Related
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
I want to disable the use of navigator in highcharts but still show it as "full" small chart.
Is it possible?
Yes, you can hide them in callback: http://jsfiddle.net/nX37D/
But user still will have possibility to change extremes by using handles (even if they are invisible). To change that behavior, you will need to edit sources.
$('#container').highcharts('StockChart', options, function (chart) {
var handles = chart.scroller.handles;
setTimeout(function () {
handles[0].hide();
handles[1].hide();
}, 1);
});
Another way to hide them within the API is:
navigator: {
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
}
},
Fiddle here.
I want to hide the default exporting button. But I dont want to set each chart as
exporting: {
enabled:false
}
This will be too much work because I have lots of highcharts pages.
Any other way to do this?
Thanks.
You can modify the global Highcharts options :
Highcharts.setOptions ( {
exporting: {
enabled: false
}
} )
This piece of code just have to be included in each page you have a chart, You don't have to modify every chart to change this option.
Example
You can disable by disabling context buttons.
http://jsfiddle.net/sbochan/45kqw/
exporting:{
buttons:{
contextButton:{
enabled:false
}
}
},
I have a custom chart here
I have set label property as
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
},
align:'center',
x:150
}
I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.
what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.
Here is the way I found it.
Instead of using static values,
I used useHTML, and positioned labels by CSS styles.
labels: {
useHTML:true,
formatter: function() {
return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
}
}
Simple example here
I want to remove the parts of the highStock as shown in the picture.
They dont make sense in my data formatting .
Please help
Here you are: http://jsfiddle.net/cpvLzLso/
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
}
We are simply hiding all texts and buttons.
And user is able to change default chart interval by changing a selected parameter in rangeSelector settings group.
But you'd better use a Jugal's solution if you don't need to disable navigator bar.
UPD 1: Updated on 23/06/15 to meet today's realities. To all of you who downvoting this answer: try to disable a navigator in Jugal's answer and then pan a chart.
Highchart supports this out of the box by setting the enabled property of the rangeSelector to false as follows
rangeSelector:{
enabled:false
}
disabled RangeSelector # jsFiddle
If you want to remove the "From to" boxes you can do like this:
rangeSelector:{
inputEnabled: false,
}
If you want to remove every range selector you have to write that row:
rangeSelector:{
enabled: true,
}
And if you want to do the zoom buttons disabled, you have to write this
rangeSelector:{
allButtonsEnabled: true,
}