Visx: Change an Axis's label font-size

Created on 25 Jul 2017 · 6Comments · Source: airbnb/visx

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>

Source

donpinkus

All 6 comments

Hey @donpinkus, thanks for using @vx and clarifying this. You're right that the doc's aren't as clear as they could be for the various Axis* components.

In actuality the label prop may be _either_ a string or a component. If it's a string we wrap it in a default <text /> element with some pre-defined attributes, the ones you're pointing out above (see this line in the source).

I think we'd still like to clean up the label API a bit, but for a fix right now you could pass a <text /> element for label instead of a string and set your desired style attributes on it. Here is another example of this from the gallery.

williaster on 25 Jul 2017

👍1

Thanks!

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

donpinkus on 25 Jul 2017

👍1

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

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

1) 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.

2) 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 🤔

williaster on 25 Jul 2017

👍1

any luck here @donpinkus?

and @williaster I like number 2 approach as well.