Highcharts Column Range Chart
Highcharts Tutorial
Highcharts Tutorial
Highcharts Environment Setup
Highcharts Configuration Syntax
Highcharts Configuration Options
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
Highcharts Column Range Chart
Highcharts Column Chart
The following example demonstrates a column range chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations.
Chart Configuration
Configure the chart's type to 'columnrange'. chart.type describes the chart type. The default value is "line".
var chart = {
type: 'columnrange',
inverted: true
};
Example
Filename: highcharts_column_range.htm
$(document).ready(function() {
var chart = {
type: 'columnrange',
inverted:true
};
var title = {
text: 'Temperature variation by month'
};
var subtitle = {
text: 'Observed in Vik i Sogn, Norway, 2009'
};
var xAxis = {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
};
var yAxis = {
title: {
text: 'Temperature ( xB0C )'
}
};
var tooltip = {
headerFormat: '
{point.key}',
pointFormat: '| {series.name}: | ' +
'{point.y:.1f} mm |
',
footerFormat: '
',
shared: true,
useHTML: true
};
var plotOptions = {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + 'xB0C';
}
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}];
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 such as Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable.
Configuration Guide
¥9.9
/ month
Activate Now
iFlytek Star 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
Explore Further
Scripts
Programming Languages
Computer Science
Software
Scripting Languages
Web Service
Web Services
Programming
Highcharts Tutorial
Highcharts Tutorial
Highcharts Environment Setup
Highcharts Configuration Syntax
Highcharts Configuration Options
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 Security Research
· AI System Architecture
· Frontier Research Trends
· Advanced NLP Techniques
· 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