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

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

missing_gridline

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:

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 33 (15 by maintainers)

Most upvoted comments

@zibous you test case does not produce any issues. For future, please use jsfiddle, codepen or equivalent for the test cases, where we can edit the code. Also the test cases are supposed to be minimal reproductions of the issue, so anything not related should be removed.

@kurkle

It happens only when scales "type": "time" all other charts works perfect.

Testcase 1:

Bildschirmfoto 2021-04-26 um 08 28 57

https://codepen.io/kurkle/pen/wvgzOYW

Edit CSS

.chart {
  background-color: #333;
  width: 40%;
}
#chart{
  padding: 30px
}

Resize the browser window --> sometimes missing gridlines.

Testcase2:

Bildschirmfoto 2021-04-26 um 08 19 34

<!doctype html>
<html>

<head>
    <title>LINE Chart</title>
    <meta charset="utf-8">
    <script src="https://chartjs.org/dist/master/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>

<body>
    <div id="container" class="center">
        <div class="chard-card">
            <div class="chard-description">
                <h1>Testcase with simple data</h1>
            </div>
            <canvas id="canvas"></canvas>
        </div>
    </div>

    <script>
        var config = {
            "type": "bar",
            "data": {
                "datasets": [{
                        "label": "Verbrauch",                        
                        "pointRadius": 0,
                        "backgroundColor": "#FF8066",
                        "data": [{
                                "x": 1617055200000,
                                "localedate": "2021-03-30",
                                "y": -128.12
                            },
                            {
                                "x": 1617141600000,
                                "localedate": "2021-03-31",
                                "y": -160.55
                            },
                            {
                                "x": 1617228000000,
                                "localedate": "2021-04-01",
                                "y": -153.49
                            },
                            {
                                "x": 1617314400000,
                                "localedate": "2021-04-02",
                                "y": -142.32
                            },
                            {
                                "x": 1617400800000,
                                "localedate": "2021-04-03",
                                "y": -189.55
                            },
                            {
                                "x": 1617487200000,
                                "localedate": "2021-04-04",
                                "y": -75.08
                            }
                        ]
                    },
                    {
                        "label": "Energieproduktion",
                        "unit": "kWh",
                        "backgroundColor": "#fcec34",
                        "data": [{
                                "x": 1617055200000,
                                "localedate": "2021-03-30",
                                "y": 99.891
                            },
                            {
                                "x": 1617141600000,
                                "localedate": "2021-03-31",
                                "y": 94.916
                            },
                            {
                                "x": 1617228000000,
                                "localedate": "2021-04-01",
                                "y": 106.155
                            },
                            {
                                "x": 1617314400000,
                                "localedate": "2021-04-02",
                                "y": 99.444
                            },
                            {
                                "x": 1617400800000,
                                "localedate": "2021-04-03",
                                "y": 73.143
                            },
                            {
                                "x": 1617487200000,
                                "localedate": "2021-04-04",
                                "y": 92.939
                            }
                        ]
                    }
                ],
                "labels": []
            },
            "options": {
                "units": "",
                "hoverOffset": 8,
                "layout": {},
                "interaction": {
                    "mode": "nearest",
                    "intersect": false
                },
                "elements": {},
                "spanGaps": true,
                "plugins": {
                    "title": {},
                    "tooltip": {
                        "callbacks": {}
                    },
                    "legend": {
                        "display": true,
                        "position": "top"
                    }
                },
                "animation": {},
                "onResize": null,
                "scales": {
                    "x": {
                        "axis": "x",
                        "type": "time",
                        "time": {
                            "unit": "day",
                            "displayFormats": {
                            },
                            "parser": false,
                            "round": false,
                            "isoWeekday": false,
                            "minUnit": "millisecond"
                        },
                        "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": "rgb(225, 225, 225)"
                        },
                        "alignToPixels": true,
                        "stacked": true,
                        "offset": true,
                        "title": {
                            "display": true,
                            "text": "Zeitraum",
                            "padding": {
                                "top": 4,
                                "bottom": 4
                            },
                            "color": "rgb(225, 225, 225)"
                        },
                        "grid": {
                            "offset": true,
                            "display": true,
                            "drawBorder": true,
                            "drawOnChartArea": true,
                            "drawTicks": true,
                            "tickLength": 8,
                            "borderDash": [1, 1],
                            "borderDashOffset": 0,
                            "borderColor": "rgb(2, 136, 209)",
                            "borderWidth": 0.88,
                            "color": "rgba(179, 229, 252, 0.8)"
                        },
                        "bounds": "data",
                        "adapters": {},
                        "display": true,
                        "reverse": false,
                        "beginAtZero": false,
                        "grace": 0,
                        "id": "x",
                        "position": "bottom"
                    },
                    "y": {
                        "axis": "y",
                        "alignToPixels": true,
                        "stacked": true,
                        "title": {
                            "display": true,
                            "text": "Energie kWh",
                            "padding": {
                                "top": 4,
                                "bottom": 4
                            },
                            "color": "rgb(225, 225, 225)"
                        },
                        "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": "rgb(225, 225, 225)"
                        },
                        "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": "rgb(2, 136, 209)",
                            "borderWidth": 0.88,
                            "color": "rgba(179, 229, 252, 0.8)"
                        },
                        "id": "y",
                        "position": "left"
                    }
                }
            }
        }
        window.onload = function () {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };
    </script>
</body>

</html>

zibous on Apr 26, 2021