Points should not connect at breaks

[moses-seeq]

While implementing breaks on the x-axis, I have noted that the points on either side of the break are connected. This is non-intuitive for the user and makes it significantly less clear where the breaks are.

This can be seen in the simple fiddle demonstrating the break feature:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/axisbreak/break-simple/

[jon-a-nygaard]

Hi @moses-seeq, there is an advanced example in our API which might be what you are looking for.

[moses-seeq]

Yes, I found that and I have a workaround. However, I feel that the default behavior is unclear to the user, thus I was suggesting an enhancement.

[moses-seeq]

For what it's worth, I haven't found that example very helpful for a line chart, which does not have the same properties (e.point.shapeArgs) available to it at the point break event.

[jon-a-nygaard]

Thank you for the feedback, we can look into extending our examples around the axis breaks feature. Perhaps a style/formatter option would be something to work towards as well.

[moses-seeq]

That would be great. In the meantime, I have a workaround. I am overlaying an opaque rectangle at the x axis break points, obliterating the connections in the trend lines visually. Thank you.

[pldilley]

I want to second this, it would be great not to have the breaks connecting to each other without having to have entire gaps.

May I ask, how do I approach adding opaque rectangles for hiding the connections - as a work around?

[moses-seeq]

It's ugly, unfortunately as I just used crosshair cursors. There are also some nasty side effects, such as also hiding half of any points right at the end or beginning of the next one. I personally don't understand why anyone would want the breaks to connect. Here's a snippet, in case it helps:

      lineBreaks.push($scope.chart.renderer.rect(x, $scope.chart.plotBox.y, 3, $scope.chart.plotBox.height, 1)
        .attr({
          class: 'highcharts-cursor-crosshair',
          stroke: '#ffffff',
          fill: '#ffffff',
          'stroke-width': 3,
          opacity: 1,
          zIndex: 100
        })
        .add());