Column Chart | Highcharts

Menu

• Highcharts
  • Highcharts Documentation
• Getting started
  • System requirements
  • Installation
  • Installation with ES6 modules
  • Installing with NPM
  • Installation with AMD or CommonJS modules
  • Your first chart
  • How to set options
  • Frequently asked questions
  • Creating custom Highcharts packages
  • Optional dependencies
  • A wind of change with Highcharts version 12
• Chart concepts
  • Understanding Highcharts
  • Title and subtitle
  • Axes
  • Bubble legend
  • Series
  • Tooltip
  • Legend
  • Scrollbars
  • Plot bands and plot lines
  • Zooming
  • Labels and string formatting
  • Templating
  • Drill down
  • Getting started with Highcharts 3D support
  • Responsive charts
  • Highcharts Security
  • Dataviz Glossary
  • Understanding Common Highcharts Events
• Stock
  • Getting started with Highcharts Stock
  • Understanding Highcharts Stock
  • Stock tools
  • Advanced Annotations module
  • Candlestick chart
  • Compare
  • Cumulative Sum
  • Hollow Candlestick chart
  • Heikin Ashi chart
  • Highcharts: Understanding Renko Series
  • Point and Figure chart
  • Data grouping
  • Depth Chart
  • Flag series
  • Navigator
  • HLC chart
  • OHLC chart
  • Range selector
  • Axis resizer
  • Technical indicators
  • Custom technical indicators
  • Standalone Navigator
• Maps
  • Getting started with Highcharts Maps
  • Map View and Projection
  • Map navigation
  • Color axis
  • Map Collection
  • Creating custom maps
  • Custom GeoJSON maps
  • Adding points and lines
  • Map drill down
  • Map series
  • Map line series
  • Map point series
  • TiledWebMap
  • Flow map
  • Map Bubble
  • Marker clusters
  • Tilemaps
  • GeoHeatMap Series
• Gantt
  • Getting started with Gantt
  • Grouping tasks in a hierarchy
  • Dependencies between tasks
  • Gantt axis grid
  • Gantt task configuration
• Dashboards
  • Installation
  • Your first dashboard
  • Wrappers
    • Highcharts Dashboards with Angular
    • Highcharts Dashboards with React
    • Highcharts Dashboards with Vue
  • Layout
  • Style by CSS
  • Edit mode
  • Types of Dashboards components
  • Grid Component
  • Migration Guide: Dashboards 4.0.0, Grid Lite 2.0.0 & Grid Pro 2.0.0
  • KPI Component
  • Highcharts Component
  • HTML Component
  • Navigator component
  • Synchronizing Dashboards components
  • Light and Dark Theme
  • Data Handling
  • Data Pool & Connectors
  • Data Table
  • Data Modifiers
  • MathModifier module
  • Custom Dashboards components
  • Installation with ES6 modules
  • Export Dashboards to JSON
  • Frequently asked questions
• Grid
  • Introduction
  • Installation
  • Understanding Highcharts Grid
  • Columns options
  • Header options
  • Cell editing Pro
  • Cell renderers Pro
  • Sparklines Pro
  • Column Filtering
  • Events Pro
  • Exporting Highcharts Grid Pro
  • Pagination
  • Theming
    • Introduction
    • Variables
  • Performance and rendering
  • Accessibility
  • Wrappers
    • Angular
    • React
    • Vue
• Chart and series types
  • Chart types
  • Combining chart types
  • 3D cylinder
  • 3D funnel
  • 3D pyramid
  • Angular gauges
  • Arc diagram
  • Area chart
  • Areaspline chart
  • Bar chart
  • Bell curve
  • Box plot series
  • Bubble series
  • Bullet chart
  • Column chart
  • Column pyramid
  • Dependency wheel
  • Dumbbell chart
  • Error bar series
  • Funnel series
  • Heatmap
  • Histogram
  • Item chart
  • Line chart
  • Lollipop chart
  • Network graph
  • Organization chart
  • Packed bubble
  • Parallel coordinates
  • Pareto chart
  • Pictorial series
  • Pie chart
  • Polar (Radar) chart
  • Radial (or Circular) bar chart
  • Range series
  • Sankey diagram
  • Scatter chart
  • Spline chart
  • Stream graph
  • Sunburst
  • Timeline chart
  • Treegraph chart
  • Treemap
  • Variable radius pie
  • Variwide chart
  • Vector plot
  • Venn series
  • Waterfall series
  • Wind barbs
  • Word cloud
  • X range series
• Advanced chart features
  • How to use the SVG Renderer
  • Annotations module
  • Creating custom annotations
  • Annotations GUI
  • Boost module
  • Breadcrumbs
  • Data sorting
  • Marker clusters
  • Bubble legend
  • Debugger module
  • Freeform drawing
  • Internationalization
  • Pie dataLabels alignment
  • Stacking charts
  • Highcharts TypeScript Declarations
• Export module
  • Export module
  • Client side export
  • Setting up your own export server
  • Command Line Rendering
  • Export server Terms of Use 
• Working with data
  • Working with data
  • Data compression
  • Data module
  • Custom Preprocessing
  • Live data
  • Data from a database
  • Cross domain data
  • Server side data grouping
  • Morningstar Connectors
    • Morningstar Connectors
    • Goal Analysis
    • Portfolio Risk Score
    • Regulatory News Announcements (RNANews)
    • Security Details
    • Security Compare
    • X Ray
    • Performance
    • Hypothetical Performance
    • Time Series
      • Time Series
      • Cumulative Return
      • Dividend
      • Growth
      • OHLCV
      • Price
    • Screeners
      • Screener
      • ESG Screener
      • Find Similar Screener
      • Investment Screener
      • Investor Preferences
      • Regulatory Screener
• Chart design and style
  • Design and style
  • Colors
  • Pattern fills
  • Dark Mode and Themes
  • Style by CSS
  • Custom themes in styled mode
  • Gradients, shadows, and pattern fills in styled mode
• Accessibility
  • Accessibility module
  • Accessibility module feature overview
  • Advanced accessibility configuration
  • Dynamic data and drilldown
  • Patterns and contrast
  • Tables
  • Accessibility compliance
• Audio charts
  • Getting Started with Audio Charts
  • Mapping to Data
  • Advanced Mapping
  • Instruments
  • Speech
  • Conditional Tracks
  • Notifications and Earcons
  • Context Cues
  • Navigation for Audio Charts
• Extending Highcharts
  • Extending Highcharts
• Flutter
  • Getting started with Highcharts Flutter
  • Your first chart
  • Bundle Highcharts into a Flutter app
• React integration
  • Getting started
  • Series and Chart components
  • Setting options
  • Format options with components
  • Next.js
  • Appendix A: Option Component children
  • V4 Migration Guide

Column chart

Column charts display data as vertical bars. A feature of column charts allows for different data to be compared alongside one another. It is similar to bar charts, the difference being that bar charts have a horizontal representation of the data.

The column chart has the same options as a series. For an overview of the column chart options see the API reference.

Histogram

Column charts can be used to make histogram charts by setting the padding between points and groups to 0.

plotOptions:{ column:{ pointPadding:0, borderWidth:0, groupPadding:0, shadow:false}}Copy

Note that borderWidth and shadows are also turned off in the example so the columns do not overlap.

Stacked Column chart

An essential feature of column charts is to represent data as stacked columns. Read more about stacking charts.

Edit this pagePrevious« Bullet chart NextColumn pyramid »

• Histogram
• Stacked Column chart

Highcharts Close search

Cookie Policy

× Close