How to display bars next to each other - highcharts

Question

Problem
When I have only 1 series to show with multiple users in highcharts bar graph it display on top of each other instead of next to each other. Below is the code am using. Please guide me in the right direction.
Also if I add 1 more date in any user's series it shows up properly but that is not the solution as I will always have 1 date on my graph.
JS fiddle link: http://jsfiddle.net/bhats1989/b33mN/3/
Code
$(function () {
$('#team_container').highcharts({
chart: {
type: 'bar',
//inverted: true,
renderTo: 'container',
zoomType: 'xy',
events: {
},
zIndex: 5
},
title: {
text: 'Team Activity Game',
x: -20 //center
},
subtitle: {
text: 'Click and drag in the plot area to zoom in and scroll',
x: -25 //center
},
xAxis: {
title: {
text: 'Week Ending'
},
type: 'datetime',
maxZoom: 24 * 3600000, // Two days
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
},
tickInterval: 24 * 3600 * 1000,
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (!this.visible)
return true;
var seriesIndex = this.index;
var series = this.chart.series;
var j = series.length;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ? series[i].hide() : series[i].show();
series[j-1].hide();
}
}
return false;
}
}
}
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#f4e3e7',
from: 0,
to: 15,
events: {
mouseover: function(e) {
team_tooltipUpdate();
}
},
zIndex: 3
}],
gridLineColor: null,
title: {
text: 'Distance (kms)'
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 15 }]
},
tooltip: {
useHTML: true,
formatter: team_myFormatter
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'Mark',
data: []
}, {
name: 'Joe',
data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
}, {
name: 'Max',
data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
}, {
name: 'John',
data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
} ,{
name: 'yellowline',
visible: false,
showInLegend: false,
data: []
}
]
});
});
function team_tooltipUpdate(){
var chart = $('#team_container').highcharts();
chart.tooltip.refresh(chart.series[4].points[0]);
}
function team_myFormatter(){
var game_parameter = 'running';
if(this.series.name == 'yellowline'){
return '<span style="color:Red;"><b>Danger Area</b></div>';
}else{
if(game_parameter == 'running'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'steps'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'floors'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'cycling'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'heartrate'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
}
}
}

Answer 1

You have to set your pointRange option for series.
pointRange : On linear and datetime axes, the range will be computed as the distance between the two closest data points.
As there is only one point, Highchart won't be able to calculate the pointRange...
To be sure that it will work, put it at the tickInterval value.
// ...
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000, // tickInterval has the same value
// ...
},
// ...
},
// ...
For your question about First and Last label :
xAxis: {
// ...
showFirstLabel: false,
showLastLabel: false,
// ...
}
Look at this Example.

Answer 2

The problem is that with one point Highcharts won't be able to calculate pointRange for any of series. In that case set directly pointRange for series, see: http://jsfiddle.net/b33mN/5/
In the example, pointRange = tickInterval, it's probably you want to achieve.

Answer 3

I know this is a late but helpful answer, I use pointPlacement attribute of the config when using column charts and here is a plunker that shows how to use it to make columns stay next to each other .Results: http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview
$(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories:["Population","Kokulation"]
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth:20
},
},
tooltip: {
shared: false
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1]
],
pointPlacement:0.23
},
{name:"Kokulation",
data:[
['Istanbul', 14.2],
['Karachi', 14.0]
],
pointPlacement:-0.2146
}
]
});
});