Broken Axis - Axis break in column
Posted: Wed Jun 28, 2017 3:47 pm
Hello,
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.
Since I need the lines to be a different color (I want them the same color as the column) I can't just add them to the path being passed in since that is using the borderColor. How can I render those extra lines here? Thanks!
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'
});
}