Chart.js линейный график, один набор данных, установите цвет линии на основе значения Y. Как же так?

---

У меня есть один набор данных для линейной диаграммы, и мне нужно условно раскрасить линию на основе значения Y, чтобы показать, превышены ли пороговые значения (как сверху, так и снизу). И я не могу придумать правильный подход, чтобы сделать это, и я начинаю думать, что это может быть невозможно без сложного алгоритма. Я тоже не могу найти никаких плагинов.

Что я уже пробовал:

1) Первый подход заключается в том, что я создал расширение для линейного графика, подобное этому:

Chart.defaults.multicolorLine = Chart.defaults.line;
            Chart.controllers.multicolorLine = Chart.controllers.line.extend({
                draw: function (ease) {
                    const
                        meta = this.getMeta(),
                        points = meta.data || [],
                        colorss = this.getDataset().colorss,
                        area = this.chart.chartArea,
                        originalDatasets = meta.dataset._children
                            .filter(function (data) {
                                return !isNaN(data._view.y);
                            });

                    function _setColor(newColor, meta) {
                        meta.dataset._view.borderColor = newColor;
                    }

                    for (let i = 0; i < meta.dataset._children.length; i++) {
                        const slicer = i + 2;
                        if (meta.dataset._chart.config.data.datasets[0].data[i].y < 5) {
                            _setColor('yellow', meta);
                        } else {
                            _setColor('red', meta);
                        }
                        meta.dataset._children = originalDatasets.slice(i, slicer);
                        meta.dataset.draw();
                        meta.dataset._children = originalDatasets;
                    }

                    points.forEach(function (point) {
                        point.draw(area);
                    });
                },
            });  

и в целом он вроде как делает то, что должен, но проблема с этим подходом заключается в том, что он связан с точкой диаграммы, и часто изменение должно быть между точками, поэтому на той части линии, где у меня нет измерения для значения Y, оно должно быть изменено. Поэтому я отказался от этой идеи и попробовал другую.


2) Этот подход основан на создании отдельного набора данных для каждого измененного цвета на линии, поэтому я просто повторяю набор данных, и если порог изменяется, то я создаю другой набор данных, например:
[-3,-2,-1,0,1,2,3]
пороговое значение должно быть между [-1,1]
поэтому я создаю 3 набора данных:
[-3,-2], [-1,0,1], [2,3]

и я прикрепляю правильный цвет к каждому набору данных. Проблема такого подхода заключается в том, что диаграмма пуста между измеряемыми точками. Ось X-это дата-время, и давайте предположим, что -2-это 04/05/2020, а -1-05/05/2020, тогда между 04/05/2020 и 05/05/2020 есть пустое пространство. И даже если бы существовала возможность искусственно аппроксимировать недостающую линию, снова возникла бы та же проблема, аппроксимированная линия должна была бы быть на 50% зеленой и на 50% красной, что является всего лишь предположением о том, где должно быть пересечение граничного условия.

Мой вопрос заключается в том, должен ли я просто отказаться от диаграммы.Js и использовать что-то другое? Если да, то какая библиотека предоставляет такую функциональность предпочтительно из коробки? И если это выполнимо, то каков будет правильный подход?

Приложение последний угловой приложение, которое получает данные от .объем основных API-интерфейса REST. Нам нужна поддержка современных браузеров.

---