Chartjs-Chart.js scatter plot fill portions of chart based on value

by

0👍

Answer:

this solved my problem.

plugins: [{
            beforeRender: function (x, options) {
                var c = x.chart
                var dataset = x.data.datasets[0];
                var yScale = x.scales['primary'];
                var yPos = yScale.getPixelForValue(0);

                var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
                gradientFill.addColorStop(0, 'green');
                gradientFill.addColorStop(yPos / c.height - 0.01, 'green');
                gradientFill.addColorStop(yPos / c.height + 0.01, 'red');
                gradientFill.addColorStop(1, 'red');

                var model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
                model.backgroundColor = gradientFill;
            }
        }],

Leave a comment