[Chartjs]-ChartJs Stacked bar chart border and legend not working

by

2👍

✅

For border radius, as written in the doc https://www.chartjs.org/docs/latest/charts/bar.html#borderradius, for stacked bar if the border radius is provided as number it will be applied to the bars that are at the edges of the stack.

Therefore you should set the border radius by object (pay attention to borderSkipped option as well), as following (using your sample):

datasets: [
  {
    data: [30],
    label: '88000 SGD',
    backgroundColor: 'red', //'#EDFFFA',
    borderWidth: 1,
    borderColor: '#EDFFFA',
    borderSkipped: 'end',
    borderRadius: {topLeft: 15, bottomLeft: 15},
  },
  {
    data: [30],
    label: '240,000 SGD',
    backgroundColor: '#06A6A6',
    borderWidth: 1,
    borderColor: '#06A6A6',
    borderSkipped: 'start',
    borderRadius: {topRight: 15, bottomRight: 15},
  },
],

For legend, you cannot have as showed in the picture out of the box. Probably you need a plugin.

Leave a comment