I have an issue where the tooltip is displaying the same value for different series. So whenever I hover on the popover, I get the following:

Here's my implementation:

  <LineChart margin={{ top: 15, right: 5, bottom: 5, left: 10 }}>
    <XAxis
      type='number'
      dataKey='timestamp'
      padding={{ left: 30, right: 30 }}
      domain={['dataMin', 'dataMax']}
      height={90}
      tickFormatter={(unixTime) => dayjs(unixTime).format('MM/DD h:mm A')}
      tickMargin={30}
    />

    <YAxis
      dataKey='Demand'
      tickFormatter={(val, _axis) => numeral(val).format('0,0') + ' kW'}
    />

    {chartData && this.renderLines(chartData, theme)}

    <CartesianGrid strokeDasharray='3 3' />
    <Legend />
    <Tooltip
      content={<LiveDailyDemandTooltip
        format={{
        Demand: '0.0'
          }} />}
    />
  </LineChart>

Where the data looks like:

{
  "dataID-1": [
    {Demand: 4237, timestamp: 1564977600000}
    ...
  ],
  "dataID-2": [
    {Demand: 112, timestamp: 1564977600000}
    ...
  ]
}

I have an issue where the tooltip is displaying the same value for different series. So whenever I hover on the popover, I get the following:

Here's my implementation:

  <LineChart margin={{ top: 15, right: 5, bottom: 5, left: 10 }}>
    <XAxis
      type='number'
      dataKey='timestamp'
      padding={{ left: 30, right: 30 }}
      domain={['dataMin', 'dataMax']}
      height={90}
      tickFormatter={(unixTime) => dayjs(unixTime).format('MM/DD h:mm A')}
      tickMargin={30}
    />

    <YAxis
      dataKey='Demand'
      tickFormatter={(val, _axis) => numeral(val).format('0,0') + ' kW'}
    />

    {chartData && this.renderLines(chartData, theme)}

    <CartesianGrid strokeDasharray='3 3' />
    <Legend />
    <Tooltip
      content={<LiveDailyDemandTooltip
        format={{
        Demand: '0.0'
          }} />}
    />
  </LineChart>

Where the data looks like:

{
  "dataID-1": [
    {Demand: 4237, timestamp: 1564977600000}
    ...
  ],
  "dataID-2": [
    {Demand: 112, timestamp: 1564977600000}
    ...
  ]
}

• javascript
• recharts

Share Improve this question Follow asked Aug 5, 2019 at 13:43 ZoidbergZoidberg 42844 silver badges1010 bronze badges 1

• Please provide code for LiveDailyDemandTooltip ponent, and if you can, put it all in codesandbox – Ido Commented Aug 19, 2019 at 18:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

As mentioned here: https://github./recharts/recharts/issues/1625 You should set allowDuplicatedCategory to false in XAxis:

<XAxis allowDuplicatedCategory={false}/>

This will resolve the problem of duplicate value in tooltip.

I was able to resolve this by providing the data in a different format. It seems that Recharts needs to have data grouped by their X-Axis value:

[
  { timestamp: 1564977600000, Demand1: 4237, Demand2: 112 },
  ...
]