-- Learning not just technology, but dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
Highcharts Tutorial
Highcharts Tutorial
Highcharts Environment Setup
Highcharts Configuration Syntax
Highcharts Configuration Description
Highcharts Line Chart
Highcharts Area Chart
Highcharts Bar Chart
Highcharts Column Chart
Highcharts Pie Chart
Highcharts Scatter Chart
Highcharts Bubble Chart
Highcharts Dynamic Chart
Highcharts Combination Chart
Highcharts 3D Chart
Highcharts Gauge Chart
Highcharts Treemap
Highcharts Bar Chart
Highcharts Pie Chart
Explore Further
Software
Web Service
Web Services
Scripts
Programming Languages
Scripting Languages
Web Design & Development
Development Tools
Programming
Computer Science
Highcharts Basic Column Chart
Highcharts Column Chart
The following example demonstrates a basic column chart.
We have already learned the basic Highcharts configuration syntax in previous chapters. Next, let's look at other configurations.
Configuration
chart Configuration
Set the chart's type property to 'column'. chart.type describes the chart type. The default value is "line".
var chart = {
type: 'column'
};
Example
Filename: highcharts_column_basic.htm
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Monthly Average Rainfall'
};
var subtitle = {
text: 'Source: .com'
};
var xAxis = {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
crosshair: true
};
var yAxis = {
min: 0,
title: {
text: 'Rainfall (mm)'
}
};
var tooltip = {
headerFormat: '
{point.key}',
pointFormat: '| {series.name}: | ' +
'{point.y:.1f} mm |
',
footerFormat: '
',
shared: true,
useHTML: true
};
var plotOptions = {
column: {
pointPadding: 0.2,
borderWidth: 0
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
Try it yourself »
The output of the above example is:
Highcharts Column Chart
Highcharts Bar Chart
Highcharts Pie Chart
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ month
Activate Now
iFlytek Spark Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Activate Now
Click here to share notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Front-end Development
Back-end Development
Database
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Building
Advertisement
Highcharts Tutorial
Highcharts Tutorial
Highcharts Environment Setup
Highcharts Configuration Syntax
Highcharts Configuration Description
Highcharts Line Chart
Highcharts Area Chart
Highcharts Bar Chart
Highcharts Column Chart
Highcharts Pie Chart
Highcharts Scatter Chart
Highcharts Bubble Chart
Highcharts Dynamic Chart
Highcharts Combination Chart
Highcharts 3D Chart
Highcharts Gauge Chart
Highcharts Treemap
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation and Safety Research
· AI System Architecture
· Cutting-edge Research Trends
· Advanced NLP Technologies
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Article
Browsing History
Clear All
No records yet
YouTip