{"id":1263,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/in\/docs\/uncategorized\/echarts-playbook\/master-column-charts-setup-styling-and-layout-guide\/"},"modified":"2026-07-29T08:44:35","modified_gmt":"2026-07-29T08:44:35","slug":"column-chart-core-setup-styling-and-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Column Chart: Core Setup, Styling, and Layout"},"content":{"rendered":"

In the realm of data visualization and reporting, the Column Chart<\/strong> (a vertical bar chart) is the primary tool for comparing discrete categories over a single or multiple metrics. Unlike horizontal bar charts that are well-suited for long text labels, vertical column charts utilize height differences to instantly communicate volume, growth, and variance<\/em>. Whether you are displaying quarterly sales figures, server CPU utilization spikes, or web traffic by channel, column charts provide a clear visual standard for category-based metrics.<\/p>\n

The Mechanics of Vertical Columns<\/h2>\n

In Apache ECharts, both horizontal bar charts and vertical column charts rely on the 'bar'<\/code> series type. The key factor that creates a column chart is placing category labels on the horizontal axis (xAxis<\/code>) while setting the vertical axis (yAxis<\/code>) to numerical values. The chart engine reads the data array and dynamically scales the height of each vertical column relative to the numerical scale.<\/p>\n

1. Essential Setup<\/h3>\n

To build a basic column chart, define a category-based X-axis and map your dataset to a series object with type: 'bar'<\/code>:<\/p>\n

\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [120, 200, 150, 80, 70, 110, 130]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
 <\/p>\n
Advanced Structural Techniques<\/h2>\n
When building dashboards, simple single-series charts are often insufficient. ECharts provides clean syntax options to manage multi-series comparisons, custom dimensions, and layout spacing.<\/p>\n
Multi-Series Comparison<\/h3>\n
To compare multiple datasets side-by-side (such as year-over-year revenue), add multiple objects inside the series<\/code> array. The layout engine will group related columns per category along the X-axis:<\/p>\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: '2025 Revenue',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: '2026 Revenue',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
 <\/p>\n
Custom Column Styles and Individual Highlighting<\/h3>\n
You can apply global styles to an entire series or target specific data points directly. This is particularly useful for highlighting key events, outliers, or specific targets.<\/p>\n