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

[ChaseLewis]

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.

[etimberg]

This works for the line chart because there is a tick mark right at the end. In the bar chart, the labels are shifted into the center and there is no line at the end. Should be a relatively easy fix to draw one more line in that case. This case is when scale.options.gridLines.offsetGridLines == true

[ChaseLewis]

It does add the gridline, but that solution won't work since it breaks into the padding of the graph. It also doesn't line up very well. I could write my own plugin to just draw a line there if the type is 'bar' but i'd think there would be a way to put a border there without breaking into the padding.

Modified Config

    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: {
                        offsetGridLines: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Fake',
                        fontStyle: 'bold',
                        fontSize: 16
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Fake',
                        fontStyle: 'bold',
                        fontSize: 16
                    }
                }]

            }
        }
    };

[etimberg]

The lines to draw get added here

What probably needs to happen is that the category axis only (https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.category.js) needs to draw one extra line after the base class implementation has finished.

An alternative solution is that we generally draw a border around the chart area and do that separately from the axes

[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();
        }
    }
});

[etimberg]

I think options.chartArea.border is a fine name for it. I agree that the default of undefined is also good. For now, the options could simply be stroke width and color. We can always add more later.

I'm happy to look at a PR for this. 😄

[brrn]

Has there been any movement on this? I'm creating a line graph with offset data and offset labels on my yAxes, but the bottom border will not display.

'yAxes' => [
    [
	'type' => 'category',
    	'labels' => ['A', 'B', 'C', 'D'],
        'gridLines' => [
            'drawTicks' => false,
        	'offsetGridLines' => true,
        	'color' => $xGridColor,
        ],
        'offset' => true,
        'ticks' => [
            'fontSize' => 15,
            'padding' => 15,
        ],
    ],
],

If I remove the 'offsetGridLines' and 'offset' properties the bottom border displays fine.

[etimberg]

@brrn there hasn't been any progress on this unfortunately. If you want to take a look at fixing it, the relevant code would be in core.scale.js

Perhaps you could look into #4117/ It's old and in need of rebasing but it makes the gridline drawing much easier to understand

[coreymunn3]

Any idea as to what the fix might be in 3.x? I'm currently running 3.7 and running into the exact same issue. Docs don't seem to mention chart area border as a setting anywhere.

I've seen some stackoverflows that mention chartAreaBorder as a plugin but autocomplete and other docs suggest that is not the case.

[kurkle]

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