Chart v3.0.0-rc.6: Missing Gridline right side....

[zibous]

Expected Behavior

The last gridline is not drawn on the right for all charts. Can I correct this through settings or is it a mistake?

Current Behavior

Possible Solution

???

Steps to Reproduce

see: http://www.ipscon.com/test/testcase1.html

Environment

• Chart.js version: v3.0.0-rc.6
• Browser name and version: any...
• Link to your project:

[LeeLenaleee]

Seems like a bugg that came in 3.0.0-rc, before that it was working fine (https://jsfiddle.net/Leelenaleee/mcpwfrxa/3/)

[kurkle]

@LeeLenaleee your fiddle does not reproduce this (fork with the version info: https://jsfiddle.net/nptLua4h/)

The padding is only reduced:

[kurkle]

Probably related to autoSkip:

[zibous]

Missing also on the top (horizontal bar)

[etimberg]

Perhaps this is related to how the right axis padding is computer? I guess we need to add 0.5 * lineWidth for the last vertical gridline

[zibous]

Perhaps this is related to how the right axis padding is computer? I guess we need to add 0.5 * lineWidth for the last vertical gridline

Negativ, do not work

{
    "top": 12,
    "right": 12,
    "bottom": 12,
    "left": 12
}
gridlineWidth: 0.8

{
    "top": 12,
    "right": 48,
    "bottom": 12,
    "left": 12
}
gridlineWidth: 0.8

[etimberg]

Sorry, I should have been clearer. The axis itself has some padding in it, but right now it's only computed for the labels https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L699-L700

[kurkle]

@zibous can you try if #8748 would work for you?

[zibous]

Looks like that this fix do not work or do have do change something ??

Before Fix:

After Fix:

{
    "type": "bar",
    "data": {
        "datasets": [
            {
                "label": "Energieproduktion",
                "unit": "kWh",
                "minval": 0,
                "maxval": 0,
                "sumval": 0,
                "avgval": 0,
                "pointRadius": 0,
                "current": "57.0",
                "last_changed": "2021-03-30T05:33:03.175810+00:00",
                "mode": "history",
                "backgroundColor": "#fcec34",
                "data": [
                    {
                        "x": 1616824800000,
                        "y": 0.274
                    },
                    {
                        "x": 1616828400000,
                        "y": 0.266
                    },
                    {
                        "x": 1616832000000,
                        "y": 0.372
                    },
                    {
                        "x": 1616835600000,
                        "y": 0.72
                    },
                    {
                        "x": 1616839200000,
                        "y": 0.765
                    },
                    {
                        "x": 1616842800000,
                        "y": 0.892
                    },
                    {
                        "x": 1616846400000,
                        "y": 0.604
                    },
                    {
                        "x": 1616850000000,
                        "y": 0.993
                    },
                    {
                        "x": 1616853600000,
                        "y": 0.858
                    },
                    {
                        "x": 1616857200000,
                        "y": 0.417
                    },
                    {
                        "x": 1616860800000,
                        "y": 0.1
                    },
                    {
                        "x": 1616907600000,
                        "y": 0.129
                    },
                    {
                        "x": 1616911200000,
                        "y": 0.288
                    },
                    {
                        "x": 1616914800000,
                        "y": 1.356
                    },
                    {
                        "x": 1616918400000,
                        "y": 2.617
                    },
                    {
                        "x": 1616922000000,
                        "y": 2.927
                    },
                    {
                        "x": 1616925600000,
                        "y": 2.458
                    },
                    {
                        "x": 1616929200000,
                        "y": 2.73
                    },
                    {
                        "x": 1616932800000,
                        "y": 2.046
                    },
                    {
                        "x": 1616936400000,
                        "y": 1.479
                    },
                    {
                        "x": 1616940000000,
                        "y": 1.343
                    },
                    {
                        "x": 1616943600000,
                        "y": 0.204
                    },
                    {
                        "x": 1616947200000,
                        "y": 0.117
                    },
                    {
                        "x": 1616994000000,
                        "y": 0.099
                    },
                    {
                        "x": 1616997600000,
                        "y": 0.203
                    },
                    {
                        "x": 1617001200000,
                        "y": 0.283
                    },
                    {
                        "x": 1617004800000,
                        "y": 2.796
                    },
                    {
                        "x": 1617008400000,
                        "y": 2.69
                    },
                    {
                        "x": 1617012000000,
                        "y": 2.336
                    },
                    {
                        "x": 1617015600000,
                        "y": 2.583
                    },
                    {
                        "x": 1617019200000,
                        "y": 2.043
                    },
                    {
                        "x": 1617022800000,
                        "y": 1.443
                    },
                    {
                        "x": 1617026400000,
                        "y": 1.283
                    },
                    {
                        "x": 1617030000000,
                        "y": 0.198
                    },
                    {
                        "x": 1617033600000,
                        "y": 0.096
                    },
                    {
                        "x": 1617080400000,
                        "y": 0.057
                    }
                ]
            }
        ],
        "labels": []
    },
    "options": {
        "units": "",
        "hoverOffset": 8,
        "layout": {},
        "chartArea": {
            "backgroundColor": "transparent"
        },
        "hover": {
            "mode": "nearest",
            "intersect": true
        },
        "elements": {},
        "spanGaps": true,
        "plugins": {
            "title": {},
            "tooltip": {},
            "legend": {
                "display": false
            }
        },
        "animation": {},
        "onResize": null,
        "scales": {
            "x": {
                "axis": "x",
                "type": "time",
                "time": {
                    "unit": "hour",
                    "displayFormats": {
                        "day": "d.MM.yyyy",
                        "hour": "HH:mm",
                        "datetime": "MMM d, yyyy, h:mm:ss aaaa",
                        "millisecond": "h:mm:ss.SSS aaaa",
                        "second": "h:mm:ss aaaa",
                        "minute": "h:mm aaaa",
                        "week": "PP",
                        "month": "MMM yyyy",
                        "quarter": "qqq - yyyy",
                        "year": "yyyy"
                    },
                    "tooltipFormat": "d.MM.yyyy hh:mm",
                    "parser": false,
                    "round": false,
                    "isoWeekday": false,
                    "minUnit": "millisecond"
                },
                "alignToPixels": true,
                "stacked": true,
                "offset": true,
                "grid": {
                    "offset": true,
                    "display": true,
                    "drawBorder": true,
                    "drawOnChartArea": true,
                    "drawTicks": true,
                    "tickLength": 8,
                    "borderDash": [
                        1,
                        1
                    ],
                    "borderDashOffset": 0,
                    "borderColor": "#0288d1",
                    "borderWidth": 0.8800000000000001,
                    "color": "#b3e5fC"
                },
                "bounds": "data",
                "adapters": {},
                "ticks": {
                    "source": "auto",
                    "major": {
                        "enabled": false
                    },
                    "minRotation": 0,
                    "maxRotation": 50,
                    "mirror": false,
                    "textStrokeWidth": 0,
                    "textStrokeColor": "",
                    "padding": 3,
                    "display": true,
                    "autoSkip": true,
                    "autoSkipPadding": 3,
                    "labelOffset": 0,
                    "minor": {},
                    "align": "center",
                    "crossAlign": "near",
                    "color": "#e1e1e1"
                },
                "display": true,
                "reverse": false,
                "beginAtZero": false,
                "grace": 0,
                "title": {
                    "display": false,
                    "text": "",
                    "padding": {
                        "top": 4,
                        "bottom": 4
                    },
                    "color": "#e1e1e1"
                },
                "id": "x",
                "position": "bottom"
            },
            "y": {
                "axis": "y",
                "stacked": true,
                "type": "linear",
                "beginAtZero": true,
                "ticks": {
                    "minRotation": 0,
                    "maxRotation": 50,
                    "mirror": false,
                    "textStrokeWidth": 0,
                    "textStrokeColor": "",
                    "padding": 3,
                    "display": true,
                    "autoSkip": true,
                    "autoSkipPadding": 3,
                    "labelOffset": 0,
                    "minor": {},
                    "major": {},
                    "align": "center",
                    "crossAlign": "near",
                    "color": "#e1e1e1"
                },
                "display": true,
                "offset": false,
                "reverse": false,
                "bounds": "ticks",
                "grace": 0,
                "grid": {
                    "display": true,
                    "drawBorder": true,
                    "drawOnChartArea": true,
                    "drawTicks": true,
                    "tickLength": 8,
                    "offset": false,
                    "borderDash": [
                        1,
                        1
                    ],
                    "borderDashOffset": 0,
                    "borderColor": "#0288d1",
                    "borderWidth": 0.8800000000000001,
                    "color": "#b3e5fC"
                },
                "title": {
                    "display": false,
                    "text": "",
                    "padding": {
                        "top": 4,
                        "bottom": 4
                    },
                    "color": "#e1e1e1"
                },
                "alignToPixels": true,
                "id": "y",
                "position": "left"
            }
        }
    }
}

[kurkle]

alignToPixels: true makes the border go outside sometimes. Works if its false: https://codepen.io/kurkle/pen/wvgzOYW

Just a note, looks like you are using borderWidth to tune the colors, you should be using the alpha channel instead (used in that pen).