Highcharts Fixed Layout Column Chart
[Highcharts Column Chart](#)
The following example demonstrates a fixed layout column chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. Add the `pointPlacement` and `pointPadding` configurations under `series`.
### series.pointPadding
Controls the distance between each column. When the Highcharts chart width is fixed, the larger this value is, the smaller the column width becomes, and vice versa. The default value is 0.1.
### series.pointPlacement
In a column chart, 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 between the tick marks.
In Highcharts versions after 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 the text setting option, the number setting does not affect the interval between axes.
```javascript
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`
$(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);
});
The output of the above example is:
[Highcharts Column Chart](#)
YouTip