JavaScript
/**
* Extend the Axis.getLinePath method in order to visualize breaks with two parallel
* slanted lines. For each break, the slanted lines are inserted into the line path.
*/
Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function(proceed, lineWidth) {
var axis = this,
path = proceed.call(this, lineWidth),
x = path[1],
y = path[2];
Highcharts.each(this.breakArray || [], function(brk) {
if (axis.horiz) {
x = axis.toPixels(brk.from);
path.splice(3, 0,
'L', x - 4, y, // stop
'M', x - 9, y + 5, 'L', x + 1, y - 5, // left slanted line
'M', x - 1, y + 5, 'L', x + 9, y - 5, // higher slanted line
'M', x + 4, y
);
} else {
y = axis.toPixels(brk.from);
path.splice(3, 0,
'L', x, y - 5, // stop
'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
'M', x, y + 4
);
}
});
return path;
});
/**
* On top of each column, draw a zigzag line where the axis break is.
*/
function pointBreakColumn(e) {
var renderer = this.chart.renderer,
point = e.point,
brk = e.brk,
shapeArgs = point.shapeArgs,
x = shapeArgs.x,
y = this.translate(brk.from, 0, 1, 0, 1),
w = shapeArgs.width,
key = ['brk', brk.from, brk.to],
customGroup = renderer.g().add(point.graphic.parentGroup),
areaPath = ['M', x, y, 'L', x + w, y - 5, x + w, y, x, y + 5, 'Z'],
linePath = ['M', x - 1, y, 'L', x + w + 1, y - 5, 'M', x + w + 1, y, 'L', x - 1, y + 5, 'Z'];
if (!point[key]) {
renderer.path(areaPath)
.attr({
'stroke-width': 1,
fill: '#FFFFFF',
stroke: point.series.options.borderColor
})
.add(customGroup);
renderer.path(linePath)
.attr({
'stroke-width': 2,
stroke: point.color
})
.add(customGroup);
point[key] = customGroup;
} else {
...