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
- Highcharts - how to display multiple graphs on one page using multiple xml files
- Add showLoading() in Highstock
- enable disable hover in highchart.stock
- Highstock Single Navigator for multiple Charts
- Range Selector in Are Graph of High Chart
- Highcharts - stacked columns by category
- How to display hovered point value in Highcharts Crosshair
- Why does my highchart only expand horizontally to fill its containing div, and not vertically?
- Highcharts datetime starting on wrong day
- Highcharts - equal spacing between X-axis values having tickPositioner
- how to use the total property in highcharts point
- Highcharts: Add point to chart, then remove, then add it again... then repeat
- Highcharts with data from sql database
- highcharts with mvc C# and sql
- HighChart bubble chart is not working
- HightChart graph lable cutoff issue
- Highcharts marker size change on/after hover
- Displaying dynamic data using charts and graphs in ruby on rails
- How To Load Plist Data On HighChart Using Objective C?
- Using HTML with Vue or how to adapt it to Vue.js
- Highcharts exporting.js change menu hover title text
- how do I edit/customize tooltip
- How to make highchart bubble chart color active of clicked bubble
- Integrate Highcharts with Angular5 without any 3rd Party library
- HighCharts Draggable Plotline with Logarithmic axis scale
- Json string without escape characters in highcharts
- Highchart Renderer By min and max
- Highcharts - Stacked column data series
- HighChart Line Graph value from database
- Plot Highchart multiple series line chart using JSON data