как сделать border radius для chart area chart.js

как сделать border radius для chart area chart.js

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);

Ответы (0 шт):