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.

Answer 3

CSS is the best way to go. However, there is at least one scenario where you will want to insert the font-family directly. When trying to convert your Recharts Component from SVG to PNG/JPEG, your CSS will not render the font you set.

NOTE: Your Recharts is rendered as an SVG on the screen.

In my CSS, I had 'Roboto' as my font (first image) and when I converted to PNG, my font rendered as 'Times New Roman' (second image)

To solve this, do this:

  <XAxis
    fontFamily={'Roboto, sans-serif'}
  />
  <YAxis 
    fontFamily={'Roboto, sans-serif'}
  />

Answer 4

Just add className property in parent class like in your case

<C className="fontName">

and in css

.fontName {
  font: normal normal 900 9px/12px Avenir; // font name 
  letter-spacing: -0.29px;
}

Answer 5

I had a hard time trying to change the color of ticks of axes. Actually, I had a conflict between "tick:{color...}" and "stroke" which both impact it.