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: "Savings & Income distribution of 50 unmarried people in Texas",
                    horizontalAlign: "right"
                },
              
                data: [
                    {
                        type: "bubble",
                       
                          dataPoints:[
                         {x:34.1, y:10.56, z:306.77},
                        
                         {x:36.2, y:11.92, z:200.91},
                         {x:24.1, y:11.77, z:127.55},
                         {x:62.2, y:11.92, z:20.00},
                         
                      ]
                    }
                ]
            });
  

  
	chart.render();