How can I highlight selected label in HIghcharts Timeline? - highcharts

Question

I have data like this:
Js fiddle
Highcharts.chart('container', {
chart: {
zoomType: 'x',
type: 'timeline'
},
xAxis: {
type: 'datetime',
visible: false
},
yAxis: {
gridLineWidth: 1,
title: null,
labels: {
enabled: false
}
},
legend: {
enabled: false
},
title: {
text: 'Timeline of Space Exploration'
},
subtitle: {
text: 'Info source: www.wikipedia.org'
},
tooltip: {
style: {
width: 300
}
},
series: [{
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'{point.x:%d %b %Y}</span><br/>{point.label}'
},
marker: {
symbol: 'circle'
},
data: [{
x: Date.UTC(1951, 5, 22),
name: 'First dogs in space',
label: '<div class="row">Granted chances = 38%<div class="col-sm-12">Interview = 24</div><div class="col-sm-12">Amendment = 24</div><div class="col-sm-12">Appeal = 24</div></div>',
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'</span><br/>{point.label}'
},
}, {
x: Date.UTC(1957, 9, 4),
name: 'First artificial satellite',
label: 'First artificial satellite',
}, {
x: Date.UTC(1959, 0, 4),
name: 'First artificial satellite to reach the Moon',
label: 'First artificial satellite to reach the Moon',
}, {
x: Date.UTC(1961, 3, 12),
name: 'First human spaceflight',
label: 'First human spaceflight',
}, {
x: Date.UTC(1966, 1, 3),
name: 'First soft landing on the Moon',
label: 'First soft landing on the Moon',
}, {
x: Date.UTC(1969, 6, 20),
name: 'First human on the Moon',
label: 'First human on the Moon',
}, {
x: Date.UTC(1971, 3, 19),
name: 'First space station',
label: 'First space station',
}, {
x: Date.UTC(1971, 11, 2),
name: 'First soft Mars landing',
label: 'First soft Mars landing',
}, {
x: Date.UTC(1976, 3, 17),
name: 'Closest flyby of the Sun',
label: 'Closest flyby of the Sun',
}, {
x: Date.UTC(1978, 11, 4),
name: 'First orbital exploration of Venus',
label: 'First orbital exploration of Venus',
}, {
x: Date.UTC(1986, 1, 19),
name: 'First inhabited space station',
label: 'First inhabited space station',
}, {
x: Date.UTC(1989, 7, 8),
name: 'First astrometric satellite',
label: 'First astrometric satellite',
}, {
x: Date.UTC(1998, 10, 20),
name: 'First multinational space station',
label: 'First multinational space station',
}]
}]
});
Now I want to highlight the selected label Ex:
When I click on the first index which is 3 Feb 1996. The color of label gonna change and after the first index all gonna faded.
Like this:
And all other indexes after 3 Feb gonna fade or invisible Can you help me out from this?
I have tried below code in dataLabels as well as plotOption but it does not work for me.
allowPointSelect: true,
states: {
select: {
color: null,
borderWidth:5,
label:'Blue'
}
},

Answer 1

You can use point.events.click function to change a dataLabel color and remove points with a bigger index than the clicked one:
series: [{
point: {
events: {
click: function() {
var points = this.series.points;
for (var i = points.length - 1; i >= 0; i--) {
if (i !== this.index) {
points[i].remove(false);
} else {
i = -1;
}
}
this.series.chart.redraw();
this.dataLabel.attr({
fill: 'blue'
});
}
}
},
...
}]
Live demo: https://jsfiddle.net/BlackLabel/6ctuga0L/
API Reference:
https://api.highcharts.com/highcharts/series.timeline.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Point#remove