HTML5 & JavaScript Line Charts

Line Chart / Graph draws a series of straight lines connecting all the data points. Its normally used to display a trend - works well for either large or small number of data points. Charts support Animation, Zooming, Panning & exporting as image. CanvasJS is a perfect fit if you are looking for Interactive & High Performance Chart. It can render 100,000 data-points in just around 100 ms. CanvasJS uses HTML5 Canvas element and JavaScript to deliver 10X higher performance than traditional SVG and Flash based Charts. Below are some of the examples along with their source code.

Click on any example below to see live demo
  • Customizability

    Line charts allow you to customize colors of individual markers that lets you highlight a particular data point from the rest. This is useful in showing a spike in the traffic, prices, etc. You can also control various other aspect like line thickness, order of rendering, etc. You can selectively zoom & pan into a certain region to get a better picture when there are large number of data points.
  • HTML5 line chart
  • JavaScript Line Chart
  • Multi Series Line Charts

    In case of a multi series line chart, each series is automatically assigned a color based on the selected theme. But you can customize the same by overriding color property of any series or data point. Observe that the ToolTip sticks to the line once hovered upon and then then the line is tracked automatically – you need not have to follow every data point closely.
  • html5 Multi-Series line chart
  • javascript Multi-Series line chart
  • High Performance

    Unlike traditional SVG and Flash Charts, CanvasJS allows you to render line charts / graphs with hundreds of thousands of Data Points just by using HTML and JavaScript. You can see live examples below. Also try Zooming & Panning.
  • hundred Thousand dataPoints html5 line Chart 100000 data Points
  • Hundred Thousand data date time values in a line chart 100000 date-time values