OHLC Chart with different color based on close-value - CanvasJS JavaScript Charts

OHLC Chart with different color based on close-value - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
                title:{
                    text: "Overlapping 1 Number Bubble",
                    horizontalAlign: "center"
                },
              
                data: [
                    {
                        type: "bubble",                       
                         dataPoints:[
                           {x:1, y:400, z:400},             
                           {x:2, y:130, z:130},
                           {x:3, y:170, z:170},                   
                           {x:1, y:400, z:400},
                           {x:2, y:200, z:200}, 
                           {x:3, y:300, z:300}, 
                      ]
                    }
                ]
            });
  

  
	chart.render();