Show Only 2 Digits of the Years on the X-Axis of Recharts

January 27, 2021 by admin

In my Recharts plot of data containing date strings, the X-axis looks pretty messy.

Is it possible to configure Recharts to label the axis with only the last 2 digit of the years? For example, 17, 18, 19, 20 without repeating the label for each year.

import { ResponsiveContainer, LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';


export function Chart() {

    const d = [
        {date: '2017-02-01', price: 231},
        {date: '2017-04-01', price: 453},
        {date: '2017-16-01', price: 123},
        {date: '2018-01-01', price: 234},
        {date: '2018-04-01', price: 958},
        {date: '2018-11-01', price: 163},
        {date: '2019-03-01', price: 293},
        {date: '2019-10-01', price: 471},
        {date: '2020-07-01', price: 881},
        {date: '2020-09-01', price: 122},
    ]

    return (
        <ResponsiveContainer width="100%" height={400}>
            <LineChart data={d}>
                <Line type="monotone" dataKey="price" stroke="#8884d8" />
                <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
                <XAxis dataKey="date" />
                <YAxis dataKey="price" />
                <Tooltip />
            </LineChart>
        </ResponsiveContainer>
    )
}

Additional Problem: Using Bas van der Linden’s approach, the resulting chart is really close to what we need! But the data points are not positioned properly along the X-axis.

This become more obvious if we use the d array below. In the resulting chart, you can see that the data points in the year 2018 take up much more space on the X axis that the data points in the years 2017, 2019 and 2020 combined. It will be better if the space between the tick labels 17 and 18 are similar in length as the space between the tick labels 18 and 19.

    const d = [
        { date: "2017-02-01", price: 231, year: '17' },
        { date: "2017-04-01", price: 453 },
        { date: "2017-16-01", price: 123 }, 

        { date: "2018-01-01", price: 234 },
        { date: "2018-04-01", price: 958 },
        { date: "2018-11-01", price: 163 },
        { date: "2018-11-02", price: 163 },
        { date: "2018-11-03", price: 163 },
        { date: "2018-11-06", price: 163 },
        { date: "2018-11-05", price: 163 },
        { date: "2018-11-07", price: 163 },
        { date: "2018-11-08", price: 163 },
        { date: "2018-11-09", price: 163 },
        { date: "2018-11-00", price: 163 },
        { date: "2018-11-11", price: 163 },
        { date: "2018-11-12", price: 163 },
        { date: "2018-11-13", price: 163 },
        { date: "2018-11-14", price: 163 },
        { date: "2018-11-15", price: 163 },
        { date: "2018-11-16", price: 163 },
        { date: "2018-11-17", price: 163 },

        { date: "2019-03-01", price: 293 },
        { date: "2019-10-01", price: 471 },
        { date: "2020-07-01", price: 881 },
        { date: "2020-09-01", price: 122 }
      ];