Errorbar: not aligned perfectly - sometimes has 1 pixel offset

[KacperMadej]

Behaviour

Miss-aligned lines e.g. are not placed in center of linkedTo scatter markers.

Live demo with steps to reproduce

http://jsfiddle.net/zkenuwu2/
Plot lines added for reference, but also very much visible in compare to scatter markers.

Affected browser(s)

More visible in Chrome (at least for this demo).

[TorsteinHonsi]

@jon-a-nygaard Check the rounding used for the error bar stem. Error bar inherits certain features, check that the issue is fixed as high up in the inheritance chain as possible.

[jon-a-nygaard]

It also seems that the markers for the scatter series is a little bit skewed towards left.

[TorsteinHonsi]

If you remove the error bars, the scatter series markers seem to be quite well aligned to the grid lines. The grid lines are rounded to the nearest full pixel. The error bars are also rounded, but seem to be consequently 1px more to the right, so it may be that we are running Math.ceil in one place and Math.floor in another place, or Math. round/Math.ceil. Look for "crisp" in the error bar/box plot code.

[jon-a-nygaard]

@TorsteinHonsi Thanks, looking at it right now.

The scatter markers are not centered on the grid line, but starts drawing on the beginning of the grid line, which can be seen from this image. But I guess there is a logical reason for it.

[jon-a-nygaard]

Internal Note: The shapeArgs values have already been corrected for crispness, and are therefore not so good for use in calculations.
Tried to subtract the crispCorr in BoxPlotSeries.drawPoints instead of adding it. In this case it looked better, but in cases with the same chart but a different width it could look equally bad. Therefore not a solution to the issue.

[TorsteinHonsi]

Problably the crisping logic of the grid lines is also buggy, so that they are not always crisped to the closest full pixel. So a fix for this issue would require that the grid lines are fixed, which will create a lot of diffs in the visual pixel-by-pixel tests.

[KacperMadej]

+1
The issue is the same with column type series: http://jsfiddle.net/m4nwwsfo/
Pixel alignment is not the same as for gridLines of xAxis.

[ucare-wuh]

Any progress on this? I recently get the same problem.

[BrianBos]

Hey there. I've also come across this issue lately. Any progress on updating the crisping logic to fix this?

[paulo-raca]

+1, pretty annoying

[Andriy-Kulak]

If you add a pointRange: 0 and desired pointWidth to errorbar series, this seems to fix the issue per fiddle: http://jsfiddle.net/da1mpchj/1/

The workaround solution was actually provided by @paulo-raca in this ticket: #8558

[paulo-raca]

@Andriy-Kulak -- Thanks for looking into it, but that was a workaround to a different problem (The weird spacing and extra passing applied to x-axis when there is a errorbar series).

Looking at your example, it continues a little bit off-center.
E.g., examining the SVG, the first point is centered at x=5 and the first error bar is centered at x=5.5

[Andriy-Kulak]

@paulo-raca in any case this solution made my the issue much less noticeable in my chart. I attached before and after images
BEFORE:

AFTER:

[paulo-raca]

Wow, I'm puzzled.
Do you have a jsfiddle with this chart?
Thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[jedrzejruta]

unstale

[tnafele]

Other example of the issue with latest Highcharts and errorbars overlays with scatter (zoomed in):

You find the Fiddle here.

Please can you fix this bug, this issue seem to be known for a very long time.

[karolkolodziej]

Recreated with the boxplot series- demo.
Looks like the drawPoints round it quite aggressively:

highcharts/ts/Series/BoxPlot/BoxPlotSeries.ts

Lines 158 to 165 in 0457745

	width = Math.round(shapeArgs.width);
	left = Math.floor(shapeArgs.x);
	right = left + width;
	halfWidth = Math.round(width / 2);
	q1Plot = Math.floor(doQuartiles ? point.q1Plot : point.lowPlot);
	q3Plot = Math.floor(doQuartiles ? point.q3Plot : point.lowPlot);
	highPlot = Math.floor(point.highPlot);
	lowPlot = Math.floor(point.lowPlot);

[TorsteinHonsi]

I set up a systematic test with gridlines, scatter, error bars and column: https://jsfiddle.net/highcharts/w7gpLsu1/ . See the console for results. The takeaways:

• Gridlines, columns and error bars in this case are 1px wide, therefore their center positions are on a half pixel.
• They should be centered on the half pixel that is closest to the raw pixel x.
• It looks like the columns are currently the only elements with a perfect position. Grid lines and error bars do not always hit the closest half.
• The scatter points are (sometimes incorrectly) rounded to the nearest full pixel. We could consider not rounding them for some shapes, or enable the crisp option. But we don't know whether we want it to be aligned to a 1px or 2px sharp object below. Under any circumstance, by fixing the incorrect rounding, it will never be more than 0.5px off.

The conclusion is that ticks/gridlines, scatter points and error bars must all be fixed, each one independently, in order to fix this bug.