Range chart with different fill colors

With amCharts 4 you can create a range chart and fill parts of it based on the values in the range. In this example, the parts where open value is higher than the close value are filled with one color, and when close is higher than open another color is used.

by amcharts

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.legend = new am4charts.Legend();

chart.data = [{ date: 1577743200000, open: 122, close: 104 },
{ date: 1577829600000, open: 121, close: 70 },
{ date: 1577916000000, open: 101, close: 55 },
{ date: 1578002400000, open: 103, close: 45 },
{ date: 1578088800000, open: 153, close: 85 },
{ date: 1578175200000, open: 150, close: 116 },
{ date: 1578261600000, open: 135, close: 153 },
{ date: 1578348000000, open: 98, close: 152 },
{ date: 1578434400000, open: 101, close: 192 },
{ date: 1578520800000, open: 110, close: 225 },
{ date: 1578607200000, open: 157, close: 233 },
{ date: 1578693600000, open: 128, close: 232 },
{ date: 1578780000000, open: 101, close: 235 },
{ date: 1578866400000, open: 109, close: 200 },
{ date: 1578952800000, open: 142, close: 214 },
{ date: 1579039200000, open: 123, close: 224 },
{ date: 1579125600000, open: 99, close: 176 },
{ date: 1579212000000, open: 100, close: 172 },
{ date: 1579298400000, open: 67, close: 138 },
{ date: 1579384800000, open: 81, close: 127 },
{ date: 1579471200000, open: 39, close: 137 },
{ date: 1579557600000, open: 73, close: 127 },
{ date: 1579644000000, open: 78, close: 154 },
{ date: 1579730400000, open: 116, close: 127 },
{ date: 1579816800000, open: 136, close: 78 },
{ date: 1579903200000, open: 139, close: 61 },
{ date: 1579989600000, open: 162, close: 13 },
{ date: 1580076000000, open: 201, close: 41 },
{ date: 1580162400000, open: 221, close: 72 },
{ date: 1580248800000, open: 257, close: 87 },
{ date: 1580335200000, open: 211, close: 114 },
{ date: 1580421600000, open: 233, close: 138 },
{ date:...