Chartjs-Chart.js intersection not working without zero value on Y

by

0👍

✅

I sat down a bit on your problem and found out that you had a problem setting the height according to the Y-axis. Use this code and you will see that it works in any situation. I made changes on zeroPointY, yScale and on Y value of context.arc function.

Chart.plugins.register({
            afterDatasetsDraw: function (chartInstance, easing) {

                var Y = chartInstance.scales['y-axis-0'];
                var X = chartInstance.scales['x-axis-0'];

                zeroPointY = (Y.bottom - Y.top)/(Y.ticks.length-1);
                zeroPointX = Y.right;

                yScale = (Y.end - Y.start)/ (Y.ticks.length - 1);
                xScale = (X.right - X.left) / (X.ticks.length - 1);

                console.log("aaa1", Y.top, Y.bottom, Y.ticks.length, Y.zeroLineIndex, zeroPointY);
                console.log("aaa2", Y.bottom, Y.top, Y.end, Y.start, yScale);

                var intersects = findIntersects(ORDER_STATS['Source'], ORDER_STATS['Moving average LONG']);
                var context = chartInstance.chart.ctx;

                intersects.forEach(function (result1, idx) {
                    context.fillStyle = 'red';
                    context.beginPath();
                    context.arc((result1.x * xScale) + zeroPointX, Y.top + (Y.end - result1.y)/yScale*zeroPointY, 3, 0, Math.PI * 2, true);
                    context.fill();
                });
            }
        });

Leave a comment