How to change font family for React Recharts library X-axis / Y-axis ticks?

Question

My task is fairly simple: all I want to do is change the font-family to Roboto, sans-serif for the x-axis and y-axis "ticks" (ie. the values along both axes).

I can change the font size of the x-axis tick with: <XAxis tick={{ fontSize: 'sans-serif!important' }} />

But this doesn't work: <XAxis tick={{ fontFamily: 'sans-serif' }} />

The only other option I can see is to use the tickFormatter property specified in the documentation which only takes a function, see here: http://recharts.org/#/en-US/api/XAxis

In this project we are using the functional-style of programming in React using the Recompose utility library so we are rendering JSX in the "pure" function style and not with normal React classes.

This is the best guess I could come up with is:

const xAxisTickFormatter = name => {
  return <div style={{ fontFamily: 'sans-serif' }}>{name}</div>;
};

export const LineChart = ({ data, isMobile }) => {
  console.log(data);
  return (
    <C
      width={isMobile ? 400 : 650}
      height={400}
      data={data}
      margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
    >
      <XAxis
        tickFormatter={xAxisTickFormatter}
        dataKey="date"
        name="Date"
        style={{ fontFamily: 'sans-serif' }}
      />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }} />
      <Legend
        wrapperStyle={{ fontFamily: 'Roboto, sans-serif' }}
        verticalAlign="bottom"
        height={36}
      />
      <Line
        type="linear"
        dataKey="price"
        name="Price"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line
        type="linear"
        dataKey="marketAverage"
        name="Market Average"
        stroke="#82ca9d"
      />
    </C>
  );
};

This outputs [object, Object] along the x-axis, see screenshot:

The only similar official example from the docs uses the old createClass syntax here: https://jsfiddle.net/alidingling/9y9zrpjp/

Any help would be greatly appreciated as I have googled as many similar problems as possible and spent about half a day on this problem so far.

Answer 1

Why don't just set the font family and whatever else you want to overwrite via CSS?

We have something similar:

.recharts-cartesian-axis-tick {    
    font-size: 1.4rem;
    font-family: Roboto, sans-serif;
}

Answer 2

The style attribute works fine for me; in recharts 2.0.0-beta.1 at least.

<XAxis
    dataKey="date"
    style={{
        fontSize: '1rem',
        fontFamily: 'Times New Roman',
    }}
/>
<YAxis
    style={{
        fontSize: '0.8rem',
        fontFamily: 'Arial',
    }}
/>

Your tickFormatter function should return just a string, not a React Element.