数据被过滤chartJs时如何保持圆角？

Question

I came up with this JSFiddle: https://www.jsfiddle.net/gcb1dyou which has rounded chartJs bar corners.Problem is when legend clicked to filter data,corners disappear like below

When I clicked orange label as you can see rounded border disappeared on the yellow bar.

var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
  lastVisible = findLast;
  if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
    lastVisible -= 1;
  }
}

} Here I tried to add another if to make lastVisible findLast-1 when data is hidden(legend clicked) and previous index is null but didn't work

else{
          if(this._chart.data.datasets[findLastTo - 1].data[this._index] == 0){
            lastVisible=findLastTo-2;
          }
        }

How can I solve this?Expecting to see your answers.

Answer 1

You already have check to apply rounded corners when not hidden (filtered). Just need to add condition to apply rounded corners when filtered assuming that zeros are not shown.

Something like this:

if (!this._chart.getDatasetMeta(findLast).hidden) {
    lastVisible = findLast;
    if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
        lastVisible -= 1;
    }
} else {
    if (this._chart.data.datasets[findLast].data[this._index] == 0) {
        lastVisible = findLast;
        lastVisible -= 1;
    }
}

Here is modified JSFiddle: https://jsfiddle.net/xopr36g5/

Answer 2

I fixed this problem by calculating the depth of dataset dynamically.Thanks for answers

 var lastVisible;
  var datasetsLength = this._chart.data.datasets.length;
  this._chart.data.datasets.map((e,index)=>{
    lastVisible=datasetsLength-1;
    //to find the depth of datasets and get non-zero value
    for(var i=lastVisible;i>0;i--){
    if(!this._chart.getDatasetMeta(i).hidden){
      if(this._chart.data.datasets[i].data[this._index] != 0){
        lastVisible = i;
        break;
      }
    }
    } 
  })