Как построить такой линейный график?

Question

[Alexey]

Столкнулся с такой задачей:
Необходимо построить линейный график с вертикальной линией которая показывает границу. Левая часть должна быть закрашена в красный цвет, правая в зеленый соответственно.

Начал искать примеры в библиотеках, а примеров то и нет... Сделал подобие на D3. Но я смог отрисовать только график и вертикальную линию, а закрасить и отобразить легенду у меня не получается.
Подскажите как создать такого вида график?
Есть ли уже существующие решения для имплементации?
Мой код в котором не закрашены области и нет легенды.
https://plnkr.co/edit/9tnP6l15dqmCaOAK8Ojm?p=preview

Данный код будет использоваться в связке с Angular 6.*
Признателен за ответы!

Answer 1

[Alexey]

https://plnkr.co/edit/FcJsjAnwrFxHXJrlTHQC?p=preview