[XY Chart] Rotate Annotation

[orutra11]

I have an XY Chart with a BarSeries and some Annotation/AnnotationLabel. Whenever the SVG width is less than Y I'd like the Annotation to rotate 90º, can this be done with Annotation Props? It can be done with Text Component but then it wouldn't be that useful to use the XY Chart.

[williaster]

Hey @orutra11 👋 oooO I like this chart's aesthetics 😍

I'm not 100% sure, but since you aren't using the annotation background here, you might be able to pass the Text prop for rotation via AnnotationLabel's titleProps prop which mirror TextProps exactly.

[orutra11]

@williaster thanks for your reply! it gave me a way out... actually it's subtitleProps that I have used, but reference for rotating might be off, what's the origin for the Text transform?

<AnnotationLabel subtitle={${getValue(d).toFixed(1)}} showAnchorLine={false} anchorLineStroke="none" showBackground={false} horizontalAnchor={"middle"} verticalAnchor={"middle"} subtitleProps={{ angle: 90 }} />

thanks again!

[orutra11]

hey @williaster I finally managed to fix it. I have to say it was a little bit of trial and error, but looking into textProps and useText I figured something out. It's even responsive! I'll leave it here for anyone with a similar problem.

<AnimatedAnnotation key={idx} dataKey={"distance"} datum={d} animationTrajectory="min" > <AnnotationLabel subtitle={${getValue(d).toFixed(1)}} showAnchorLine={false} anchorLineStroke="none" showBackground={false} horizontalAnchor={"middle"} verticalAnchor={"middle"} subtitleProps={{ dx: 6.5, dy: -10, verticalAnchor: "start", textAnchor: "middle", angle: 90, }} /> </AnimatedAnnotation>

[williaster]

Hey @orutra11 glad you got this working! I wanted to share an alternative approach in case you found it easier (note: there is always some tinkering with label offsets :). I think the magic of how we implemented XYChart is that you can tap into all of the data, scales, and theme using context which opens a lot of possibilities. So a "custom" label implementation using Text directly would look something like this:

const Labels = ({ dataKey }) => {
  const { xScale, yScale, dataRegistry, theme } = useContext(DataContext);
  const entry = dataRegistry.get(dataKey);
  if (!entry || !xScale || !yScale) return null;

  return entry.data.map((d) => {
    const x = xScale(entry.xAccessor(d)).valueOf(); // convert from NumberLike to number
    const y = yScale(entry.yAccessor(d)).valueOf();

    return (
      <Text
        {...theme.svgLabelSmall}
        x={x}
        dx="0.6em"
        y={y}
        dy="-0.5em"
        angle={-90}
        textAnchor="start"
        verticalAnchor="middle"
      >
        {y.toFixed(1)}
      </Text>
    );
  });
};

Here's a sandbox if you want to tinker with it.

[orutra11]

@williaster 👏 wow man! much appreciated! I'll definitely take a look at it because it opens a lot of possibilities! Thanks!

[orutra11]

@williaster 💯 definitely a much cleaner approach!

Just a quick remark: to display the data, <Text> child should be {entry.yAccessor(d).toFixed(1)} instead of {y.toFixed(1)}

Awesome help! Much appreciated!