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

Open
TrevorBurnham opened this Issue Jun 12, 2014 · 9 comments

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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.

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

This comment has been minimized.

Show comment
Hide comment
@TrevorBurnham

TrevorBurnham 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.

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

This comment has been minimized.

Show comment
Hide comment
@mattmaci

mattmaci 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.

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Dec 5, 2016

Collaborator

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.

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@micapam

micapam 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 :)

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 19, 2017

Collaborator

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

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

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 19, 2017

Collaborator

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.

Collaborator

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

Fixed #3160, let the `xAxis.offset` option modify the clip area to av…
…oid clipping line graphs. (reverted from commit a93cef5)

Closes #7044, closes #7107.
@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 1, 2017

Collaborator

This fix was reverted as it broke other stuff.

Collaborator

TorsteinHonsi commented Sep 1, 2017

This fix was reverted as it broke other stuff.

@TorsteinHonsi TorsteinHonsi reopened this Sep 1, 2017

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 1, 2017

Collaborator

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.

Collaborator

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.

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