Line width too thin along lower bound #3160
Comments
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. |
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 This seems like a real bug that merits fixing, @highslide-software. |
-5 doesn't always work for me either. I agree with Trevor - this is a real issue and should be re-opened. |
Perhaps we should adjust the clip area when we set the axis.offset option, so that in this case you could set Anyway, a more general workaround is to set the clip box's height higher by overriding Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
this.clipBox.height += 1;
}); |
^ 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:
BTW, your jsfiddle is broken - highcharts.js depends on an invalid host, presumably pointing to a host your localsubnet :) |
Sorry for that, I do that all the time... |
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. |
This fix was reverted as it broke other stuff. |
WorkaroundAnother workaround is to add the The downside is that the content isn't clipped when zooming the axes. Try to zoom in on the demo. |
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. |
Hi @trevorgehman, |
I assume you meant to tag me. I'm using the official Vue wrapper. |
@trevorgehman, I apologize for my mispelling. I have passed your issue to our Vue developer. He will contact with you as soon as possible. |
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! |
Just to followup on this, I think this solution solves this issue: |
Yes, |
Yes I think this solves my issue @pawelfus |
|
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.The text was updated successfully, but these errors were encountered: