Visx: Lines not using crispEdges show up fuzzy on non-retina screens

[kmiyashiro]

I'm using a windows machine to develop and I noticed that the lines in vx were fuzzy. I found this explanation, which seems to be correct.

Expand images to see sharpness of bottom axis:

Current

With shape-rendering="crispEdges" on line or parent g

Would you be open to adding shape-rendering="crispEdges" for lines? The only downside to using crispEdges is that it produces sharp edges even for rounded objects. The Line and Axis components currently don't make rounded shapes, so I think adding it to those will be safe at least.

[williaster]

This seems like a reasonable change to me, happy to review a PR!

[ArvinH]

Hi, may I work on this one? trying to get to know more about this tool :)

[kmiyashiro]

Hey @ArvinH (and @williaster) I actually just worked on this last night, you can review the PR here: https://github.com/airbnb/visx/pull/840

[kmiyashiro]

Fixed in #840

[jbanulso]

Hi, this change introduced in #840 is causing dotted lines not to be displayed. I achieve the dotted line effect with a rounded line cap (stroke-linecap: round), which is the CSS property that causes the problem. An example of how I'm implementing the lines:

import { Line as VxLine } from '@visx/shape';

const Line = styled(VxLine)`
  stroke: black;
  stroke-linecap: round;
  stroke-dasharray: 0, 2;
  stroke-dashoffset: 1;
`;

return <Line from={{ x: x1, y: y1 }} to={{ x: x2, y: y2 }} />

It seems like it is a browser rendering issue though - I've tested both in Chrome and Firefox and the lines are displayed when increasing/decreasing the zoom level, which leads me to think that there is some sort of bug on the implementation of the sharp-rendering attribute.

I can make the lines be displayed with stroke-linecap: square, but then the dotted effect is not the desired one. Would you consider reverting (or reworking) this change, as it introduces an unwanted behaviour?

EDIT: manually manipulating the decimals in x and y to "fit" the half-pixel position is not an option, since the coordinates (in my case) are dynamic.

[hshoff]

Hi @jbanulso, for now the work around would be to set shape-rendering: auto; on the line. This resets shape-rendering to the default value by overriding the previous value.

<Line
  from={{ x: x1, y: y1 }}
  to={{ x: x2, y: y2 }}
+ shapeRendering="auto"
/>

[jbanulso]

Hi @hshoff, that will do it, thank you for the quick answer. And thank you for the great work with this library, it's great to see the progress over the last years 🚀