Highcharts Fixed Layout Column Chart
The following example demonstrates a fixed-layout bar chart.
In the previous chapters, we have learned the basic configuration syntax of Highcharts. Next, let's look at other configurations. Add the pointPlacement and pointPadding configurations under series.
series.pointPadding
Controls the distance value between each column. When the Highcharts chart width is fixed, the larger this value, the smaller the column width, and vice versa. The default value is 0.1.
series.pointPlacement
In column charts, when pointPlacement is set to "on", the points on the X-axis have no spacing. If pointPlacement is set to "between", the columns are laid out according to the ticks.
In versions after Highcharts 3.0.2, pointPlacement can support numbers. 0 is the value on the axis, -0.5 is the interval between the current value and the previous value, and 0.5 is the interval between the current value and the next value. Unlike text setting options, numeric settings do not affect the spacing between axes.
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}
Example
Filename: highcharts_column_fixed.htm
<html>
<head>
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Efficiency Optimization by Branch'
};
var xAxis = {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
};
var yAxis = [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}];
var legend = {
shadow: false
};
var tooltip = {
shared: true
};
var credits = {
enabled: false
};
var plotOptions = {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
};
var series= [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.credits = credits;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The output result of the above example is:
other extensions