Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Issue Analytics

State:
Created 2 years ago
Comments:32 (15 by maintainers)

Top GitHub Comments

1reaction

zibouscommented, Apr 26, 2021

@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>

0reactions

jxlarreacommented, Apr 26, 2021

@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.

@jxlarrea how would you want it to function “properly” in your use case? Some ways it could work:

skip the “21:00” and add “21:xx” on the edge

keep the “21:00” and add another line without label at the edge

add another label and let them overlap

@kurkle I’d expect it to work as it did in version 2.x - the rightmost border was always displayed in the previous major version without any tinkering.

I actually figured out a workaround:

ticks: {
  autoSkip: true,
  maxTicksLimit: 8,
  maxRotation: 0,
  minRotation: 0,
  font: {
    family: 'Roboto'
  },
  callback: function (value, index, values) {
    if (index === 0 || index % 4 === 0 || index === values.length - 1) {
      const label = this.getLabelForValue(value);
      return label;
    } else {
      return null;
    }
  }
}

The callback function ensures that the first (index === 0) and last ticks (index === values.length - 1) are always displayed. Forcing the last tick to display is the key to have the rightmost border show up. After some trial and error, I found that for my particular use case displaying every 4 ticks in between by using (index % 4 === 0) gives me a consistent interval between ticks displayed.

This is the result:

685E5A5D-9439-4BEE-9782-9BFA429E5DFF (2)