ChartJS: Заполните набор данных кривой выше максимального, между макс/мин и ниже минимального предела другим цветом. ⇐ Jquery

[Anonymous]

Rails 5, ChartKick 5.0.5 => ChartJS 4.4.1
У меня есть кривая линейная диаграмма в ChartJS, которая отображает около 0 по оси Y с отдельным максимальным порогом для положительных значений. и минимум для отрицательных значений (оба линейные). Я пытаюсь заполнить внутри кривой выше и ниже пороговых значений одним цветом, а между пороговыми значениями другого цвета внутри кривой.
У меня есть попробовал несколько разных способов применения заливки к нескольким наборам данных, чтобы добиться желаемого результата.
1: Я разбил набор данных кривой на три разных набора данных. Выше максимального порога, ниже максимального порога и между ними. Я подобрался близко, но не мог понять, как заставить заливку работать внутри кривой между мин/максом, когда кривая находилась за пределами пороговых значений. Кроме того, во всплывающей подсказке разбитая кривая отображалась в виде трех отдельных цветов линий.
2 (Код ниже, изображение результата): я попробовал один набор данных кривой, накладываясь сверху и снизу заливки. И хотя это действительно работает, цветовая палитра не совпадает с остальной частью моего приложения и другими диаграммами.

Код: Выделить всё

>! Ruby, using ChartKick interface

def chart_datasets
@chart_datasets ||=
[
{
name: station_name,
data: generate_chart_data(&:speed),
dataset: {
fill: {
target: 'origin',
below: 'rgba(0,204,102, 0.2)',
above: 'rgba(0,204,102, 0.2)'
}
}
},
{
name: 'Max',
data: generate_chart_data(max_limit),
dataset: {
fill: {
target: 0,
below: 'rgba(220,53,69, 0.6)',
above: 'rgba(255,255,255,0)'

}
}
},
{
name: 'Min',
data: generate_chart_data(min_limit),
dataset: {
fill: {
target: 0,
above: 'rgba(220,53,69, 0.6)',
below: 'rgba(255,255,255,0)'
}
}
}
]
end

Результаты № 2. Обратите внимание: я удалил третий порог, равный 0, из приведенного выше кода, но это результат. Мне нужно, чтобы коричневые области стали красными

• Я попробовал CoPilot, который упомянул, что у объекта заливки есть свойство «между» ChartJS, но мне не удалось найти никакой документации по этому свойству, и его пример кода никогда не работал.

Подробнее здесь: https://stackoverflow.com/questions/785 ... -and-below