Reputation: 203
I would like to know whether a specific node can be highlighted on Click similar to states in hover(linkOpacity) and to replace it with it's previous colour when some another node/series is clicked.
In short, when the chart is loaded, the top node would be highlighted initially, and when the user clicks on another node, that particular selected node gets highlighted (and the initially highlighted node would get back to its normal colour).
Please find below a similar JSFiddle which highlights specific series on click (which is being done by adding class with the help of JavaScript).
events: {
click: function (event) {
event.target.classList.add('additionalClass');
}
}
Is there any feature in Highcharts which makes this possible without any DOM manipulation done by the end user?
Upvotes: 5
Views: 2096
Reputation: 7276
You can simply remove the additionalClass
from the previous element and then put in on the clicked element:
events: {
click: function (event) {
let old_HL = document.querySelector('#container .highcharts-link.highcharts-point.additionalClass');
if (old_HL) old_HL.classList.remove('additionalClass');
event.target.classList.add('additionalClass');
}
}
EDIT: a variant without DOM functions:
plotOptions: {
series: {
animation: false,
dataLabels: {
enabled: true,
nodeFormat: "{point.name}mm"
},
allowPointSelect: true,//you need this to allow selection
colorByPoint: false,
point: {
events: {
select: function(event) {
if (typeof this.isNode !== 'undefined') return;//to disable selecting the root node
this.custom_old_color = this.color;//save old color
this.update({
color: 'red'
});
},
unselect: function(event) {
if (typeof this.isNode !== 'undefined') return;
this.update({
color: this.custom_old_color//restore old color
});
}
}
}
}
Upvotes: 2
Reputation: 5826
You can simply update the point's color on click
event:
point: {
events: {
click: function(event) {
this.update({
color: 'red'
});
}
}
}
Live working example: http://jsfiddle.net/kkulig/dg2uf8d0/
API reference: https://api.highcharts.com/highcharts/plotOptions.sankey.point.events
Upvotes: 3