HTML5 & JavaScript Bar Charts

Similar to Column Charts, Bar Charts use Rectangular bars to compare values between different categories. But in this case the bars are horizontally placed in order to emphasize y value on axis. Checkout some of the examples for HTML5 Bar Charts and two of its variants - Stacked Bar and 100% Stacked Bar Charts. Examples include source code for all the graphs.

Click on any example below to see live demo
  • Single & MultiSeries Bar Charts

    Like in Column Charts, Bar Charts can also have one or more Data Series. In case of more than one series, Data Points from different Series are placed next to one another and are differentiated by their color.
  • HTML5 bar chart
  • JavaScript bar chart
  • HTML5 multi series bar chart
  • JavaScript multi series bar chart
  • Stacked Bar Charts

    Stacked Bar Charts have data points stacked one on top of the other instead of placing them side-by-side. This allows you to compare the contribution of different data series to the total at a given point. You should use Stacked bar when multiple data-series can be added up to show combined result like total sales of various products, etc.
  • HTML5 Stacked bar chart
  • JavaScript stacked bar chart
  • Stacked Bar 100%

    In case of Stacked Bar 100% Charts, data points are stacked similar to “Stacked Bar” except that their individual height is calculated as a percentage of total sum. This allows you to compare individual contribution of Data Series to the whole.
  • HTML5 stacked bar 100
  • JavaScript stacked bar 100 percent