New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Points should not connect at breaks #5045

Closed
moses-seeq opened this Issue Feb 16, 2016 · 7 comments

Comments

Projects
None yet
3 participants
@moses-seeq

moses-seeq commented Feb 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Feb 16, 2016

Collaborator

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

Collaborator

jon-a-nygaard commented Feb 16, 2016

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

@moses-seeq

This comment has been minimized.

Show comment
Hide comment
@moses-seeq

moses-seeq Feb 16, 2016

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 commented Feb 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@moses-seeq

moses-seeq Feb 17, 2016

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.

moses-seeq commented Feb 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Feb 18, 2016

Collaborator

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.

Collaborator

jon-a-nygaard commented Feb 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@moses-seeq

moses-seeq Feb 18, 2016

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.

moses-seeq commented Feb 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@pldilley

pldilley Apr 13, 2017

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?

pldilley commented Apr 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@moses-seeq

moses-seeq Apr 13, 2017

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());

moses-seeq commented Apr 13, 2017

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());

TorsteinHonsi added a commit that referenced this issue Apr 20, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment