Steppedline: 'after' not drawn correctly when offsetgridlines is true

[plindman]

Expected Behavior

Drawing a main line with additional filled areas to provide context for the main line values.
The main data series point to appear at the middle of x-value area.
The filled areas are constant for each x value and step down at the end of each x-value.

Current Behavior

The step down of the filled area happens already at the middle of the x-value area.
Should be at the vertical
If you remove options.scales: {xAxes: [{gridLines: {offsetGridLines: true}}]}, the step down is drwan at the right position,
but the main data point is then drawn at the left edge of the x-area.

Possible Solution

Steps to Reproduce (for bugs)

https://jsbin.com/narakelemu/edit?html,js,output

Environment

• Chart.js version: 2.8.0 and 2.9.3
• Browser name and version: Chrome 79.0.3945.79, Firefox 71.0, Edge

[kurkle]

x-value area. There is not area for x-value. Its the grid lines that are drawn between values when offsetGridLines is true.
You can set steppedLine: 'middle' to try to get the behavior you want, but then there is a real bug present in the filling 🤦‍♂

[plindman]

Thank you @kurkle for having a look at this.

By x-value area, I meant the space between gridlines. Feel free to call it whatever you want.

Setting the steppedline: 'middle' is not an option for several reasons.

1. like you say, there is a bug rendering the bottom part of the fill (the steppedline setting seems to be ignored). This can easily be checked this using the jsbin link. Just change the two afters to middle.
   

2. the steppedline: 'after' should render to the gridline (it does so when offsetgridlines is false).
   It just doesn't make sense that to achieve a transition at the end/next gridline, you would either set offsetgridlines: false and steppedline: after or offsetgridlines: true and steppedline: middle.
   If the middle would render properly, one would still have to assume that this would at some point be fixed to be logical and consistent (after means after and not sometimes middle), and then such a hackish workaround using 'middle' will stop working.

[kurkle]

The boundary condition 'before', 'middle' or 'after' is referencing the Point, not the grid lines.
The line actually has no relation to the grid lines, only to the scale. Scale draws the grid lines.

[kurkle]

Closing as the actual bug found here has been fixed in master: https://jsbin.com/pokisiw/1/edit?html,js,output