HTML5 & JavaScript Column Charts

Column charts use rectangular bars to compare value between different categories/series. Column Charts are sometimes referred to as Vertical Bar Charts. In order to make it easier to differentiate, we call vertical ones as Column Charts and Horizontal ones as Bar Charts. Charts support Animation, Zooming, Panning & exporting as image. Below are examples of HTML5 & JavaScript based Column Charts and two of its variants - Stacked Column and Stacked Column 100%. Examples also include source code for all the graphs.

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

    Column Charts can 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. In case of single series, each data point has a different color and it repeats after a certain interval.
  • HTML5 Column Chart
  • HTML5 Dual Axis column chart
  • Stacked Column Charts

    Stacked Column Charts show relation between individual values to the total sum. Here the data points from different series are stacked one on top of the other instead of placing them side-by-side like in standard multi-series chart.
  • HTML5 stacked column chart
  • JavaScript stacked column chart
  • Stacked Column 100%

    In case of Stacked Column 100% Charts, data points are stacked similar to “Stacked Column” except that their individual height is calculated as a percentage of the total sum. This allows you to compare individual contribution of Data Series to the total sum in percent.
  • HTML5 Stacked Column 100 percent chart
  • javascript stacked column 100 percent chart
busy CanvasJS