Monochrome Candlestick Charts

Standard Candlestick charts, and original Candle charts, as candlesticks with no sticks (with no High and Low indicators, just Open and Close). For multiple chart apps, using a monochrome theme. Empty boxes have the closing price on top (for a positive upwards price variation), while plain boxes have the closing price at the bottom. There are no Alternative Colors for this template.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>
<div id="chart_div"></div>

JavaScript

$(function () {
		$("#chart_div").ejChart({
				series: [{
					type: 'candle', 
          bullFillColor: '#000000',
          bearFillColor: '#ffffff',
          border: { width: 2, color: "#000000" },

					points: [{ x: new Date(1950, 1, 12), high: 125, low: 70, open: 115, close: 90 }, 
							 { x: new Date(1953, 1, 12), high: 150, low: 60, open: 120, close: 70 },
							 { x: new Date(1956, 1, 12), high: 200, low: 140, open: 160, close: 190 }, 
							 { x: new Date(1959, 1, 12), high: 160, low: 90, open: 140, close: 110 }, 
							 { x: new Date(1962, 1, 12), high: 200, low: 100, open: 180, close: 120 },
							 { x: new Date(1965, 1, 12), high: 100, low: 45, open: 70, close: 50 }, 
							 { x: new Date(1968, 1, 12), high: 150, low: 70, open: 140, close: 130 },
							 { x: new Date(1971, 1, 12), high: 90, low: 60, open: 65, close: 80 },
							 { x: new Date(1974, 1, 12), high: 225, low: 170, open: 175, close: 220 },
							 { x: new Date(1977, 1, 12), high: 200, low: 100, open: 180, close: 120 }],
				}],
		});
});