walkerboh
Posts: 3
Joined: Fri Jun 23, 2017 6:40 pm

Broken Axis - Axis break in column

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.

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'
	});
}
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!
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Broken Axis - Axis break in column

Hi walkerboh,

Sorry for my late reply. Instead of using only one path, you can create a SVG group and add multiple paths into it. I updated your example. Now there are two paths. First is the white area between the lines and the second one is lines between. Take a look at the modified demo.

API Reference:
http://api.highcharts.com/highcharts/Renderer.path
http://api.highcharts.com/highcharts/Renderer.g

Example:
https://jsfiddle.net/qgro9e28/

Regards.
Paweł Dalek
Highcharts Developer

Return to “Highcharts Usage”