How make border radius for chart area chart.js I need to make a border radius of 16px for the chart area Maybe there is a plugin?

I am using chart.js V3.7 How make border radius for chart area chart.js I need to make a border radius of 16px for the chart area Maybe there is a plugin? I am using chart.js V3.7.

const ctx = document.getElementById('myChart').getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 0, 400)
    gradient.addColorStop(0, 'rgba(244, 192, 56, 0.3)')
    gradient.addColorStop(0.35, 'rgba(244, 192, 56, 0.3)')
    gradient.addColorStop(1, 'rgba(244, 192, 56, 0)');

const plugin = {
    id: 'background',
    beforeDraw: (chart, args, opts) => {
        if (!opts.color) {
            return;
        }

        const {
            ctx,
            chartArea
        } = chart;

        ctx.fillStyle = opts.color;
        ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height)
    }
};

Chart.register(plugin);

var config = {
    type: 'line',
    data: {
        labels: [['05.08', '2021'], ['06.08', '2021'], ['07.08', '2021'], ['08.08', '2021'], ['09.08', '2021'], ['10.08', '2021'], ['11.08', '2021'], ['12.08', '2021'], ['13.08', '2021'], ['14.08', '2021'], ['15.08', '2021']],
        datasets: [{
            data: [130, 260, 240, 270, 249,  310, 295, 330, 247, 280, 265, 265,],
            fill: true,
            backgroundColor: gradient,
            borderColor: [
                '#F4C038',
            ],
            borderWidth: 4,
            pointRadius: 6,
            pointBackgroundColor: '#272E3B',
            pointHoverBorderColor: '#fff',
            pointBorderWidth: 4,
            pointHoverBorderWidth: 4,
            
        }]
    },
    options: {
        responsive: true,
        tension: 0.25,
        plugins: {
            background: {
                color: '#272E3B'
            },
            legend: {
                display: false,
                labels: {
                    font: {
                        size: 14,
                        family: "Rubik"
                    }
                }
            }
        },
        scales: {
            y: {
                grid: {
                    color: '#3D4554',
                    borderColor: '#3D4554',
                    tickColor: 'transparent',
                },
                ticks: {
                    padding: 38,
                    callback: function(value) {
                        return '$'   value;
                    },
                    color: "rgba(255, 255, 255, 0.5)",
                    font: {
                        size: 16,
                        family: "Rubik",
                        weight: 300
                    },
                }
            },
            x: {
                
                grid: {
                    color: '#3D4554',
                    borderColor: '#3D4554',
                    tickColor: 'transparent',
                },
                ticks: {
                    padding: 16,
                    color: "rgba(255, 255, 255, 0.5)",
                    font: {
                        size: 14,
                        family: "Rubik",
                        weight: 300
                    },
                }
            }
        },
    }
};

new Chart(ctx, config);

CodePudding user response：

There is no plugin but you can write your own like so:

const plugin = {
  id: 'border',
  beforeDraw(chart, args, options) {
    const {
      ctx,
      chartArea: {
        left,
        top,
        width,
        height
      }
    } = chart;
    ctx.save();
    ctx.strokeStyle = options.color;
    ctx.lineWidth = options.width;
    ctx.setLineDash(options.dash || []);
    ctx.lineDashOffset = options.offset;
    ctx.strokeRect(left, top, width, height);
    ctx.restore();
  }
};

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      border: {
        color: 'red',
        width: 16
      }
    }
  },
  plugins: [plugin]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

CodePudding user response：

To add the border to the chart area in chart.js, we need to use the chartAreaBorder plugin

 const chartAreaBorder = {
        id: 'chartAreaBorder',
        beforeDraw(chart, args, options) {
          const {ctx, chartArea: {left, top, width, height}} = chart;
          ctx.save();
          ctx.strokeStyle = options.borderColor;
          ctx.lineWidth = options.borderWidth;
          ctx.setLineDash(options.borderDash || []);
          ctx.lineDashOffset = options.borderDashOffset;
          ctx.strokeRect(left, top, width, height);
          ctx.restore();
        }
    };

Paste the above piece of code before creating your chart and Then use the following code for creating your chart and border around it,

const ctx = document.getElementById('dynamic-chart').getContext('2d');
    const myChart = new Chart(ctx, {
            type: 'Your_Chart_Type_Here',
            data: {
            labels:Your_Data_Here,
            datasets: [{
                label: 'Your Data Here',
                data: 'Your_Data_Here,
                    backgroundColor: [
                       'rgba(255, 99, 132, 0.2)',
                       'rgba(54, 162, 235, 0.2)',
                       'rgba(255, 206, 86, 0.2)',
                       'rgba(75, 192, 192, 0.2)',
                       'rgba(153, 102, 255, 0.2)',
                       'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                       'rgba(255, 99, 132, 1)',
                       'rgba(54, 162, 235, 1)',
                       'rgba(255, 206, 86, 1)',
                       'rgba(75, 192, 192, 1)',
                       'rgba(153, 102, 255, 1)',
                       'rgba(255, 159, 64, 1)'
                   ],
                   borderWidth: 1
                }]
            },
            options: {
                plugins:{
                    chartAreaBorder:{
                        borderColor:'red',
                        borderWidth:2,
                        borderDash:[5,5],
                        borderDashOffset:2,
                    }
                }
            }
    },
        plugins:[chartAreaBorder]
    }); 

Result is as follow

This Code will give the border to chartArea. I hope this sorted out your problem.