How to make rounded corners on both side of bars?

[lied_again]

We have the roundedBars plugin in QuickChart.js like this: options.plugins.roundedBars. I am working on a project that involves a horizontal bar graph with rounded corners on both sides. I am wondering how I can achieve that, as cornerRadius only increases the radius of one side of the bar.

[ian]

Hi @lied_again,

You can do this by setting allCorners: true on the roundedBars plugin:

    plugins: {
      roundedBars: {
        allCorners: true,
      },
    }

Here’s a full example in the chart editor.

{
  type: 'horizontalBar',
  data: {
    labels: [
      'Storage',
      'Furnishings',
      'Chairs',
      'Tables',
      'Binders',
      'Appliances',
      'Bookcases',
    ],
    datasets: [
      {
        label: 'Dataset 1',
        data: [70, 41, 31, 30, 33, 14, 9],
      },
    ],
  },
  options: {
    layout: {
      padding: {
        right: 40,
      },
    },
    legend: {
      display: false,
    },
    title: {
      display: true,
      text: 'Which subcategories had the highest sales?',
      fontStyle: 'bold',
      fontSize: 20,
    },
    scales: {
      xAxes: [
        {
          display: false,
        },
      ],
      yAxes: [
        {
          gridLines: {
            display: false,
          },
        },
      ],
    },
    plugins: {
      roundedBars: {
        allCorners: true,
      },
      datalabels: {
        display: true,
        align: 'end',
        anchor: 'end',
        color: '#00008B',
      },
    },
  },
}