Give radius to bars in bar graph

Question

Apply border radius to the bars of Bar_Chart using react-chartjs-2 module so please suggest changes in this code only. i tried radius in data component but it didn't work .

import { Bar } from 'react-chartjs-2';

<Bar 
        data={{
          labels :['2020-10-26', '2020-10-27', '2020-10-28', '2020-10-29'],
          
          
          datasets: [
            {
              label: 'r',
              data: [130,220,310,420],
              backgroundColor: 'rgb(255, 144, 18)',
             
              
            },
            {
              label: 'm',
              data: [100,200,149,330],
              backgroundColor: '#66CCFF',
              
            },
            {
              label: 'u',
              data: [90,150,30,240],
              backgroundColor: '#00FF99',
              
            },
          ],
        }}
        options={{
          responsive: true,
          cornerRadius:19,
          // plugins: {
          legend: {
            cursor: "pointer",
            display:true,
            position:'bottom',
            labels: {
              usePointStyle: true,
              boxWidth:10,
              }
            },
            
            
          // },
          scales: {
            xAxes: [{
              gridLines: {
                  display:false
              }
          }]}
        }} 
        
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }} 
      />

Want my bars to be round from above like this only visuals are example not code

https://codepen.io/jordanwillis/pen/jBoppb

Answer 1

You have to apply borderRadius parameter in datasets as per below code

datasets: [
            {
              label: 'r',
              data: [130,220,310,420],
              backgroundColor: 'rgb(255, 144, 18)',
              borderRadius : 50  // You can apply any value as per your requirement
              
            },
            {
              label: 'm',
              data: [100,200,149,330],
              backgroundColor: '#66CCFF',
              borderRadius : 50 
            },
            {
              label: 'u',
              data: [90,150,30,240],
              backgroundColor: '#00FF99',
              borderRadius : 50 
            }]