<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
        
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date"
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
          baseUnitStep: "auto",
            autoBaseUnitSteps: {
              	hours: [1, 2, 4, 6, 12]
        	},
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>