javascriptangularchart.jsng2-charts

chartJs Stacked bar chart border and legend not working

I required stacked bar chart as below:

enter image description here

my stackblitz link : stackblitz

In this reference code I want to archive left-end side part border radius.

Also legend show each block of the bar-chart and its position "top".

Solution

  • 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.