Get YAxis tick values to calculate width

[dalvarez]

I'm trying to eliminate the gap that appears between the edge of the chart and the start of the YAxis labels, indicated by this red line i drew:

I saw this as a possibility which makes sense, though still a bit of a hack to get it to work. However, since the library is calculating the actual labels for my number axis, I'm not sure how i can grab those values.

Arbitrary example:

• my data set has values ranging from 25 to 87, and my YAxis is left to calculate the domain (default is [0, 'auto']) and this results in a chart of 0 to 100. How can i grab the range that the YAxis calculates for me so i can determine the hard coded width to apply to the YAxis?

My YAxis:

        <YAxis
          axisLine={false}
          tickLine={false}
          tick={YTick}
          width={30}
        />

Custom Tick:

const YTick = (props: AxisProps) => {
  let tickValue = props.payload.value.toLocaleString();

  return (
    <Text
      {...props}
      x={props.width}
      textAnchor="end"
      verticalAnchor="end"
      fill="currentcolor"
      className="text-xs text-gray-600"
    >
      {tickValue}
    </Text>
  );
};

[ckifer]

Left offset is margin + YAxis width so make sure margin is accounted for (you have direct control over that).

You cannot (currently) easily grab the domain/range that recharts calculates for you.

In 3.0 we will expose hooks that will allow you to get this information back - for now the only thing I could suggest leads to more hacks which you may not want to rely on.

You can use the Customized component to do all sorts of crazy things and access all/most of the internal state of recharts, but this will be going away in 3.0 with hooks in its place (as its hard to document and maintain). There you have access to what the entire left offset value is. The codesandbox should show using it, but in your case you'll have to save the value in state somehow and then come back and update your axis width

Example here

[dalvarez]

Ah gotcha, thanks for the explanation, example and insight to whats coming next!

For the margin on the <YAxis /> is that an exported prop? I didnt see one in the API docs so wasn't sure.

[ckifer]

No there's no margin on YAxis itself - I just meant on the chart item. i.e. <LineChart margin={{ left: 0 }} >... - by default there is some units of margin there

[dalvarez]

understood, thanks!