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

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

by canvasjs

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"
                },
                axisX:{

                    title: "Income per Annum in USD",
                    valueFormatString:  "#,##0.##",
                    minimum: 5000,
                    maximum: 100000
                },
                axisY:{
                    title: "Savings per year",
                    valueFormatString:  "#,##0.##",
                    prefix : "$"
                },
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "left"

                },
                data: [
                    {
                        type: "scatter",
                        color: "#778899",
                        legendText: "Each triangle represents one person",
                        showInLegend: "true",
                        markerType: "triangle",
                        markerBorderColor: 'red',
                        markerBorderThickness: 1,
                        markerColor:"transparent",
                        dataPoints: [

                            { x: 10000, y: 1100, color:'transparent' },
                            { x: 11000, y: 1200 },
                            { x: 13000, y: 1250 },
                            { x: 15000, y: 1280 },
                            { x: 18000, y: 1600 },

                            { x: 20000, y: 2200 },
                            { x: 20700, y: 2200 },
                            { x: 21000, y: 2200 },
                            { x: 24500, y: 2200 },
                            { x: 26500, y: 2530 },
                            { x: 28500, y: 3040 },

                            { x: 30000, y: 4030 },
                            { x: 30400, y: 3040 },
                            { x: 30600, y: 4060 },
          ...