Hi jane,
I thought I might be able to achieve that by reducing the width of the selected section but I haven't been able to find a way so far
Changing the width of the selected section is actually not a good idea, because the Highcharts SVG Element does not have such a functionality.
Another approach to this issue is to translate other points horizontally. To make it, loop through each chart series and choose only points that have the same index as the selected one. Then translate them so that left and right margins appear. Check demo I posted you below with implementation of this approach. The most important piece of code:
Code: Select all
var selectedPoint;
// Utils
function selectPoint() {
const point = this,
seriesIndex = point.series.index,
chart = point.series.chart,
slicedOffset = point.pointWidth / 4,
translateX = point.graphic.translateX ? 0 : slicedOffset,
translate = {
translateX,
translateY: 0
},
pointIndex = point.index,
offset = 3;
let barPoint,
positive = true;
chart.series.forEach(series => {
barPoint = series.points[pointIndex];
if (barPoint.series.index !== seriesIndex) {
if (positive) {
barPoint.graphic.animate({
translateY: -offset
});
} else {
barPoint.graphic.animate({
translateY: offset
});
}
} else {
positive = !positive;
}
});
point.graphic.animate(translate);
if (point.dataLabel) {
point.dataLabel.animate({
translateX: point.dataLabel.translateX,
translateY: point.dataLabel.translateY - translateX
});
}
}
function unselectPoint() {
const point = this,
chart = this.series.chart,
pointIndex = point.index,
translate = {
translateX: 0,
translateY: 0
};
let barPoint;
chart.series.forEach(series => {
barPoint = series.points[pointIndex];
barPoint.graphic.animate({
translateY: 0
})
});
point.graphic.animate(translate);
if (point.dataLabel) {
point.dataLabel.animate({
translateX: point.dataLabel.x,
translateY: point.dataLabel.y
});
}
}
point: {
events: {
select() {
const point = this;
if (selectedPoint) {
unselectPoint.call(point);
setTimeout(function() {
selectPoint.call(point);
}, 0);
} else {
selectPoint.call(point);
}
selectedPoint = point;
},
unselect() {
const point = this;
unselectPoint.call(point);
}
}
}
Demo:
https://jsfiddle.net/wchmiel/9fns4o67/
Kind regards.