JavaScript Candlestick Charts & Graphs

Download JavaScript Chart Samples

JavaScript Candlestick Chart forms a column with vertical lines to represent open, high, low & close values of a data point. Candlestick provides a visual support for making decisions in case of Stock, foreign exchange, etc. Candle Stick graphs are beautiful, interactive & supports animation, zooming, panning, annotation. Given example shows JavaScript Candle Stick Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
  1. window.onload = function () {
  2.  
  3. var dataPoints = [];
  4.  
  5. var chart = new CanvasJS.Chart("chartContainer", {
  6. 	animationEnabled: true,
  7. 	theme: "light2", // "light1", "light2", "dark1", "dark2"
  8. 	exportEnabled: true,
  9. 	title: {
  10. 		text: "Netflix Stock Price in 2016"
  11. 	},
  12. 	subtitles: [{
  13. 		text: "Weekly Averages"
  14. 	}],
  15. 	axisX: {
  16. 		interval: 1,
  17. 		valueFormatString: "MMM"
  18. 	},
  19. 	axisY: {
  20. 		prefix: "$",
  21. 		title: "Price"
  22. 	},
  23. 	toolTip: {
  24. 		content: "Date: {x}<br /><strong>Price:</strong><br />Open: {y[0]}, Close: {y[3]}<br />High: {y[1]}, Low: {y[2]}"
  25. 	},
  26. 	data: [{
  27. 		type: "candlestick",
  28. 		yValueFormatString: "$##0.00",
  29. 		dataPoints: dataPoints
  30. 	}]
  31. });
  32.  
  33. $.get("https://canvasjs.com/data/gallery/javascript/netflix-stock-price.csv", getDataPointsFromCSV);
  34.  
  35. function getDataPointsFromCSV(csv) {
  36. 	var csvLines = points = [];
  37. 	csvLines = csv.split(/[\r?\n|\r|\n]+/);
  38. 	for (var i = 0; i < csvLines.length; i++) {
  39. 		if (csvLines[i].length > 0) {
  40. 			points = csvLines[i].split(",");
  41. 			dataPoints.push({
  42. 				x: new Date(
  43. 					parseInt(points[0].split("-")[0]),
  44. 					parseInt(points[0].split("-")[1]),
  45. 					parseInt(points[0].split("-")[2])
  46. 				),
  47. 				y: [
  48. 					parseFloat(points[1]),
  49. 					parseFloat(points[2]),
  50. 					parseFloat(points[3]),
  51. 					parseFloat(points[4])
  52. 				]
  53. 			});
  54. 		}
  55. 	}
  56. 	chart.render();
  57. }
  58.  
  59. }

Chart Customizations

You can set risingColor or color to show the rising or falling price in different colors. Some other frequently used customizations include zoomEnabled, animationEnabled, etc.