XAxis allowDuplicatedCategory={false} disables BarChart custom tooltip.

[igloo1505]

The issue which is not created via https://recharts.github.io/recharts-issue-helper will be closed immediately.

---

注意：不是用 https://recharts.github.io/recharts-issue-helper 创建的 issue 会被立即关闭。

The allowDuplicatedCategory prop, if set to false on the <XAxis/> component disables the tooltip somehow. It still sends a state update to the tooltip component, but the payload property is always an empty array. Wasn't a huge deal breaker for my own application, but thought I'd leave this here for whoever comes across a solution...

const CustomToolTip = ({ active, payload, label }: {
    payload?: {
        payload: {
            name: string
            rating: number
        }
        value: number
    }[]
    label: string
    active: boolean
}) => {
    if (active && payload && payload.length) {
        let hint = getItemHint(label)
        return (
            <div className={"flex flex-col justify-center items-center bg-muted text-muted-foreground p-3 text-sm rounded-md border border-border"}>
                <p className="label">{`${label} : ${payload[0].value} / 10`}</p>
                {hint && <p className="intro">{hint}</p>}
            </div>
        )
    } else {
        return null
    }
}

const HealthReportSummaryBarPlot = ({ report }: HealthReportSummaryBarPlotProps) => {
    const data = useMemo(() => getFormattedReportData(report), [report])
    console.log("data: ", data)
    return (
        <ResponsiveContainer
            width="100%"
            height={250}
        >
            <BarChart
                data={data}
                margin={{ top: 20, right: 0, left: 0, bottom: 20 }}
            >
                <XAxis
                    type="category"
                    dataKey="name"
                /* allowDuplicatedCategory={false} */
                />
                <YAxis
                    range={[0, 10]}
                    domain={[0, 10]}
                    tickCount={3}
                />
                <Tooltip
                    content={
                        /* @ts-ignore */
                        <CustomToolTip />
                    }
                />
                <Bar
                    dataKey="rating"
                    fill="hsl(var(--primary))"
                /* label={false} */
                />
            </BarChart>
        </ResponsiveContainer>
    )
}

[ckifer]

reproduced here

[sream]

Facing the same issue with the LineChart. By not passing allowDuplicatedCategory={false} the Line doesn't draw fully, but if I pass it I'm missing 80% of Tooltips.

[ckifer]

@sream can you make a reproduction? Where the above doesn't affect the data, its more important when it does

[sream]

@ckifer During the creation of the reproduction I've noticed that I've passed the series directly to the LineChart data property and also rendering Lines with it. The weird part is that it even with this obvious misconfiguration it managed to show two tooltips correct but the rest was hidden. Could be connected to the issue mentioned above.

[ckifer]

I've passed the series directly to the LineChart data property and also rendering Lines with it.

This is the correct way to configure things unless I'm misunderstanding what you're saying

Heres a blank linechart sandbox

[sream]

I've passed the series directly to the LineChart data property and also rendering Lines with it.

This is the correct way to configure things unless I'm misunderstanding what you're saying

Here's the completed misconfigured reproduction: CodeSandbox

Maybe it's mentioned somewhere inside the documentation. It would be better if there is a warning of some sort for the developer since the library is built super reusable mistakes like this surely can happen during the initial getting to know.

[ckifer]

I see. Generally, everything is easier when all your data for the chart is in one array. In this case you have specific series which rely on different dataset causing the need to specify data on child components. In general, when you do that you need to remove data from the top level component (but it isn't a rule). The docs and the code can be more clear about this. But yeah, with configurability comes tradeoffs like this being difficult to communicate/manage