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.

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

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

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

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

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

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]

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]

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.

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