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

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

enter image description here

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.

enter image description here

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

120 thoughts on “Show Only 2 Digits of the Years on the X-Axis of Recharts”

  1. Pingback: stromectol 800 mg
  2. Pingback: ivermectina bula
  3. Hey there I am so delighted I found your webpage, I really found you
    by mistake, while I was searching on Aol for something else,
    Anyways I am here now and would just like to say thanks a lot
    for a tremendous post and a all round enjoyable blog (I also
    love the theme/design), I don’t have time to read it all at
    the moment but I have bookmarked it and also added your RSS feeds, so when I have time I will be back to
    read a great deal more, Please do keep up the
    fantastic jo. http://herreramedical.org/acyclovir

    Reply
  4. Pingback: stromectol
  5. Pingback: viagra otc canada

Leave a Comment