I’m using recharts on a data viz project and I’m struggling to make the two lines align properly on my line chart.

fllow value and forecast value not aligning to the XAxis

Some things to consider:

• XAxis is a time value.
• There are two YAxis and two lines, each one representing a value.
• When hovering a value, it appears to find the equivalent value in the other line but they are not aligned to the XAxis.

Here is the code:

          <S.ResponsiveContainer>
            <LineChart>
              <CartesianGrid strokeDasharray="3 3" />

              <XAxis 
                dataKey="timestamp"
                type='number'
                domain={['dataMin', 'dataMax']}
                tickFormatter={(timestamp) => formatDate(new Date(timestamp * 1000), 'dd/MM HH:mm')}
                tickCount={25}
              />

              <YAxis
                yAxisId='1'
                dataKey='flow'
                type='number'
                tickCount={10}
              />
              
              <YAxis
                yAxisId='2'
                dataKey='forecasting'
                type='number'
                tickCount={10}
                hide={true}
              />

              <Tooltip />

              <Legend />

              {data && (
                <>
                  <Line
                    yAxisId='1'
                    orientation='right'
                    connectNulls={true}
                    key={data.series[0].name}
                    data={data.series[0].data}
                    name={data.series[0].name}
                    dataKey='flow'
                    type='monotone'
                    stroke={'#3E92CC'}
                    dot={false}
                  />

                  <Line
                    yAxisId='2'
                    connectNulls={true}
                    key={data.series[1].name}
                    data={data.series[1].data}
                    name={data.series[1].name}
                    dataKey='forecasting'
                    type='monotone'
                    stroke='#29BF12'
                    strokeDasharray='3 4 5 2'
                    dot={false}
                  />
                </>
              )}
            </LineChart>
          </S.ResponsiveContainer>

I’d appreciate any help. It seems the time values (timestamps) are correct and in many cases there are values in both lines at the same time, but the lines don’t align to the XAxis and I don’t know how to fix this.

I’m trying to get align the real value and the forecast value by using the same XAxis, both data are in the same format, where value is a float and timestamp is in seconds, following this type:

{
  id: number
  (flow || forecasting): number
  timestamp: number
}

each line gets the data from a series array, I did a map on it before but decided to abstract each line so I could try other approaches because the problem I’m struggling with was already present, the series array’s type is as follows:

[
  {
    name: string
    data: []
  },
  {
    name: string
    data: []
  }
]