Line width too thin along lower bound

[TrevorBurnham]

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

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 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]

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]

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

[TorsteinHonsi]

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 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]

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

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

[TorsteinHonsi]

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]

This fix was reverted as it broke other stuff.

[TorsteinHonsi]

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]

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]

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

[trevorgehman]

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]

@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]

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]

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

#8235 (comment)

[pawelfus]

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

[trevorgehman]

Yes I think this solves my issue @pawelfus

[TrevorBurnham]

🙆‍♂ Thanks!