XYChart yScale "zero: false" and custom glyph positioning

[mikeebee]

Hello all!

I'm new to D3 scales and Visx so I'm hoping it's something silly I'm missing. I'm having an issue correctly positioning a glyph when I change a setting on the yScale of an <XYChart />.

I used an <XYChart /> to create a simple line graph. I also added a custom <Glyph /> to add a point to the last point on the <LineSeries />.

It looks like this

So in this case, it's working perfectly. However, I would like the line on the chart to sit more in the middle. For this, I used the zero: false setting on the yScale. This affected the chart as expected, however, the custom glyph I added isn't affected by this change at all. So it looks like this...

Is this the best approach to centre the line on the chart? I would be happy for it to still appear as the first screenshot (in terms of its height), just centred more on the grid if that's easier.

If so, could someone assist me in having the chart and glyph appear as hoped? Also more than happy to hear about better alternatives.

I have a working Sandbox here on line 34 you can change zero to true to see where the glyph should sit.

The function responsible for the glyph position is called getChartPointPosition and it is in the utils file in the Sandbox.

Many thanks,
Mike

[williaster]

Hey @mikeebee 👋 thanks for checking out visx, wow your example has a lot of complex calculations trying to reverse-engineer how the chart works!

You'll be happy to know XYChart was built in a way that is pretty customizable and lets you tap directly into the chart's data + scales using simple React context (this is documented under "Advanced usage" in the docs, it's probably not very discoverable/well documented, I've been surprised people haven't tapped into it more!).

Here's a sandbox with a custom EndGlyph component to illustrate (sandbox)

Here's a copy of the code, you then just render this as a child of <XYChart /> 😎 Hope this helps!

const EndGlyph = ({ dataKey, ...circleProps }: { dataKey: string }) => {
  const { xScale, yScale, dataRegistry, colorScale, theme } = useContext(
    DataContext
  );

  // get the series data from the data context registry
  const series = dataRegistry.get(dataKey);

  // data not registered yet
  if (!series || !xScale || !yScale) return null;

  // compute the location of the point using the same scales the chart uses
  const lastDatum = series.data[series.data.length - 1];
  const scaledX = xScale(series.xAccessor(lastDatum));
  const scaledY = yScale(series.yAccessor(lastDatum));

  // bandwidths are kind of made for rects, correct circle position to
  // account for the width of the band (see d3 docs for more)
  const bandScaleOffset =
    "bandwidth" in xScale && typeof xScale.bandwidth !== "undefined"
      ? xScale.bandwidth() / 2
      : 0;

  return typeof scaledX === "number" && typeof scaledY === "number" ? (
    <circle
      cx={scaledX + bandScaleOffset}
      cy={scaledY}
      fill={colorScale(dataKey) ?? theme.gridStyles.stroke}
      r={5}
      {...circleProps}
    />
  ) : null;
};

[mikeebee]

Hi @williaster! Apologies for the delay, I got no notification about this response from Github 😞 I must need to change my settings.

Thanks so much for this, I had no idea about the context stuff, super powerful!

It turns out the markerEnd prop on <LineSeries /> was perfect for my requirements! I can't even remember where I saw this in use because I can't seem to find it in the docs.

<MarkerCircle fill="black" id="marker-1" stroke="white" size={4} strokeWidth={1} markerUnits="userSpaceOnUse" />

<LineSeries data={data} markerEnd="url(#marker-1)" />

Many thanks!