How create time line chat with selectable year dropdown - highcharts

Question

I want to create a time line chart with year,if we select year from dropdown then the has to display that particular year chart.once check above image

Answer 1

Here is a example with arrows, which lets you select time interval:
const options = {
chart: {
type: 'column',
panning: true,
events: {
load: function () {
const chart = this
const moveLeft = () => {
let {min, max, dataMin} = chart.xAxis[0].getExtremes()
if (min - 3 >= dataMin) {
min -= 3
max -= 3
}
chart.xAxis[0].setExtremes(min, max)
}
const moveRight = () => {
let {min, max, dataMax} = chart.xAxis[0].getExtremes()
if (max + 3 <= dataMax) {
min += 3
max += 3
}
chart.xAxis[0].setExtremes(min, max)
}
const leftArrowUrl = 'https://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-left3.svg'
const rightArrowUrl = 'http://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-right3.svg'
const leftArrow = chart.renderer.image(leftArrowUrl, 0, 150, 30, 30).attr({ zIndex: 10 })
const rightArrow = chart.renderer.image(rightArrowUrl, 600, 150, 30, 30).attr({ zIndex: 10 })
leftArrow.on('click', moveLeft).add()
rightArrow.on('click', moveRight).add()
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
max: 2
},
yAxis: {
title: {
text: '·'
}
},
series: [...Array(5)].map(() => {
return {
data: [...Array(12)].map(() => Math.round(Math.random() * 300))
};
})
}
const chart = Highcharts.chart('container', options)
https://jsfiddle.net/j59o5e6k/
Methods which you want to use are setExtremes and getExtremes:
http://api.highcharts.com/highcharts/Axis.getExtremes
http://api.highcharts.com/highcharts/Axis.setExtremes