[BUG] Line chart renders incorrectly with fixed scales and data points that fall outside of the specified range

[DanCunnington]

Current Behavior

If the scale is fixed, e.g:

yAxes: [{ticks: {
    min: 0,
    max: 25
}}];

data points that fall outside of this range cause a line to be drawn outside of the chart (interactive example). This obstructs axes labels and the chart title.

I have also tried this without the angular wrapper and the same behaviour occurs.

Expected Behavior

Ensure lines cannot be drawn beyond the chart area, so that the title and axes labels are not obstructed.

Environment

• Chart.js version: 2.3.0
• Angular Chart.js 1.0.3
• Browser name and version: Chrome Version 54.0.2840.71 (64-bit)

[etimberg]

This is the same issue as #2873

For some context, we initially had clipping to make this work nicely, but it caused problems with points getting cut off. We need to find a more advanced way of doing this and filtering out the points to not draw.

One challenge is what the behaviour should be with lines to points outside the chart area. Should we simply cut the line or find the intersection point with the edge of the chart area and draw the line to there.

[DanCunnington]

Thanks @etimberg - i'll check out the zoom plugin. It would be useful to have this out the box, but I guess you want to keep the main library as lightweight as possible. I noticed you added the 2.5 milestone - I'll re visit when this is released.

[etimberg]

Sounds good. The zoom plugin does have the original clipping (the one we removed due to other problems).

We are very close to releasing 2.4 and I hope to get the clipping implemented better for 2.5 :)