Fill gap between stacked bars in chart.js

Question

I'm currently using chart.js with Vue 2 and I'm facing a problem when using border-radius with stacked bars. I want to have a border-top radius but when doing that I get a "gap" between the border that was created and the bar above.

Is there any option that can fill that empty space?

Current behaviour

Expected behaviour

These are the current options I'm using for the graph.

options: {
      responsive: true,
      lineTension: 1,
      plugins: {
        legend: {
          position: 'bottom',
          // prevent filtering using labels
          'onClick' : function (evt, item, legend) {
            return;
          },
          labels: {
            usePointStyle: 'circle',
          },
        }
      },
      elements: {
        bar: {
          borderRadius: {
            topLeft: 4.6,
            topRight: 4.6,
          },
        }
      },
      scales: {
        y: {
          stacked: true,
          ticks: {
            maxTicksLimit: 6,
            callback: function(value, index, ticks) {
              return value + ' min';
            }
          },

        },
        x: {
          stacked: true,
          grid: {
            color: "rgba(0, 0, 0, 0)",
          }
        }
      }
    }

user_2057925 · Answer

What you need it is not configurable by any options. Nevertheless you can use a plugin to change the base of the bar to draw, taking care of the border radius.

EDIT: I have found a specific option in bar element, base, which should address the use case.

See snippet:

const ctx = document.getElementById("myChart");
// not used but leave it
const plugin = {
  id: 'fillGaps',
  beforeDatasetDraw(chart, args) {
    if (args.index > 0) {
      args.meta.data.forEach(function(item){
        const pre = item.base;
        item.base += 12;
      });
    }
  },
};
//
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'user 1 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'rgba(40, 139, 170, 1)',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        },
        {
            label: 'user 2 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'orange',
            borderWidth: 0,
            borderSkipped: 'start',
            base: 0
        }]
    },
    options: {
      elements: {
        bar: {
          borderRadius: {
            topLeft: 12,
            topRight: 12,
            bottomLeft: 12, 
            bottomRight: 12
          },
        }
      },
      scales: {
        y: {
          stacked: true,
        },
        x: {
          stacked: true,
        }
      }
    }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

Fill gap between stacked bars in chart.js

1 Answers