-- Learn 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 Plot
Highcharts Bubble Chart
Highcharts Dynamic Chart
Highcharts Combination Chart
Highcharts 3D Chart
Highcharts Gauge Chart
Highcharts Treemap
Highcharts Combination Chart
Highcharts Gauge Chart
Deep Dive
Computer Science
Web Service
Scripts
Development Tools
Web Design & Development
Programming Languages
Web Services
Programming
Software
Scripting Languages
Highcharts 3D Column Chart
Highcharts 3D Chart
The following example demonstrates a 3D column chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations.
Configuration
chart.options3d Configuration
The following lists the basic configurations for a 3D chart. Set the chart's type property to 'column', and the options3d option can set the 3D effect.
var chart = {
type: 'column',
options3d: {
enabled: true, //Whether to set the chart to 3D, we set it to true
alpha: 15, //Chart view rotation angle
beta: 15, //Chart view rotation angle
depth: 50, //Total depth of the chart, default is 100
viewDistance: 25 //Defines the viewing distance of the chart
}
};
Example
Filename: highcharts_3d_column.htm
$(document).ready(function() {
var chart = {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
};
var title = {
text: 'Chart Rotation Example'
};
var subtitle = {
text: 'Test by dragging the sliders below'
};
var plotOptions = {
column: {
depth: 25
}
};
var series= [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.series = series;
json.plotOptions = plotOptions;
var highchart = new Highcharts.Chart(json);
function showValues() {
$('#R0-value').html(highchart.options.chart.options3d.alpha);
$('#R1-value').html(highchart.options.chart.options3d.beta);
}
// Activate the sliders
$('#R0').on('change', function () {
highchart.options.chart.options3d.alpha = this.value;
showValues();
highchart.redraw(false);
});
$('#R1').on('change', function () {
highchart.options.chart.options3d.beta = this.value;
showValues();
highchart.redraw(false);
});
showValues();
});
Try it »
The output of the above example is:
Highcharts 3D Chart
Highcharts Combination Chart
Highcharts Gauge Chart
ByteArk Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ Month
Subscribe 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
Subscribe Now
Click 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 Plot
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 Formatter Tool
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation & 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
Bookmark Article
Browsing History
Clear All
No Records
YouTip