I've been working with the JSFiddle that shows the custom rendering for breaks in columns to make the break in the column appear the same as on the break on the axis. My current change is here: https://jsfiddle.net/8gd15he2/.
I have managed to get the white line going across the column, but I can't figure out how to add the extra diagonal lines to the column like the diagonal black lines on the axis. I tried adding another call to chart.render.path but it didn't do anything.
Code: Select all
if (!point[key]) {
point[key] = this.chart.renderer.path(path)
.attr({
'stroke-width': 4,
stroke: point.series.options.borderColor
})
.add(point.graphic.parentGroup);
this.chart.renderer.path(['M', x + 5, y - 9, 'L', x - 5, y + 1, 'M', x + 5, y - 1, 'L', x - 5, y + 9])
.attr({
'stroke-width': 2,
'stroke': 'black'
});
} else {
point[key].attr({
d: path
});
this.chart.renderer.path(['M', x + 5, y - 9, 'L', x - 5, y + 1, 'M', x + 5, y - 1, 'L', x - 5, y + 9])
.attr({
'stroke-width': 2,
'stroke': 'black'
});
}