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
}
}
},
Related
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
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.
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
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,
}