CODEWITHSUNDEEP
eventshighchartsclick
Janet
Janet

Reputation: 33

Change color of series onclick events across multiple highcharts

I'm looking to change the column color and the line color for the same series across multiple charts based on the click of either the legend or the actual column/line.

On the individual charts I have color changing based on clicking/hovering and I can show hide based on the clicking of the first legend. I just can't seem to get the color to work. I'd like to convert the show hide functionality into color change.

Fiddle: http://jsfiddle.net/jlm578/asdgqzgk/4/

This is the chunk of code I'd like to convert or replace:

events: {
    legendItemClick: function (event) {
        var visibility = this.visible ? 'visible' : 'hidden';
        var series = $('#veiOverallAllLine').highcharts().series[this.index];
        if (this.visible) series.hide();
        else series.show();
        return true;
        //return false;
    }
}

Upvotes: 2

Views: 1654

Answers (1)

MorKadosh
MorKadosh

Reputation: 6006

I hope that I understood your question properly :) Anyway, you can "convert" the event into color change by first preventing the default action to be executed (which is obviously hiding the chart).

This could be done easily using event.preventDefault() within the event itself.

Than you can use a general function to handle the color change, which takes the series as parameter, find its 'sibling' and than changes the colors:

function updateColor(series){
    if(series == undefined) return;
    var color = series.color == '#ffffff' ? '#851E20' : '#ffffff';
    var sibling = $('#veiOverallAllLine').highcharts().series[series.index];
    series.update({color:color});
    sibling.update({color:color});
}

(More generalization could be done here but its up to you..)

Than, the whole plotOptions should look like that more or less:

            plotOptions: {

                series: {
                    allowPointSelect: true,
                    states: {
                        select: {
                            color: '#851E20'
                        }
                    },
                    events: {
                        click: function(){
                            updateColor(this);
                        },

                        legendItemClick: function (event) {
                            event.preventDefault();
                            updateColor(this);
                            return true;
                        }
                    }

                }
            },

Here you can see an example: http://jsfiddle.net/a366e89c/2/ NOTE! in the example only the upper chart changes the color of both charts, you just need to copy the lines into the second chart...

Upvotes: 1

Related Questions