Trying to Fade out all other Columns when a user selects one column

Question

I cannot figure out how to fade out all other columns when a user selects a specific column. I tried making a loop to go through the data, but it still didn't work.

Also, I need that once the user click on a column and then click on it again, all the columns will fade in again.

This code currently only highlights one bar.

Any suggestions?

$(function() {

    $('#container4').highcharts({
        chart: {
            type: 'column'
        },

        title: {
            text: ''
        },

        legend: {
            enabled: false
        },

        exporting: {
            enabled: false
        },

        credits: {
            enabled: false
        },

        xAxis: {
            gridLineColor: '',
            labels: {
                enabled: false
            }
        },

        yAxis: {
            title: {
                text: 'Fruit'
            },
            visible: false
        },

        credits: {
            enabled: false
        },

        plotOptions: {
            series: {
                allowPointSelect: true,
                states: {
                    select: {
                        color: 'blue',
                    }
                }
            },
            column: {
                stacking: 'normal',
            }
        },

        series: [{
            name: '',
            data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
            threshold: 0,
            color: '#E0E0E0 ',
            enableMouseTracking: false,
        }, {
            name: '',
            data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
            threshold: 0,
            color: 'green',
            negativeColor: 'red',
        }, ]
    });
});

Answer 1

You have not use the API, you can do it your own (If it does not conflict with other things).

$(function() {
    $('#container4').highcharts({
        chart: {
            type: 'column',
            events: {
                click: function(e) {
                    console.log(e);
                },
                selection: function(e) {
                    console.log(e);
                }
            }
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            gridLineColor: '',
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Fruit'
            },
            visible: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            /*series: {
                allowPointSelect: true,
                states: {
                    select: {
                        color: 'blue',
                    }
                }
            },*/
            column: {
                stacking: 'normal',
            }
        },
        series: [{
            name: '',
            data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
            threshold: 0,
            color: '#E0E0E0 ',
            enableMouseTracking: false,
        }, {
            name: '',
            data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
            threshold: 0,
            color: 'green',
            negativeColor: 'red',
        }, ]
    });
});

$(document).on('click', '.highcharts-tracker rect', function() {
    var elm = $(this);
    if (!elm.attr('class')) {
        $('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);

        elm.attr('class', 'active').css('opacity', 1);
    } else {
        $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
    }
});

.highcharts-series rect {
  transition:all .3s ease;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>

http://jsbin.com/jiluwimiyo