JavaScript Line Charts & Graphs

Download JavaScript Chart Samples

JavaScript Line Chart is drawn by interconnecting all data points in data series using straight line segments. Line Charts are normally used for visualizing trends in data varying continuously over a period of time or range. You can either use Numeric, Category or Date-Time Axis for the graph. Line charts are responsive, interactive, customizable & integrates easily with Bootstrap & other popular Frameworks. They work really well even with large number of data points & supports animation, zooming, panning, annotation, etc. Given example shows simple JavaScript Line Chart along with HTML / JavaScript source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Simple Line Chart"
	},
	data: [{        
		type: "line",
      	indexLabelFontSize: 16,
		dataPoints: [
			{ y: 450 },
			{ y: 414},
			{ y: 520, indexLabel: "\u2191 highest",markerColor: "red", markerType: "triangle" },
			{ y: 460 },
			{ y: 450 },
			{ y: 500 },
			{ y: 480 },
			{ y: 480 },
			{ y: 410 , indexLabel: "\u2193 lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
			{ y: 500 },
			{ y: 480 },
			{ y: 510 }
		]
	}]
});
chart.render();

}

Chart Customizations

You can change lineColor or lineThickness to make series visually distinct. Some other common customizations include lineDashType, markerType, markerSize, etc.