[BUG] Not correct view of graphs

[RoundArh]

Expected Behavior

Current Behavior

We made a values for graph and add min and max values
Area chart don't cut values and show over the category scales. Please follow the link to view issue

Possible Solution

Steps to Reproduce (for bugs)

Context

Environment

https://jsfiddle.net/RoundArh/Lkpaz9b6/2/

[etimberg]

Closing as duplicate of #2873.

We initially had this clipping implemented but it caused a lot of problems with points that fall right at the edge. The simplest and most performant clipping method is to simply do a rectangle that is the chart area.

The 'best' solution would be to project all the points on the edges onto the rectangle and clip along an arbitrary path. Unfortunately, this is painful. IE has no support for https://developer.mozilla.org/en-US/docs/Web/API/Path2D which means we can't even build the path once and then just reclip later, we'd need to build the path each time we render (every animation frame) and this is going to cause problems.

If you're okay with the clipping of points at the edges then adding the following plugin will work just fine.

Chart.plugins.register({
  beforeDatasetsDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    var chartArea = chartInstance.chartArea;
    ctx.save();
    ctx.beginPath();
    ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
    ctx.clip();
  },
  afterDatasetsDraw: function(chartInstance) {
    chartInstance.chart.ctx.restore();
  },
});