Victory: How to change font family for VictoryBar?

[pruhstal]

I'm trying to change the font family for my VictoryBar but can't quite seem to do so:

        <svg viewBox="20 30 400 300">
          <VictoryChart
            domainPadding={18}>
            <VictoryBar
              style={{
                data: {
                  width: 35,
                },
                labels: { fontFamily: "-apple-system,BlinkMacSystemFont,Segoe UI,'Rubik', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif" }
              }}
              data={data}
              x="name"
              y="amount" />
          </VictoryChart>
        </svg>

This does work fine for VictoryLegend.

Any idea why?

Thanks

[boygirl]

@pruhstal Are you trying to change the font on the axis tick labels? The styles you've changed will affect any labels directly over the bars. To change the axis tick labels you want to provide styles to your axis component like <VictoryAxis style={{ tickLabels: { fontFamily: "your-font" ..} }}

[pruhstal]

@boygirl thank you so much for the quick reply/help! That totally changed the font, however, now I lost my X axis values:

    const data = [{
      name: "Nausea",
      amount: 3
    }, {
      name: "Dizziness",
      amount: 2
    }, {
      name: "Paranoia",
      amount: 3
    }, {
      name: "Dry Eyes",
      amount: 7
    }, {
      name: "Dry Mouth",
      amount: 8
    }];

        <svg viewBox="20 30 400 300">
          <VictoryChart
            domainPadding={18}>
          <VictoryAxis
            style={{ tickLabels: { fontFamily: "-apple-system,BlinkMacSystemFont,Segoe UI,'Rubik', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif"} }} />
            <VictoryBar
              style={{
                data: {
                  width: 35,
                }
              }}
              data={data}
              x="name"
              y="amount">
            </VictoryBar>
          </VictoryChart>
        </svg>

Any way to add that back? I tried adding the dependentAxis boolean, but to no avail.

Thanks

[boygirl]

you'll need to have a <VictoryAxis/> and a <VictoryAxis dependentAxis/> When you don't specify any axes, VictoryChart will add both axes for you by default, but if you specify any, it will only use the ones you add. That's a little clunky, but it's so that people can render only one axis if they want.

[pruhstal]

Thank you @boygirl for the explanation!