Reputation: 125
By default, hover hides all other columns in all groups. How can I make it so that only the columns in that group are hidden on hover?
I found the hover event in the documentation, and getting the column (upper left), but how to hide it with it? Maybe through tooltip
somehow?
My question in original view.
An example of how it works now:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: 'Some text'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Title y'
}
},
/*tooltip: {
shared: true,
split: true,
},*/
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
},
events: {
mouseOut: function (){
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
},
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0,
events: {
mouseOver: function() {
console.log("1");
}
}
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
.actions, .chart {
margin: 15px auto;
width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>
Upvotes: 1
Views: 481
Reputation: 3703
To achieve that, at first you need to set the opacity
to 1
for inactive
series and disable hover
.
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
},
Then, use the mouseOver
and mouseOut
point events to find the points with the same category as the hovering one, and to update them with new opacity.
point: {
events: {
mouseOver: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
if (point.category === category) {
point.update({
opacity: 0.2
}, false)
}
})
})
chart.redraw()
},
mouseOut: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
point.update({
opacity: 1
}, false)
})
})
chart.redraw()
}
}
}
Demo: https://jsfiddle.net/BlackLabel/5Lcn6d8e/
API References: https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Point#update
Upvotes: 1