How make additional width to bar border after hower Chart js

Question

I tried use hoverBorderWidth and hoverBorderHeight but it makes border inside of the bar

↓

what it has to be

And i don`t have any clue how do it out of bar like this

↓

under bar

here what i have

↓

what it is

Also i need it make gradient, but this other question (will be a glad if u halp me ☺)

const ctx = document.getElementById('bar_chart').getContext('2d');
const myChart = new Chart(ctx, {

    type: 'bar',
    data: {

        labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
        datasets: [{
            label: false,
            data: [320, 80, 200, 530, 240, 170, 40],
            backgroundColor: [
                '#202126',
                '#202126',
                '#202126',
                '#202126',
                '#202126',
                '#202126'
            ],
            hoverBorderWidth: 10,
            hoverBorderHeight: 10,
            hoverBorderColor: '#434652',
        }]
    },
    options: {
        scales: {
            y: {
                grid: {
                    borderDash: [2, 2],
                    color: "#3a3c42"
                },
                min: 0,
                max: 600,
                ticks: {
                    stepSize: 200
                },
                beginAtZero: true
            },
            x: {
                grid: {
                    color: false,
                    tickColor: false
                }
            }
        },
        plugins: {
            legend: {display: false},
            tooltip: {callbacks: {footer: false}}
        }
    }
});

How make additional width to bar border after hower Chart js

0 Answers