[Possible Bug] Bar Chart doesn't display right border

I’m building a bunch of charts for my project and I just noticed an oddity in vertical bar graphs I am not seeing in line charts. The bar charts don’t display the right border. I have tried placing ‘drawBorder: true’ in both Axes but nothing has changed. Is this a bug or am I missing something in the documentation?

Below is my config for the graph

    var config = {
        type: 'bar',
        data: {
            labels: xdata,
            datasets: [{
                label: 'Fake',
                data: supply,
                borderColor: primary,
                backgroundColor: primary
            }]
        },
        options:
        {
            title: {
                display: true,
                text: "Fake",
                fontSize: 22,
                fontStyle: 'bold',
                fontColor: '#000000'
            },
            legend: {
                display: false,
                position: 'right'
            },
            layout: {
                padding: { left: 10, right: 80, bottom: 10, top: 10 }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        drawBorder: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Fake',
                        fontStyle: 'bold',
                        fontSize: 16
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0
                    },
                    gridLines: {
                        drawBorder: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Fake',
                        fontStyle: 'bold',
                        fontSize: 16
                    }
                }]

            }
        }
    };

Notice the line chart with no settings altered for the borders works fine

In fact the bar chart in the documentation has the same issue.

[ChaseLewis]

I got ya, I haven’t messed much with multiple same dimension Axes charts so other than a different border property I’m not sure how people with that criteria would like to handle it. A separate border property that only draws if defined and it defaults to undefined makes the most sense to me, off the top of my head though I haven’t looked much into it.

Writing a modification for that would be simple enough if there was an agreed upon data setup (border I’d expect in the options.chartArea.border. I’d personally vote for separate border property that defaults to the same colors as the Axes. I’ll do a pull request and see what people think, as if it modified project code you’d need more feature options like rounding, strokeWidth, joins, etc. For now I’m just using the primary xAxes color so the left & right match with the plugin below to fix the issue.

Chart.plugins.register({
    beforeDraw: function (chart, easing) {
        var ctx = chart.chart.ctx;

        if (chart.config.type === 'bar')
        {
            //Save the rendering context state
            ctx.save();

            ctx.strokeStyle = chart.config.options.scales.xAxes[0].gridLines.color || Chart.defaults.bar.scales.xAxes[0].gridLines.color || "rgba(220,220,220,0.8)";
            ctx.lineWidth = chart.config.options.scales.xAxes[0].gridLines.lineWidth || Chart.defaults.bar.scales.xAxes[0].gridLines.lineWidth || 2;

            ctx.beginPath();
            ctx.moveTo(chart.chartArea.right, chart.chartArea.top);
            ctx.lineTo(chart.chartArea.right, chart.chartArea.bottom);
            ctx.stroke();

            //Restore the rendering context state
            ctx.restore();
        }
    }
});

[kurkle]

https://www.chartjs.org/docs/3.7.0/samples/plugins/chart-area-border.html