JavaScript Column Charts & Graphs

More Examples

• KEY FEATURES
  • Chart with Index Label
  • Multi Series Chart
  • Chart with Zooming & Panning
  • Synchronized Charts
  • Chart with Animation
  • Chart With Image Overlay
  • Chart with Secondary Axis
  • Chart with Null Data
  • Chart with Dynamic Data
  • Column Chart with Reversed Axis
  • Chart with Logarithmic Axis
  • Chart using JSON Data
  • Performance With 50,000 Data Points
  • Draggable Column Chart
  • Chart with Axis / Scale Break
  • Chart with Crosshair
  • Chart with Customized Legends
  • Drilldown Chart
  • Responsive Chart
  • Chart with Axis Labels & Ticks inside Plot Area
  • Sync ToolTip across Multiple Charts
• LINE CHARTS
  • Line Chart
  • Dashed Line Chart
  • Multi Series Line Chart
  • Line Chart with Zoom and Pan
  • Line Chart with Data Marker
  • Line Chart with Logarithmic Axis
  • Line Chart with Axis / Scale Break
  • Line Chart with Multiple Axes
  • Spline Chart
  • Multi Series Spline Chart
  • Dynamic Spline Chart
  • Spline Chart with Secondary Axis
  • Spline Chart with Legends
  • Step Line Chart
  • Multi Series Step Line Chart with Null Data
• AREA CHARTS
  • Area Chart
  • Multi Series Area Charts
  • Spline Area Chart
  • Multi Series Spline Area Charts
  • Step Area Chart
  • Range Area Chart
  • Multi Series Range Area Charts
  • Range Spline Area Chart
  • Stacked Area Chart
  • Stacked Area 100% Chart
  • Stacked Area 100% Chart with Date-Time Axis
• COLUMN & BAR CHARTS
  • Column Chart
  • Column Charts with Multiple Axes
  • Bar Chart
  • Multi Series Bar Chart
  • Bar Chart with Axis / Scale Break
  • Range Column Chart
  • Multi Series Range Column Chart
  • Stacked Column Chart
  • Stacked Column 100% Chart
  • Range Bar Chart
  • Stacked Bar Chart
  • Stacked Bar 100% Chart
  • Waterfall Chart
  • Multi Series Waterfall Chart
  • Waterfall Chart with Custom Colors
• PIE & FUNNEL CHARTS
  • Pie Chart
  • Pie Chart with Legends
  • Pie Chart with Custom Radius
  • Doughnut Chart
  • Doughnut Chart with Custom Inner Radius
  • Funnel Chart
  • Funnel Chart with Custom Neck
  • Inverted Funnel Chart
  • Pyramid Chart
  • Pyramid Chart with Values represented by Area
  • Pyramid Chart With Index Labels Placed Inside
• FINANCIAL CHARTS
  • Candlestick Chart
  • Multi Series Candlestick Chart
  • Combination of Candlestick & Line Chart
  • OHLC Chart
  • OHLC Chart from JSON Data using AJAX
• SCATTER & BUBBLE CHARTS
  • Scatter / Point Chart
  • Multi Series Scatter / Point Chart
  • Scatter Chart with Custom Markers
  • Bubble Chart
  • Bubble Chart with Zoom & Pan
  • Bubble Chart with Custom Markers
• BOX & WHISKER CHARTS
  • Box And Whisker Chart
  • Box and Whisker Chart with Color Customization
  • Box And Whisker Chart with Outliers
• COMBINATION CHARTS
  • Error Chart
  • Error Line Chart
  • Error Bar Chart
  • Pareto Chart
  • Pareto Chart with Index / Data Label
  • Combination of Range Area and Line Charts
  • Combination of Column, Line and Area Chart
  • Combination of OHLC and Line Chart
• DYNAMIC CHARTS
  • Dynamic / Live Column Chart
  • Dynamic / Live Line Chart
  • Dynamic / Live Multi Series Chart
• ANGULAR, REACT, VUE.JS, JQUERY
  • Angular Charts
  • React Charts
  • Vue.js Charts
  • jQuery Charts
• SERVER SIDE TECHNOLOGIES
  • ASP.NET MVC Charts
  • PHP Charts
  • Python Charts
  • JSP Charts
  • Spring MVC Charts

JavaScript Column Charts & Graphs Download JavaScript Chart Samples

• JavaScript Chart Samples
• React Chart Samples
• Angular Chart Samples
• Vue.js Chart Samples
• jQuery Chart Samples
• PHP Chart Samples
• Python Django Chart Samples
• ASP.NET Chart Samples
• JSP Chart Samples
• Spring MVC Chart Samples
• Dashboard Samples
• JavaScript StockChart Samples

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 are interactive, support animation, zooming, panning & exporting as image. Given example shows JavaScript Column Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "light2", // "light1", "light2", "dark1", "dark2" title:{ text: "Top Oil Reserves" }, axisY: { title: "Reserves(MMbbl)" }, data: [{ type: "column", showInLegend: true, legendMarkerColor: "grey", legendText: "MMbbl = one million barrels", dataPoints: [ { y: 300878, label: "Venezuela" }, { y: 266455, label: "Saudi" }, { y: 169709, label: "Canada" }, { y: 158400, label: "Iran" }, { y: 142503, label: "Iraq" }, { y: 101500, label: "Kuwait" }, { y: 97800, label: "UAE" }, { y: 80000, label: "Russia" } ] }] }); chart.render(); } View More

Chart Customizations

You can easily change the color of dataPoint using color property or change its width using dataPointWidth. Some other customizations include using indexLabel, theme, animationEnabled, etc.