jQuery OHLC Charts are similar to Candle Stick Charts except that tick marks to the left and right of vertical line are used to show Opening and Closing Prices. The given example shows simple jQuery OHLC Chart along with HTML source code that you can edit in-browser or save to run it locally.
window.onload = function() {
var options = {
animationEnabled: true,
exportEnabled: true,
title: {
text: "Tesla Motors Stock Price - 2017"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
title: "Price",
prefix: "$"
},
data: [{
type: "ohlc",
xValueFormatString: "DD MMM",
yValueFormatString: "$##0.00",
dataPoints: [
{ x: new Date (2017, 0, 02), y: [214.860, 230.309, 210.960, 229.009] },
{ x: new Date (2017, 0, 09), y: [228.970, 237.850, 225.580, 237.750] },
{ x: new Date (2017, 0, 16), y: [236.699, 248.679, 234.369, 244.729] },
{ x: new Date (2017, 0, 23), y: [245.850, 258.459, 245.500, 252.949] },
{ x: new Date (2017, 0, 30), y: [252.529, 255.889, 247.100, 251.330] },
{ x: new Date (2017, 1, 06), y: [251.000, 271.179, 250.630, 269.230] },
{ x: new Date (2017, 1, 13), y: [270.739, 287.390, 264.149, 272.230] },
{ x: new Date (2017, 1, 20), y: [275.450, 283.450, 250.199, 257.000] },
{ x: new Date (2017, 1, 27), y: [248.169, 254.850, 242.009, 251.570] },
{ x: new Date (2017, 2, 06), y: [247.910, 253.889, 243.000, 243.690] },
{ x: new Date (2017, 2, 13), y: [244.820, 265.750, 242.779, 261.500] },
{ x: new Date (2017, 2, 20), y: [260.600, 264.799, 250.240, 263.160] },
{ x: new Date (2017, 2, 27), y: [260.600, 282.000, 259.750, 278.299] },
{ x: new Date (2017, 3, 03), y: [286.899, 304.880, 284.579, 302.540] },
{ x: new Date (2017, 3, 10), y: [309.149, 313.730, 295.299, 304.000] },
{ x: new Date (2017, 3, 17), y: [302.700, 309.149, 297.899, 305.600] },
{ x: new Date (2017, 3, 24), y: [309.220, 314.799, 305.859, 314.070] },
{ x: new Date (2017, 4, 01), y: [314.880, 327.660, 290.760, 308.350] },
{ x: new Date (2017, 4, 08), y: [310.899, 327.000, 305.820, 324.809] },
{ x: new Date (2017, 4, 15), y: [318.380, 320.200, 305.309, 310.829] },
{ x: new Date (2017, 4, 22), y: [312.799, 325.489, 303.480, 325.140] },
{ x: new Date (2017, 4, 29), y: [326.000, 344.880, 325.760, 339.850] },
{ x: new Date (2017, 5, 05), y: [338.500, 376.869, 334.209, 357.320] },
{ x: new Date (2017, 5, 12), y: [357.989, 384.250, 350.619, 371.399] },
{ x: new Date (2017, 5, 19), y: [375.000, 386.989, 367.799, 383.450] },
{ x: new Date (2017, 5, 26), y: [386.690, 386.950, 354.100, 361.609] },
{ x: new Date (2017, 6, 03), y: [370.239, 371.350, 306.299, 313.220] },
{ x: new Date (2017, 6, 10), y: [312.899, 333.100, 303.130, 327.779] },
{ x: new Date (2017, 6, 17), y: [325.540, 331.649, 313.450, 328.399] },
{ x: new Date (2017, 6, 24), y: [330.239, 347.500, 326.290, 335.070] },
{ x: new Date (2017, 6, 31), y: [335.500, 357.269, 311.220, 356.910] },
{ x: new Date (2017, 7, 07), y: [357.350, 370.000, 352.750, 357.869] },
{ x: new Date (2017, 7, 14), y: [364.630, 367.660, 345.799, 347.459] },
{ x: new Date (2017, 7, 21), y: [345.820, 356.660, 331.850, 348.049] },
{ x: new Date (2017, 7, 28), y: [347.279, 358.440, 338.750, 355.399] },
{ x: new Date (2017, 8, 04), y: [353.799, 355.489, 341.559, 343.399] },
{ x: new Date (2017, 8, 11), y: [351.350, 380.000, 350.000, 379.809] },
{ x: new Date (2017, 8, 18), y: [380.250, 389.609, 350.880, 351.089] },
{ x: new Date (2017, 8, 25), y: [353.149, 357.470, 335.399, 341.100] },
{ x: new Date (2017, 9, 02), y: [342.519, 360.100, 331.279, 356.880] },
{ x: new Date (2017, 9, 09), y: [349.649, 359.779, 342.670, 355.570] },
{ x: new Date (2017, 9, 16), y: [353.760, 363.000, 344.339, 345.100] },
{ x: new Date (2017, 9, 23), y: [349.880, 349.950, 316.660, 320.869] },
{ x: new Date (2017, 9, 30), y: [319.179, 332.609, 292.630, 306.089] },
{ x: new Date (2017, 10, 06), y: [307.000, 308.359, 296.299, 302.989] },
{ x: new Date (2017, 10, 13), y: [300.130, 326.670, 299.109, 315.049] },
{ x: new Date (2017, 10, 20), y: [313.790, 318.230, 304.750, 315.549] },
{ x: new Date (2017, 10, 27), y: [313.250, 320.000, 301.230, 306.529] },
{ x: new Date (2017, 11, 04), y: [306.500, 308.269, 300.609, 305.200] },
{ x: new Date (2017, 11, 04), y: [306.500, 308.265, 300.609, 305.200] }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
}
You can format the axis label using valueFormatString. Other related customization options are prefix, color, indexLabel, etc
Note For step by step instructions, follow our jQuery Integration Tutorial