So the idea is that for all days of a week I have fuel consumed and refilled fuel. I thought of it as a basic range column chart (canvas js) but color and width have to change when the bar goes below the horizontal axis.

I mean I want a graph like this

[![this is how the graph should look like](https://i.stack.imgur.com/ZqgKz.png)](https://i.stack.imgur.com/ZqgKz.png)

I tried this using the canvasjs library

```
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    animationEnabled: true,
    title: {
        text: "Brent Crude Oil Price - 2016"
    },
    axisY: {
        title: "Price(USD/bbl)",
        includeZero: false
    },
    data: [{
        color: "#98fb98",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [0, 38.99] },
            { x: new Date(2016, 1), y: [0, 37.00] },
            { x: new Date(2016, 2), y: [0, 42.54] },
            { x: new Date(2016, 3), y: [0, 48.50] },
            { x: new Date(2016, 4), y: [0, 50.51] },
            { x: new Date(2016, 5), y: [0, 52.86] },
            { x: new Date(2016, 6), y: [0, 50.75] },
            { x: new Date(2016, 7), y: [0, 51.22] },
            { x: new Date(2016, 8), y: [0, 50.14] },
            { x: new Date(2016, 9), y: [0, 53.73] },
            { x: new Date(2016, 10), y: [0, 50.49] },
            { x: new Date(2016, 11), y: [0, 57.89] }
        ]
    },
 {
        color: "#ffb6c1",
        type: "rangeColumn",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM YYYY",
        toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
        dataPoints: [       
            { x: new Date(2016, 0), y: [-27.10, 0] },
            { x: new Date(2016, 1), y: [-29.92, 0] },
            { x: new Date(2016, 2), y: [-35.95, 0] },
            { x: new Date(2016, 3), y: [-37.27, 0] },
            { x: new Date(2016, 4), y: [-43.33, 0] },
            { x: new Date(2016, 5), y: [-46.69, 0] },
            { x: new Date(2016, 6), y: [-41.80, 0] },
            { x: new Date(2016, 7), y: [-41.51, 0] },
            { x: new Date(2016, 8), y: [-45.09, 0] },
            { x: new Date(2016, 9), y: [-47.98, 0] },
            { x: new Date(2016, 10), y: [-43.57, 0] },
            { x: new Date(2016, 11), y: [-51.51, 0] }
        ]
    }          
          ]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

```

The graph I got is this:

[![The graph I was able to create](https://i.stack.imgur.com/7a0Rz.png)](https://i.stack.imgur.com/7a0Rz.png)

How to get the graph as in the 1st picture?