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,
}
Related
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
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 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
}
}
},
We have a StockChart and it has a zoom below the graph. Well, just look at the jsfiddle
http://tinyurl.com/lfvyx5n
I want it all except the bottom zoom bar and the zoom 1m 1year, etc. etc. and that date range selector. These are on by default but how can I turn it off.
My other option was to convert to HighChart.Chart which then is not doing dates anymore :( :(. I am just looking for a real quick option.
thanks,
Dean
You have to disable navigator to remove the bottom bar and to disable rangeSelector to remove the zoom button :
$('#container').highcharts('StockChart', {
...
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
}
...
});
Here a JsFiddle : http://jsfiddle.net/CgAnW/
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