score:1
Accepted answer
You can:
a) Set min
property for an x-axis in a navigator:
navigator: {
xAxis: {
min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
},
// adaptToUpdatedData: false,
...
}
Live example: https://stackblitz.com/edit/js-m38td3?file=index.js
API Reference: https://api.highcharts.com/highstock/navigator.xAxis
b) Enable rangeSelector.allButtonsEnabled
property and use afterBtnClick
Highcharts event. The event afterSetExtremes
is not called if the extremes are the same as the current one (they are because of initial min and max restriction).
chart: {
zoomType: 'x',
events: {
load: function() {
Highcharts.addEvent(
this.rangeSelector,
'afterBtnClick',
function() {
const button = this.buttonOptions[this.selected];
const chart = this.chart;
afterSetExtremes({
target: {
chart
},
min: chart.xAxis[0].dataMax - button._range,
max: chart.xAxis[0].dataMax
});
});
}
}
}
Live demo: https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js,index.js,index.html
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Source: stackoverflow.com
Related Query
- Enable all range selector's options in stock highcharts
- Angular Highcharts - How to enable noData options and update it dynamically
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
- HighCharts Stock Chart error code 18
- How to enable marker on hover only for a range of points in highcharts
- Parsing ALL Highcharts Options from JSON
- Highcharts stock control range when rangeSelector hidden
- Why code of Horizonal line(y-axis) on a single in Highcharts get applied to all other charts integrated with Webdatarocks
- Highcharts - getting all values scrollable after setting min-max range
- Showing all values on one point on x axis and changing range for rCharts highcharts
- Display all labels in x-axis in HighCharts Stock
- How to create a column range chart in Highcharts using range and navigator functions?
- Proper way to remove all series data from a highcharts chart?
- Highcharts Series - want to show/hide all EXCEPT selected series (reversal of default logic)
- Highcharts jQuery rendering problem - all browsers
- How to make highcharts scrollable horizontally when having big range in x-axis
- How can i hide all the Series in highcharts at a time
- Highcharts / jQuery - destroy and rebuild chart with original options
- Disable PDF and SVG download options in Highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Highcharts how to change x axis options
- Always showing tooltip on all columns in Highcharts
- How to enable Highcharts scrollbar?
- Highcharts - change background color along specific date range
- Highcharts - Highlight / Shade date range
- Enable or disable data labels shown in pie charts in Highcharts on click of a button
- Hide all but selected data series, HighCharts
- Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)
- Highcharts column range change color for negative numbers
- Set x-axis range in highcharts
More Query from same tag
- Hight Chart Polar Scatter Plot values on chart and x-axis
- How to change the width of "yAxis label" in HighChart?
- How to embed a Highcharts chart to jekyll blog post?
- Dynamically setting xAxis rotation in high charts API
- High charts displays data only if we press F12 (developer tool) in chrome browser
- In highstock 1.3.0, when zooming in full, the graph draws all messed up
- Unknown Text Shadow (Highcharts)
- Need legends in high chart to be square shape
- Highcharts word cloud - Make a link to each word
- Select Point Programmatically (e.g. from TableView Cell or Button)
- How do you set up an array to hold '0's for empty locations so graphs(Highcharts) can format them correctly?
- Highcharts (highstock) anyway to detect maximum value in a series
- Extracting chart coordinates from touch events for custom HighCharts interaction
- Check if all legend items are selected in highcharts?
- Highcharts gauge do not display
- Highchart changes chart width when user hides the graph lines
- Highcharts.js - Background color of axis only
- How can I hide and show a category in highcharts
- Highchart tooltip does not match series colour - Solid Gauge Chart
- Highchart export server prevent 0 value in the pdf
- highcharts column drilldown along with a table
- Highcharts xAxis text matching series name
- unequal intervals on gauge Highcharts (or other libraries)
- How can I convert datetime from Flask to Highcharts
- Highcharts, change line type if more than one series on the chart
- Inefficient functions - how to assign colour to datapoints in Highchart
- "adaptToUpdatedData: false" in highcharts don`t works if I put series in chart with "addSeries"
- adding more data in highchart
- Highcharts graph not filling Bootstrap box
- Reduce space between column in Highcharts