When trying to highlight a selected column by adding a plotBand (even though the width of the main chart container does not change), the xAxis categories get updated as this was placed in container with a smaller width.
I have tested on a few browsers and with different widths. It is quite an isolated case and seems like an actual bug. Don't know if there is a work around it.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories: ["Week 38", "Week 39", "Week 40", "Week 41", "Week 42", "Week 43", "Week 44", "Week 45", "Week 46", "Week 47", "Week 48", "Week 49", "Week 50", "Week 51", "Week 52", "Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7", "Week 8", "Week 9", "Week 10", "Week 11", "Week 12", "Week 13", "Week 14", "Week 15", "Week 16", "Week 17", "Week 18", "Week 19", "Week 20", "Week 21", "Week 22", "Week 23", "Week 24", "Week 25", "Week 26", "Week 27", "Week 28", "Week 29", "Week 30", "Week 31", "Week 32", "Week 33", "Week 34", "Week 35", "Week 36", "Week 37"]
},
legend: {enabled:false},
plotOptions:{
column: {
stacking: 'normal',
},
series: {
point: {
events: {
click: function () {
moveBand(this.index);
}
}
}
}
},
tooltip: {
color: '#ffffff',
backgroundColor: '#ffffff',
borderColor: '#ffffff',
borderRadius:0,
shadow:false,
borderWidth:0,
style: {
padding: 12,
fontSize: '16px',
},
shape:'square',
shared: true
},
series: [{
"data": dataMore,
"name": "Data for more"
}, {
"data": dataLow,
"name": "Data for low"
}, {
"data": dataNone,
"name": "Data for none"
}]
});
function moveBand(a) {
var chart = $('#container').highcharts();
chart.xAxis[0].update({plotBands:[{color: 'red',from:a- 0.5,to:a+0.5}]});
}
});
http://jsfiddle.net/marinr/ny4q8rp0/2/
Step 1 -> After opening the jsfiddle, enlarge the chart area so it is about 1100px in width and run the code again. You should be able to see the 52 weeks, starting with 'Week 38' to 'Week 37'
Step 2 -> Click on a column to highlight
Result -> Some of the categories disappear
If all the categories managed to fit on the first render of the chart I would expect it to maintain those even if a plotBand is added behind the bars?
PS: If there is a way to highlight a stacked column on click without adding a plotBand all suggestions are welcomed as I tried everything already.
You can highlight the stacked column by changing the border-color. With this solution, it looks better and categories are the same.
Code:
series: {
point: {
events: {
click: function() {
var point = this,
chart = point.series.chart;
if (chart.highlightedPointIndex) {
changeBorderColor(
chart.highlightedPointIndex, chart, '#fff');
}
changeBorderColor(point.index, chart, 'red');
chart.highlightedPointIndex = point.index;
}
}
}
}
...
function changeBorderColor(index, chart, color) {
chart.series.forEach(function(series) {
series.points[index].graphic.css({
stroke: color
});
});
}
Demo:
API reference:
EDIT
Another solution is to use logic from the crosshair.
Code:
plotOptions: {
column: {
point: {
events: {
click: function(e) {
var point = this,
chart = point.series.chart,
xAxis = point.series.xAxis,
color = 'pink',
path,
cross;
if (!chart.customCrosshair) {
chart.customCrosshair = [];
} else {
chart.customCrosshair[0].destroy();
chart.customCrosshair.length = 0;
}
path = xAxis.getPlotLinePath({
translatedValue: point.plotX
}) || null;
cross = chart.renderer
.path()
.attr({
zIndex: 2
})
.add();
cross.attr({
stroke: color,
'stroke-width': xAxis.transA
}).css({
'pointer-events': 'none'
});
cross.show().attr({
d: path
});
chart.customCrosshair.push(cross);
}
}
}
}
}
Demo: