ComposedChart w/ different tooltips per datasets

Do you want to request a feature or report a bug?

report a bug

What is the current behavior?

Currently if using a ComposedChart w/ multiple datasets the tooltip only renders one data set on hover. (IE rendering a Bar w/ 1 data set, and overlaying with a Line w/ a different dataset when hovering over any axis point the tooltip will only show the lines payload.)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

Example code

<ResponsiveContainer height={'100%'} width={'100%'}>
        <ComposedChart
          height={400}
          data={data.plot}
          barGap={2}
        >
          <CartesianGrid
            stroke="#f5f5f5"
            strokeDasharray="0"
            vertical={false}
          />
          <XAxis
            dataKey="label"
            tickSize={0}
            tickMargin={8}
          />
          <YAxis
            orientation="right"
            tickFormatter={formatter}
            width={100}
            tickSize={0}
            tickMargin={8}
            axisLine={false}
            domain={[0, maxValue]}
          />
          <Tooltip content={<CustomTooltip/>}/>
          <Bar
            dataKey="foo"
            barSize={105}
            fill="#003349"
            formatter={formatter}
            radius={[2, 2, 0, 0]}
          />
          <Line name="Selected Period" type="monotone" data={data['2018'].plot} dataKey="bar" />
        </ComposedChart>
      </ResponsiveContainer>

What is the expected behavior?

I would expect if you hover over the Bar or Line the tooltip would show that payload.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

recharts v1.5.0

[ghost]

I’m able to reproduce this bug. In my case I have

<ComposedChart>
  <Tooltip content={<MyCustomTooltip />} />
  <Line someProps={...}>
  </Line>
  <Scatter someProps={...}>
  </Scatter>
</ComposedChart>

The Scatter in the example I’m looking at has three data points.

When in MyCustomTooltip I do some logging, I find that props.payload.length is always 2, but the elements of props.payload are identical in all cases except for the leftmost dots on the line. When I hover over the three leftmost dots on the line, I see that the three datapoints from my Scatter are being included there.

I think this ticket should be reopened. @xile611 what do you think about reopening it?

[juliusdanek]

@xile611 can we reopen this? This still isn’t solved and the bug is even visible on this example. Check out the index 10000, this should show the value.