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.

score 14 · Answer 1 · answered Mar 28 '20 at 07:03

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.

score 10 · Accepted Answer · answered Jun 28 '18 at 09:04

10

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;
}

answered Jun 28 '18 at 09:04

Ionut Ardelean

478
4
9

Does this also work for color? It doesn't seem to work for me – foyss Feb 10 '20 at 16:08
1

Why is overwriting standard css classes considered a good solution? This might create unwanted behavior in larger applications. The issue of @daneasterman likely stem from such a solution, hence the required !important. – tafaust Feb 27 '20 at 07:42
1

@foyss `` should work just fine. – tafaust Feb 27 '20 at 07:44
1

Since you are styling an SVG, you need to use "fill", not "color" for the text color. `` works for me. – Jason Saelhof May 05 '20 at 17:09

score 3 · Answer 3 · answered Mar 05 '20 at 21:36

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'}
  />

score 0 · Answer 4 · answered Feb 12 '21 at 13:42

0

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;
}

answered Feb 12 '21 at 13:42

Tejashree Surve

91
3

score 0 · Answer 5 · answered Aug 13 '21 at 15:44

0

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.

answered Aug 13 '21 at 15:44

aa bb

411
1
5
17

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

5 Answers5