Chartjs-How to highlight stack bar in ChartJS with onclick

Yes what you can do is in the onClick as second argument you get an array with all the active elements. So what you can do is loop over each dataset in your chart and see if the index matches one of the list with active elements.

If this is the case you give it a borderWidth of 1, else you put it to 0. After you did this you call chart variable.update();

To make this work you need to remove the hoverBorderWidth of all datasets and give all datasets a borderColor of yellow

Use attribute borderColor with an array and borderWith with and object.

datasets: [
        {
            label: 'Bad Style',
            data: dataPack1,
            backgroundColor: "#512DA8",
            borderColor: [
              'rgb(243, 255, 51)',
              'rgb(81,45,168)',
              'rgb(243, 255, 51)',
              'rgb(81,45,168)',
              'rgb(81,45,168)',
              'rgb(81,45,168)',
              'rgb(81,45,168)',
            ],
            borderWidth: {
               top: 0,
               right: 4,
               bottom: 0,
               left: 4
            },
        },

rgb(243, 255, 51) is yellow color.

To change the color, try this:

var borderColor =  [
   'rgb(81,45,168)',
   'rgb(81,45,168)',
   'rgb(81,45,168)',
   'rgb(81,45,168)',
   'rgb(81,45,168)',
   'rgb(81,45,168)',
   'rgb(81,45,168)',
];
var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: {
        labels: dates,
        datasets: [
        {
            label: 'Bad Style',
            data: dataPack1,
            backgroundColor: "#512DA8",
            hoverBackgroundColor: "#7E57C2",
            hoverBorderWidth: 0,
            borderColor: borderColor,
            borderWidth: '4',
        },
        {
            label: 'Warning',
            data: dataPack2,
            backgroundColor: "#FFA000",
            hoverBackgroundColor: "#FFCA28",
            hoverBorderWidth: 0,
            borderColor: borderColor,
            borderWidth: '4',
        },
        {
            label: 'Error',
            data: dataPack3,
            backgroundColor: "#D32F2F",
            hoverBackgroundColor: "#EF5350",
            hoverBorderWidth: 0,
            borderColor: borderColor,
            borderWidth: '4',
        },
        ]
    },
    options: {
            onClick: function(e){
               var element = this.getElementAtEvent(e);
               borderColor[element[0]._index] = 'rgb(244,140,4)';
               this.update();
        },
            animation: {
               duration: 10,
        },
        tooltips: {
          mode: 'label',
          callbacks: {
          label: function(tooltipItem, data) { 
            return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
          }
          }
         },
        scales: {
          xAxes: [{ 
            stacked: true, 
            gridLines: { display: false },
            }],
          yAxes: [{ 
            stacked: true, 
            ticks: {
                    callback: function(value) { return numberWithCommas(value); },
                    }, 
            }],
        }, // scales
        legend: {display: true}
    } // options
   }
);