Skip to content
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

Line width too thin along lower bound #3160

Closed
TrevorBurnham opened this issue Jun 12, 2014 · 18 comments
Closed

Line width too thin along lower bound #3160

TrevorBurnham opened this issue Jun 12, 2014 · 18 comments

Comments

@TrevorBurnham
Copy link

@TrevorBurnham TrevorBurnham commented Jun 12, 2014

Example: http://jsfiddle.net/TrevorBurnham/zYtRS/1/

screen shot 2014-06-12 at 4 54 57 pm

Notice that the lines connecting the first few points (where the value equals the min of the y-axis) are thinner than the lines in the rest of the chart. Reproduced in both Highcharts 3.0.9 and Highcharts 4.0.1.

@ghost
Copy link

@ghost ghost commented Jun 13, 2014

This is due to the line being on the outer edge of the plot area, the default width for a line chart being 2, one of the pixels is inside the plotarea and the other is just outside of the plotarea and therefore not rendered.
A workaround would be to use yAxis: { startOnTick: false, min: -5 } this way the lower edge of the chart will shift a little down (-5 being the minimum) but the ticks will still appear like before.

@TrevorBurnham
Copy link
Author

@TrevorBurnham TrevorBurnham commented Jun 13, 2014

Thanks for the workaround, @stephanevanraes! Unfortunately, it's specific to this particular data series and not easy to generalize. For instance, this chart benefits from setting min: -5, but change that last data point from 100 to 10 and the -5 label becomes visible. Having negative numbers appear on the y-axis when there are no negative values in the series is precisely what I was trying to avoid by setting min: 0.

This seems like a real bug that merits fixing, @highslide-software.

@mattmaci
Copy link

@mattmaci mattmaci commented Dec 1, 2016

-5 doesn't always work for me either. I agree with Trevor - this is a real issue and should be re-opened.

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Dec 5, 2016

Perhaps we should adjust the clip area when we set the axis.offset option, so that in this case you could set offset: 1 to move the clipping out of the way.

Anyway, a more general workaround is to set the clip box's height higher by overriding setChartSize:

Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
	proceed.apply(this, [].slice.call(arguments, 1));
	this.clipBox.height += 1;
});

View it live.

@micapam
Copy link

@micapam micapam commented May 19, 2017

^ This worked for me @TorsteinHonsi, thanks! As I was working with percentages and had slightly thicker lines on my charts I needed to offset both top and bottom, like so:

Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
  proceed.apply(this, [].slice.call(arguments, 1));
  this.clipBox.height += 6;
  this.clipBox.y -= 3;
});

BTW, your jsfiddle is broken - highcharts.js depends on an invalid host, presumably pointing to a host your localsubnet :)

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented May 19, 2017

highcharts.js depends on an invalid host, presumably pointing to a host your localsubnet :)

Sorry for that, I do that all the time...

TorsteinHonsi added a commit that referenced this issue May 19, 2017
@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented May 19, 2017

With the commit above, all you have to do is to set the axis offset: http://jsfiddle.net/highcharts/zYtRS/8/

It will be part of the next maintenance release.

TorsteinHonsi added a commit that referenced this issue Sep 1, 2017
…oid clipping line graphs. (reverted from commit a93cef5)

Closes #7044, closes #7107.
@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Sep 1, 2017

This fix was reverted as it broke other stuff.

@TorsteinHonsi TorsteinHonsi reopened this Sep 1, 2017
@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Sep 1, 2017

Workaround

Another workaround is to add the graph to the series.markerGroup, which is not clipped, instead of the series.group: http://jsfiddle.net/highcharts/zYtRS/11/.

The downside is that the content isn't clipped when zooming the axes. Try to zoom in on the demo.

@trevorgehman
Copy link

@trevorgehman trevorgehman commented Jun 24, 2019

Any progress on fixing this issue without needing a workaround?

EDIT: I'm using the Vue wrapper so I'm not sure how to apply your suggested workaround.

@sebastianbochan
Copy link
Contributor

@sebastianbochan sebastianbochan commented Jun 25, 2019

Hi @trevorgehman,
Please let me know if you use our official Vue wrapper or something different.

@trevorgehman
Copy link

@trevorgehman trevorgehman commented Jun 25, 2019

Hi @TrevorBurnham,
Please let me know if you use our official Vue wrapper or something different.

I assume you meant to tag me. I'm using the official Vue wrapper.

@sebastianbochan
Copy link
Contributor

@sebastianbochan sebastianbochan commented Jun 26, 2019

@trevorgehman, I apologize for my mispelling.

I have passed your issue to our Vue developer. He will contact with you as soon as possible.

@Denyllon
Copy link
Contributor

@Denyllon Denyllon commented Jun 28, 2019

Hello @TrevorBurnham

I prepared the example for you, which shows how you can apply above workaround into your Vue app, so please refer to it.

Live example: https://codesandbox.io/s/highcharts-vue-demo-ygmr6

Kind regards!

@trevorgehman
Copy link

@trevorgehman trevorgehman commented Feb 9, 2020

Just to followup on this, I think this solution solves this issue:

#8235 (comment)

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented Feb 10, 2020

Yes, series.clip should resolve that issue. Is that an acceptable solution for now and should we close the ticket @TrevorBurnham @trevorgehman ?

@trevorgehman
Copy link

@trevorgehman trevorgehman commented Feb 10, 2020

Yes I think this solves my issue @pawelfus

@TrevorBurnham
Copy link
Author

@TrevorBurnham TrevorBurnham commented Feb 10, 2020

🙆‍♂ Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.