Search code examples
javascripthtmlchartsbar-chartcanvasjs

canvasjs range column chart change bar color and width when it is below horizontal axis

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

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

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

Solution

  • You can use combination of Column and Range-Column Charts.

    var chart = new CanvasJS.Chart("chartContainer", {        
	data: [
	{
		color: "#98fb98",
		type: "column",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y}",
		dataPoints: [       
			{ x: new Date(2016, 0), y: 38.99 },
			{ x: new Date(2016, 1), y: 37.00 },
			{ x: new Date(2016, 2), y: 42.54 },
			{ x: new Date(2016, 3), y: 48.50 },
			{ x: new Date(2016, 4), y: 50.51 },
			{ x: new Date(2016, 5), y: 52.86 },
			{ x: new Date(2016, 6), y: 50.75 },
			{ x: new Date(2016, 7), y: 51.22 },
			{ x: new Date(2016, 8), y: 50.14 },
			{ x: new Date(2016, 9), y: 53.73 },
			{ x: new Date(2016, 10), y: 50.49 },
			{ x: new Date(2016, 11), y: 57.89 }
		]
	},
	{
		color: "#ffb6c1",
		type: "rangeColumn",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMM YYYY",
		toolTipContent: "{x}: {y[0]}",
		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 src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>