Custom component in Victory Label

[lokeshwarobuli]

How to include any third party components from design libraries such as material, Ant, Mantine in place of Victory Label component. I tried the following and it is not rendering

<VictoryLegend
          orientation="horizontal"
          centerTitle
          itemsPerRow={4}
          rowGutter={{ top: 0, bottom: -15 }}
          labelComponent={
            <VictoryLabel
              backgroundComponent={(<Badge />) as React.ReactElement}
            />
          }
          data={cumulativeFlowAggregatedData.reverse().map((object) => {
            return { name: object.title, symbol: { fill: object.color, type: 'square' }, labels: {} };
          })}
        />

Where my backgroundComponent is a badge from mantine library. Please help

Thanks in Advance

[net-illia-stetsenko]

Rather interesting topic because I am also interested in using third party components from design libraries as custom Label component. Unfortunately, it just doesn't work and it is really sad to look your question without any answers or propositions.
if this comment will reach you, please tell me if you somehow fixed this problem. Will be glad for any info!

[carbonrobot]

Victory renders everything inside an SVG tag, so its not possible to render an HTML element directly inside of it.

Instead, you would need to use the HTML foreignObject element

// props contains a text function to get the label text
const SvgWithForeignObject = (props) => {
  const { text } = props;
  return (
    <foreignObject width="400" height="400">
      <div>{text()}</div>
    </foreignObject>
  );
};

<VictoryScatter
  labelComponent={<SvgWithForeignObject />}
/>

Relevant MDN docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject