Chart datapoint interpolation/tension is funky

[jamesinc]

See this screenshot:

It seems like it's a known shortcoming of Chart.js's bezier function, but there are a couple of fixes written-up in the issue comments for charts where you have a known x-axis boundary (which as far as I've seen is always y=0 for adminMongo's charts).

https://github.com/chartjs/Chart.js/issues/424#issuecomment-51399997

[makseq]

capBezierPoints doesn't work :(

[PropelNZ]

Setting tension: 0 took much of the aesthetic out so I edited the non-minified version of Chart.js v2.9.4

Find at at line 2498: ctx.bezierCurveTo( flip ? previous.controlPointPreviousX : previous.controlPointNextX, flip ? previous.controlPointPreviousY : previous.controlPointNextY, flip ? target.controlPointNextX : target.controlPointPreviousX, flip ? target.controlPointNextY : target.controlPointPreviousY, target.x, target.y); Edit to: if (previous.y == target.y) { ctx.lineTo(target.x, target.y); } else { ctx.bezierCurveTo( flip ? previous.controlPointPreviousX : previous.controlPointNextX, flip ? previous.controlPointPreviousY : previous.controlPointNextY, flip ? target.controlPointNextX : target.controlPointPreviousX, flip ? target.controlPointNextY : target.controlPointPreviousY, target.x, target.y); }

Basically checks start and end points. If they are on the same y height, just draw a straight line.

Fixed my issue from this:

To this: