HTML5 & JavaScript Area Charts

Area charts are based on line charts. But it shades the area that it covers with color. This allows you visualize cumulative value over a period of time or range. Below are live examples of HTML5 Canvas & JavaScript based Area Charts and two of its variants - Stacked Area and Stacked Area 100%. Similar to Line Charts, Area Charts are optimized for performance and also support zooming and panning. Examples include source code for all the graphs.

Click on any example below to see live demo
  • Single Series and Multi Series Area Charts

    With CanvasJS you can create both single and multi-series area charts. Area Charts are useful when you are interested in cumulative totals over a period of time or range of values. When there are multiple series, each series is assigned a color automatically – but it can also be customized.
  • javascript single series Area chart
  • html5 multiseries area chart
  • Stacked Area Charts

    Like in case of Stacked Column, Stacked Area is formed by stacking multiple data-series one on top of the other. This is useful when you want to compare contribution of two or more area series to the total.
  • javascript stacked area chart
  • html5 stacked area chart
  • Stacked Area 100%

    Stacked Area 100% is similar to “Stacked Area” except that areas are rendered as a percentage of total value at any given point.
  • HTML5 Stacked Area 100% chart
  • JavaScript Stacked Area 100% chart