In grafana, when we click in the chart and drag, we can select the time range to display.
The effect will be propagated to the whole dashboard, and every panel will be set to the specific time range.
Now we try to realize the same effect using React and Highcharts.
- The highchart's option to enable the function that we can drag to select time range is below.
{
chart: { zoomType: 'x' }
}- Get the selected timestamp to do custom logic
{
xAxis: {
events: {
afterSetExtremes: e => {
console.info(e.min, e.max); // use the start time and end time here.
}
}
}
}