Question

Okay, so I graphed a scatter plot in highcharts. I want to make it so when I hover over a series, all of the other series dim. I’ve tried changing the fillOpacity and the color properties of the markers and it doesn’t seem to work. This is what I currently have:

series:{ 
    events:{
    mouseOver: function(event){
    console.log("in");
    var series_to_keep = this;
    $.each(chart.series, function(seriesNo, serie){
        serie.hide();
    });
    this.show();
    this.select(true);
},
    mouseOut: function(event){
    console.log("out");
    console.log(this);
    $.each(chart.series, function(seriesNo, serie){
        if(!serie.visible){
            serie.show();
        }
    });
},}}
...

This currently hides the other series, but I don’t want to HIDE them. How do I just change the opacity of the markers of the other series on hover, then switch them back? I can’t find which properties need to be changed. I’ve missed with so many and none seem to work.

Answer 1

From this discussion, you can use something like this to adjust the color dynamically:

serie.color = "#FF00FF";
serie.graph.attr({ 
    stroke: '#FF00FF'
});
$.each(serie.data, function(i, point) {
    point.graphic.attr({
        fill: '#FF00FF'
    });
});
serie.redraw();