The rightmost data point gets cut off for line chart

[LeoUrushi]

Expected Behavior

Line chart will be displayed in full from the first (left) to last (rightmost) data point.

Current Behavior

The data point to the far right gets cropped off.
But the tooltip is displayed fine.

Steps to Reproduce (for bugs)

This is a working example of this bug:
https://codepen.io/LeoU/pen/gVLybO

Context

I made a basic line chart using Chart.js version 2.8.0

Environment

• Chart.js version: 2.8.0
• Browser name and version: Chrome on Mac: 75.0.3770.142

I've seen elsewhere that zoom plug-in has a known issue where dots get cropped off. But I am not using zoom or any other plug-in.

[LeoUrushi]

I fixed this by adding padding value to the right hand side of the chart. I played around with the exact number and 4 looked about right for my chart. But I’d imagine the right number will depend on the size of your pointRadius and other variables you have. This is what it looks like for me with the changes.

options: {
        layout: {
            padding: {
                left: 0,
                right: 4,
                top: 0,
                bottom: 0
            }
        }
    }

Also posted the answer here:

https://stackoverflow.com/questions/57240818/chart-js-the-rightmost-data-point-cut-off-for-line-chart

[etimberg]

Still in v3 https://codepen.io/etimberg/pen/vYKxEPB

[bartocc]

I am using 3.8 and I still see this issue. Worse, the layout.padding.right option does not fix it anymore. It only shifts the point in the canvas, but the point is still half visible

[stockiNail]

I have updated the codepen of @etimberg for version 3.8.0.

https://codepen.io/stockinail/pen/zYWNQEZ

And it seems working.

Can you provide a codepen to do additional tests?

[kurkle]

I am using 3.8 and I still see this issue. Worse, the layout.padding.right option does not fix it anymore. It only shifts the point in the canvas, but the point is still half visible

This happens when you have max defined for x-axis. You can disable the clipping by clip: false in options.

[bartocc]

I am exactly in the use case @kurkle mentions, we have max defined for the x-axis! I am going to try this clip: false option and see how it behaves. Thx for the tip

[bartocc]

Here's a codepen reproducing the problem with scales.x.max set (on line 157 in the JS)

https://codepen.io/bartocc/pen/ZExearv

[bartocc]

And here's the codepen with clip: false, indeed fixing the issue (on line 164 in the JS)

https://codepen.io/bartocc/pen/bGvqvpd

Looks like clip is not documented in the Typescript types provided by Chart.js@3 though…