Fixed Width HiLo with Syncfusion

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="http://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({
        size: { width: "400", height: "250" },
        title: { text: "Fixed Width HiLo" },
        legend: { visible: false },
        primaryXAxis: { title: { text: "year" } },
        primaryYAxis: {
            title: { text: "price" },
            range: { min: 0, max: 100 }
        },
        commonSeriesOptions: {
        		type: "hiloopenclose",
    				fill: "#007c9c",
    				border: { width: 3 }
        },
        series: [
        		{ points: [
    						{ x: 1999, high: 55, low: 25 },
								{ x: 2000, high: 65, low: 38 },
        				{ x: 2001, high: 72, low: 41 },
       					{ x: 2002, high: 62, low: 25 },
        				{ x: 2003, high: 65, low: 25 },
        				{ x: 2004, high: 82, low: 40 },
        				{ x: 2005, high: 83, low: 50 },
        				{ x: 2006, high: 64, low: 25 },
        				{ x: 2007, high: 56, low: 15 },
        				{ x: 2008, high: 49, low: 10 },
        				{ x: 2009, high: 76, low: 28 },
        				{ x: 2010, high: 69, low: 40 },
        				{ x: 2011, high: 62, low: 30 },
        				{ x: 2012, high: 40, low: 10 },
        				{ x: 2013, high: 34, low: 12 },
        				{ x: 2014, high: 72, low: 22 },
        				{ x: 2015, high: 80, low: 40 },
        				{ x: 2016, high: 48, low: 5 }
					]}
    		],
    });
});