Change an Axis's label font-size

How can you change an Axis’s label font-size?

According to the docs (https://github.com/hshoff/vx/tree/master/packages/vx-axis), the “label” attribute is a string value.

When the label is rendered, the <text> element has several attributes that I haven’t specified:

Code to produce the Axis:

<AxisBottom
        left={50}
        scale={xAxisScale}
        top={yMax + margin.top}
        stroke='gray'
        tickStroke='gray'
        label="My Amazing Customized Label!"
        tickLabelComponent={(
          <text
            fill='gray'
            fontSize={11}
            textAnchor="middle"
          />
        )}
      />

(as an aside, tickLabelComponent isn’t mentioned in Axis’s docs either, I just saw it in an example)

Rendered label SVG:

<text 
  text-anchor="middle" 
  font-family="Arial" 
  font-size="10"
  fill="black" 
  x="575" 
  y="37">
  My Amazing Customized Label!
</text>

[williaster]

thanks 😃 If in doing so you have thoughts / comments on the api let us know. I’ve thought about:

1. keep it as is with different behavior for a string vs a component.

2. we could make this more clear by adopting the labelComponent prop name of the lower-level Axis component that AxisTop/Right/Bottom/Left wrap. that means if you pass a string we render is as-is and makes it harder to simply pass in a string and get some styles like you do now.

3. you could make this two props: label that is only a string and labelComponent which specifies the component to use to wrap it.

none of these let you easily tweak a single value like font-size without specifying all of the other styles on the component. I’d probably vote for 2 and fix this issue with a better Label or Text component that would add default styles for you and let you override one or all of them easily 🤔

[donpinkus]

Thanks!

Trying now, will post updated code (to serve as a reference until docs are updated) then will close.