渐变栏填充自定义工具提示

Question

我想在自定义工具提示中显示条形的不同填充颜色。这适用于实心填充，但不适用于渐变...

我使用工具提示content属性，其中color道具可用。在实心填充上，颜色是有效的十六进制颜色值（例如{{1}）。但是在渐变填充中，我具有SVG渐变定义的ID（例如#ff3300）。

如您所见，我想使用url(#xxx123)为条形标签/值前面的小div上色。但是我得到的颜色值无效...

我该如何实现？

Chrome检查器

图表

background-color

CustomToolTip

<ComposedChart data={data}>
    {createGradientForBars(id, bars)}
    {showLegend && (
        <Legend
            verticalAlign="top"
            align="right"
            wrapperStyle={styles.wrapperStyles}
            formatter={renderLegend}
        />
    )}
    <CartesianGrid stroke={gridStroke} strokeDasharray="3" />
    <XAxis dataKey={ChartDataKeys.Date} tickFormatter={tickFormatter} />
    <YAxis />
    <Tooltip isAnimationActive={false} content={<CustomToolTip />} />
    {bars.map((bar: BarConfiguration) => (
        <Bar
            key={bar.key}
            dataKey={bar.key}
            stackId={id}
            barSize={20}
            fill={getBarColorFill(id, bar)}
            isAnimationActive={false}
        />
    ))}
</ComposedChart>

styled.ts（样式化组件）

export function CustomToolTip(props: TooltipProps): ReactElement {
    const { label: date, payload } = props

    return (
        <ToolTipContainer>
            <Typography variant="subtitle1">{moment(date).format('DD MMM YYYY')}</Typography>
            {payload &&
                payload.length > 0 &&
                payload.map(item => {
                    const { name, value, color } = item
                    const translated = i18n.t(`charts.legend.${name.toLowerCase()}`)
                    return (
                        item &&
                        value > 0 && (
                            <Grid key={`${translated}-${value}`} container spacing={4}>
                                <Grid item>
                                    <ColoredBox color={color} />
                                </Grid>
                                <Grid item>
                                    <ToolTipItem color={color} display="inline" variant="body2">
                                        {translated}
                                    </ToolTipItem>
                                </Grid>
                                <Grid item>
                                    <Typography display="inline" variant="body2">
                                        {value}
                                    </Typography>
                                </Grid>
                            </Grid>
                        )
                    )
                })}
        </ToolTipContainer>
    )
}