我正在尝试将特定值下面的行着色为某种颜色。我使用的是Chart.js v3.7.1
我已经实现了this answer中的解决方案，并取得了部分成功...

let posColour= 'rgb(86,188,77)';
 let negColour= 'rgb(229,66,66)';
 let config = {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: tempData.sensorName,
                        data: data,
                        backgroundColor: 'rgba(60,141,188,0.9)',
                        borderColor: posColour,
                        pointRadius: false,
                        pointColor: '#3b8bba',
                        pointStrokeColor: posColour,
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: posColour,
                        segment: {
                            borderColor: (ctx2) => (ctx2.chart.data.datasets[0].data[ctx2.p0DataIndex] < 40 ? negColour : posColour)
                        }

                    }]
                }
                 /*  items below here are not necessary to reproduce the issue  */
                 ,
                options: {
                    reponsive: true,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                displayFormats: timeFormat,
                                format: 'day'
                            },
                            ticks: {
                                major: {
                                    enabled: true
                                },
                                maxTicksLimit: 15
                            },
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Temp (\u00b0C)'
                            }
                        }
                    }
                }
                 /*  items above here are not necessary to reproduce the issue  */
            }

我知道我可以做得非常simply with a fill，但倒置面积图的可见影响并不是我所追求的视觉效果。
我正在寻找类似this answer的东西，但我不能让最后两行工作（我对ChartJS不够熟悉）。

let posColour= 'rgb(86,188,77)';
let negColour= 'rgb(229,66,66)';

plugins: [{
  beforeRender: (x, options) => {
    const c = x.chartArea; //tweaked for chart.js3 
    const dataset = x.data.datasets[0];
    const yScale = x.scales.y; //tweaked for chart.js3
    const yPos = yScale.getPixelForValue(40); //I want everything under 40 red, not 0 as the original answer...

    const gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
    gradientFill.addColorStop(0, posColour);
    gradientFill.addColorStop(yPos / c.height, posColour);
    gradientFill.addColorStop(yPos / c.height, negColour);
    gradientFill.addColorStop(1, negColour);

    //these two lines are the ones i can't figure out how to convert to chart.js3...
    const model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
    model.borderColor = gradientFill;
  },
}];