[Chartjs]-Highlight last clicked bar in ChartJS

by

4👍

✅

… but it does not unset when the next item is clicked.

You may use the active property in order to get the active group elements and use the current backgroundColor adding a 50% of transparency:

this.active.forEach(function(ele, idx) {
    ele.custom = ele.custom || {};
    if (ele.custom.backgroundColor == undefined) {
        var color = ele._model.backgroundColor.replace(')', ', 0.5)');
        ele.custom.backgroundColor = color;
    } else {
        delete ele.custom.backgroundColor;
    }
});

In order to reset last clicked element you can do that in your onClick handler looping on all elements:

for(i=0; i<this.data.datasets.length; i++) {
    this.getDatasetMeta(i).data.forEach(function(ele, idx) {
        if (ele.custom != undefined)
            delete ele.custom.backgroundColor;
    });
}

Chart.pluginService.register({
    afterInit: function (chart, options) {
        chart.pluginInitialized = true;
    },
    afterDraw: function (chart, options) {
        if (chart.pluginInitialized) {
            var centerIndex = Math.floor(chart.data.labels.length/2);
            for(var i=0; i<chart.data.datasets.length; i++) {
                chart.getDatasetMeta(i).data.forEach(function(ele, idx) {
                    var opacity = ' 0.3)';
                    if (idx == centerIndex) {
                        opacity = ' 1)';
                    }
                    ele.custom = ele.custom || {};
                    if (ele.custom.backgroundColor == undefined) {
                        var rgb = ele._model.backgroundColor;
                        var match = null;
                        if (match = rgb.match(/^#([a-fA-F0-9]{6})$/i)) {
                            rgb = 'rgb(';
                            match = match[1];
                            for (var j = 0; j < 3; j++) {
                                rgb += parseInt(match.slice(j * 2, j * 2 + 2), 16) + ',';
                            }
                            rgb += opacity;
                        }
                        ele.custom.backgroundColor = rgb;
                    }
                });
            }
            chart.pluginInitialized = false;
            chart.update(true);
        }
    }
});

var ctx = document.getElementById('ctx').getContext('2d');
var data = {
    "labels":["2011","2012","2013","2014","2015"],
    "datasets":[
        {
            "label":"Total Fishermen",
            "backgroundColor":"#518936",
            "data":[991,1020,731,850,851]
        },
        {
            "label":"Total Processing Employees",
            "backgroundColor":"#82c6d4",
            "data":[0,0,130,0,0]
        },
        {
            "label":"Total Aquaculture Employees",
            "backgroundColor":"#c0136b",
            "data":[0,134,130,119,0]
        }
    ]
};
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        onClick: function (e) {
            // remove old background opacity....
            for(i=0; i<this.data.datasets.length; i++) {
                this.getDatasetMeta(i).data.forEach(function(ele, idx) {
                    var rgx = /(rgba*\(\d{1,3}), *(\d{1,3}), *(\d{1,3}), *[0-9.]+(\))/;
                    ele._model.backgroundColor = ele._model.backgroundColor.replace(rgx, "$1, $2, $3$4");
                    if (ele.custom != undefined)
                        delete ele.custom.backgroundColor;
                });
            }
            // set backgrounf opacity....
            this.active.forEach(function(ele, idx) {
                ele.custom = ele.custom || {};
                if (ele.custom.backgroundColor == undefined) {
                    var color = ele._model.backgroundColor.replace(')', ', 0.5)');
                    ele.custom.backgroundColor = color;
                } else {
                    delete ele.custom.backgroundColor;
                }
            });
            myChart.update(true);
        }
    }
});
.graph {
    height: 500px;
    width: 500px;
    text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<div class="graph">
    <canvas id="ctx"></canvas>
</div>

Leave a comment