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