Friday, 14 September 2018

Highlight last clicked bar in ChartJS

I am trying to change the opacity of the last clicked bar in ChartJS, and for it then to be 'unhighlighted' the next time another bar is clicked. Basically the default behaviour for hover. Please note this is a stacked bar chart, and I wish for the entire bar columns opacity to change, not each individual section.

I have got as far as being able to change the background colour (not sure how to change the opacity) to black on click, but it does not unset when the next item is clicked. So the entire chart ends up being black once everything has been clicked on.

This is the onclick code I am currently using:

            var myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                onClick: function(e){
                    myChart.update();
                    var element = this.getElementAtEvent(event)[0];
                    element.custom = element.custom || {};
                    element.custom.backgroundColor = '#000';
                    },
                }
            });

Stacked data :

            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]
                            }
                        ]
                    };

Any help will be greatly appreciatted!



from Highlight last clicked bar in ChartJS

No comments:

Post a Comment