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: synchronized charts no longer sync up once data are updated
- Highcharts Pie Chart Drilldown not showing on third drill
- Two different thresholds in HighCharts 3.0
- dynamically change label to show the y-axis min and max value
- Render charts based on type with AngularJS components
- Vuejs Component Communication
- R highcharts multiple stacked bar chart
- Highcharts duplicated code
- Controlling the the spacing between the series to avoid cluttering in Highcharts
- changing intervals in X and Y axis in high chart (line chart)
- Highcharts credits link not working when exporting as PDF
- How to render a line from dataLabels to marker on graph in HighCharts?
- Highchart not able to use javascript variables(arrays) in series data
- HighCharts, HighChartTable - pie chart default slice
- How to create chart with highchart in which bar doesn't start from 0 in y axis?
- how to create a responsive custom label in highchart
- Wordpress plugin : Yop Poll with pie chart
- Remove exporting button from HighChart Objective-C
- how to draw Highcharts by php
- how to add horizontal line over columns at different values
- Highcharts how to align two charts yAxis on the same line
- Download image from SVG with Jersey
- How to specify a start point on highcharts stacked bar charts
- How to show the column "Gender" to chart in Laravel from database?
- Highcharts Legend issue: I Wanted to make Legend 100% width and text center align it works fine in crome but it is not aligned center in firefox
- How to customize tooltip styling in for Scatter plot in Highchart?
- How to add HighCharts bundle to BundleConfig? MVC 3
- Is there no way to turn off animation in Highcharts for multiple real-time curves?
- Highcharts xrange styling
- How to convert datetime string to UTC to plot points on Highcharts