How to Display Ticks and Labels for Month Numbers for 4 years in the X-Axis using Recharts

Question

I am looking for a way to display month numbers in such a way as seen below for a line chart using Recharts library:

As you can see, the chart starts with the first month of each year for 4 years of total data in the x-axis and the month increments by 2 for each year. Each year has a reference line, with the thicker stroke referenceline being the current year and month followed by future months including the next year first month as displayed.

How can I display the ticks on the x-axis along with the month numbers for each year which is denoted with the reference lines (except the beginning of the line chart should not have a reference line)? I am new to react and also to recharts so bear with me. Below is the code I have so far in the recharts components which only takes into account the year at the reference lines as a placeholder:

<ResponsiveContainer height="500px" width="99%" aspect={4}>
  <LineChart
    width={500}
    height={300}
    data={data}
    margin={{
      top: 5,
      right: 30,
      left: 20,
      bottom: 5
    }}
  >
    <CartesianGrid  
      vertical={false} 
      opacity="0.4" 
    />
    <XAxis 
      dataKey="name" 
      tickSize={4}
    />
    <YAxis 
      type="number" 
      domain={[0, 20000]} 
    />
    <Tooltip 
      content={CustomTooltip}
    />
    {on1 && 
    <Line type="monotone" 
      dataKey="cv" 
      stroke="#BE1710" 
      strokeWidth={2} 
      isAnimationActive={false} 
      dot={{r:0}} 
    />
    }

    {on2 && 
    <Line type="monotone" 
      dataKey="uv" 
      stroke="#22766F" 
      strokeWidth={2} 
      isAnimationActive={false} 
      dot={{r:0}} 
    />
    }

    {on3 &&
    <Line type="monotone" 
      dataKey="pv" 
      stroke="#0E65BC" 
      strokeWidth={2} 
      isAnimationActive={false} 
      dot={{r:0}} 
    />
    }
    <ReferenceLine 
      x="2021" 
      stroke="black" 
      strokeWidth={1}
    />
    <ReferenceLine x="2020" strokeWidth={0.5}/>
    <ReferenceLine x="2019" strokeWidth={0.5}/>
    <ReferenceLine x="2018" strokeWidth={0.5} />
  </LineChart>
</ResponsiveContainer>

Answer 1

It seems to me that you want a ReferenceLine every 12 months (or ticks), rather than a ReferenceLine on a specific year.

Assuming that your data array has one value per month of each year, you could have your LineChart this way:

export default function App() {
  return (
    <ResponsiveContainer height="500px" width="99%" aspect={4}>
      <LineChart
        width={1000}
        height={500}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5
        }}
      >
        <CartesianGrid vertical={false} opacity="0.4" />
        <XAxis
          dataKey="month"
          domain={[0, "dataMax"]}
          tickSize={4}
          interval={1}
        />
        <YAxis type="number" domain={[0, 20000]} />
        <Line
          type="monotone"
          dataKey="cv"
          stroke="#BE1710"
          strokeWidth={2}
          isAnimationActive={false}
          dot={{ r: 0 }}
        />
        <Line
          type="monotone"
          dataKey="uv"
          stroke="#22766F"
          strokeWidth={2}
          isAnimationActive={false}
          dot={{ r: 0 }}
        />
        <Line
          type="monotone"
          dataKey="pv"
          stroke="#0E65BC"
          strokeWidth={2}
          isAnimationActive={false}
          dot={{ r: 0 }}
        />
        <ReferenceLine x="0" strokeWidth={0.5} />
        <ReferenceLine x="12" strokeWidth={0.5} />
        <ReferenceLine x="24" stroke="black" strokeWidth={1} />
        <ReferenceLine x="36" strokeWidth={0.5} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Here, the ReferenceLine x 's value is hardcoded, where the value given is associated to the first month (1) of the year.

I did that assuming that your data array contained elements such as the following:

{
  month: 9,
  year: 2020,
  uv: 3490,
  pv: 4300,
  cv: 2100
}