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/
Related
Here is the Stackblitz Demo of the issue
Preview link (for better visibility): https://highcharts-angular-stock-a1hvg5.stackblitz.io/
Issue is : The last plot that is visible on the right most edge of the chart is of 12/27/2021
This is wrong as the the series data is available till 12/30/2021 and that should be visible on the right most edge instead of 12/27/2021. It however works when we zoom in slider to 1 year period
How can I make the original chart also display data till 12/30/2021 (series maximum)?
This behaviour is caused by the data-gropuing feature. You can disable the feature:
"plotOptions": {
"area": {
...,
dataGrouping: {
enabled: false
}
}
}
or control anchor behaviour:
"plotOptions": {
"area": {
...,
dataGrouping: {
anchor: 'end',
lastAnchor: 'end'
}
}
}
Live demo: https://stackblitz.com/edit/highcharts-angular-stock-mpcl1d
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping
Docs: https://www.highcharts.com/docs/stock/data-grouping
I've highlighted the content to be removed from displaying in my chart
You are looking for legend.enabled. Just add this to your chart:
legend: {
enabled: false
}
See example.
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
}
}
},
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,
}