score:9
you can hide all particular svg navigator elements by hide() function.
$('#btn').toggle(function () {
chart.scroller.xaxis.labelgroup.hide();
chart.scroller.xaxis.gridgroup.hide();
chart.scroller.series.hide();
chart.scroller.scrollbar.hide();
chart.scroller.scrollbargroup.hide();
chart.scroller.navigatorgroup.hide();
$.each(chart.scroller.elementstodestroy, function (i, elem) {
elem.hide();
})
}, function () {
chart.scroller.xaxis.labelgroup.show();
chart.scroller.xaxis.gridgroup.show();
chart.scroller.series.show();
chart.scroller.navigatorgroup.show();
chart.scroller.scrollbar.show();
chart.scroller.scrollbargroup.show();
$.each(chart.scroller.elementstodestroy, function (i, elem) {
elem.show();
})
});
score:4
it seems as if it is the easiest way to update the navigator.enabled option:
chart.update({navigator: { enabled: false }})
score:5
sebastian's answer is almost there, but it doesn't actually resize the chart itself, which i think is a requirement in this case because otherwise the navigator's space is completely wasted (not to mention the large blank space looks weird).
here's a much simpler solution: add a "clipping" div with overflow: hidden
, and then increase the height of the chart container sufficiently to push the navigator out so it gets hidden.
demo
http://jsfiddle.net/vickychijwani/z4kgsfnp/
$(function () {
var delta = 0;
$.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// create the chart
var chart = $('#container').highcharts('stockchart', {
chart: {
events: {
load: function () {
// this is always constant after the chart is loaded
delta = this.scroller.navigatorgroup.getbbox().height + 30;
}
}
},
rangeselector: {
selected: 1
},
title: {
text: 'aapl stock price'
},
series: [{
name: 'aapl',
data: data,
tooltip: {
valuedecimals: 2
}
}]
}, function (chart) {
$('#show-hide-nav-btn').click(function () {
// to hide the navigator, increase chart height; the excess will be clipped by the outer clip div because its css is set to overflow: hidden
var chartheight = $('.highcharts-container').height();
$('#container').height(chartheight + delta);
$('.highcharts-container').height(chartheight + delta);
// manually reflow
chart.reflow();
// negate delta for the next click
delta = -delta;
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<button id="show-hide-nav-btn">show / hide navigator</button>
<!-- this div clips the container so the navigator can be hidden from view -->
<div id="clip" style="height: 500px; overflow: hidden;">
<div id="container" style="height: 500px; min-width: 500px"></div>
</div>
Source: stackoverflow.com
Related Query
- Is it possible to hide the navigator in highcharts at runtime?
- Is it possible to hide the line & symbol next to Highcharts legend items?
- Is it possible to set Highcharts to hide tooltip when the mouse pointer is 30px away
- Highcharts (highstock) - hide all markers in the navigator
- It is possible to make the preview/ slider/ navigator in Highcharts to match the graph?
- HighCharts Hide Series Name from the Legend
- HighCharts : Is it possible to customize the colors of individual series?
- How to hide labels in the highcharts in the pie
- Is it possible to position Highcharts dataLabels depending on the value?
- How can i hide all the Series in highcharts at a time
- Possible to connect the zoom on two Highcharts graphs?
- Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
- Highcharts (Highstock) how to manually set the navigator selected range
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- Highcharts visualizes chart data incorrectly after zooming or using the navigator
- How Can I Hide a Pie Chart's Slice in HighCharts Without Removing It From the Legend?
- how to display 2 same highcharts without duplicate the code
- Is to possible to delay the needle loading animation in Highcharts angular gauge?
- Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?
- Hide or Disable Legend or Label in the end Highcharts line
- Highcharts - is possible to have stackLabels only for a subset of the series?
- Hide the zero values in a Scatter/Column chart in highcharts
- Highcharts - Is it possible to customize the bars in column range type?
- How do I completely hide the chart title in a HighCharts chart?
- Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
- Strange character in the Highstock source code
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- In a Highcharts heatmap is it possible for a data point to be ignored for the color scale?
- Highcharts - Possible to change the text zoom to other wording?
- highcharts hide the chart except the legend
More Query from same tag
- Highcharts: X and Y Axis cross at zero in scatter chart
- Labels string from Asp.net does not distributed in the highchart
- How to redraw text rendered using SVGRenderer in Highcharts React?
- Python Flask: Highcharts path allocation
- HighMaps Zoom add bright instead of do zoom properly
- HighCharts - Make the pie chart 100% of the div
- Angular 4 - how to use data from Http Post Response to .js file or highchart?
- Highcharts hide categories that don't fit
- how to use high chart when number of lines are dynamic
- Problems with updating c# variables in javascript?
- Hide the zero values in a Scatter/Column chart in highcharts
- color yaxis in parallelplot in R-highcharter
- Callouts CSS implementation for highcharts not working
- Highcharts text labels for y-axis
- Highligligh particular areas based on X-axis data
- highgraphs chart not rendering
- Highcharts oncahnge event It works on the first try but not on the second try
- Chrome Dev Editor Using Bower and Highcharts Shim
- Highchart Array From Ajax
- Highcharts datalabel formatter for export server
- Update Highchart data form exported button
- Highcharts Network Graph (Forced Directed Graph) in ReactJs
- Solid Gauge Highcharts data Spreadsheets
- Highchart data labels appear in middle if xAxis ticks
- HighCharts Heatmap with motion
- How can I use chart tooltip formatter in react-highcharts?
- How to efficiently remove all series from highchart/highstock and then add many more
- Highcharts is formating x axis text values as dates
- Highchart show grid lines on y-axis for every point
- Yii vs Highcharts vs Ajax