Переместить значение всплывающей подсказки при отображении в грозной победе - VictoryTooltip

Question

Я склоняюсь React и наткнулся на сайт Formidable Victory для диаграмм, который выглядит хорошо. Проблема, с которой я сталкиваюсь, заключается в том, что я использую VictoryPie, но отображаю только половину того, что у меня есть, но мне нужно расположить текст tooltip при отображении и вообще не могу его понять.

Код реакции

import React, { Component } from 'react';
import { VictoryPie, VictoryTooltip, VictoryLabel } from 'victory';

class CustomLabel extends Component {
    render() {
        const { datum } = this.props;

        return (
            <g>
                <VictoryLabel { ...this.props } />
                <VictoryTooltip
                    { ...this.props }
                    x = { 200 }
                    y = { 250 }
                    orientation = "top"
                    pointerLength = { 0 }
                    cornerRadius = { 50 }
                    flyoutWidth = { 100 }
                    flyoutHeight = { 100 }
                    flyoutStyle = { { fill: "lightblue" } }
                    text = { datum.y }                        
                />
            </g>
        );
    }
}

CustomLabel.defaultEvents = VictoryTooltip.defaultEvents;


const Graph = ({ todos }) => {
    let totalTodos = 0;
    let activeTodos = 0;
    let closedTodos = 0;
    let noTodos = 100;
    let graphData = [ ];
    let dataColor = [ ];

    if (todos !== undefined) {
        totalTodos = Object.keys(todos).length;

        todos.forEach(function(todo) {
            if (todo.active) {
                activeTodos++;
                noTodos = 0;

                return { activeTodos, noTodos };
            } else if (!todo.active) {
                closedTodos++
                noTodos = 0;

                return { closedTodos, noTodos };
            } else {
                activeTodos = 0;
                closedTodos = 0;
                noTodos = 100;

                return { closedTodos, activeTodos, noTodos };
            }
        });

        if (noTodos === 100) {
            graphData.push(
                { x: "", y: `${ noTodos }` }
            );

            dataColor.push(
                "Blue"
            );
        } else if (activeTodos > 0 && closedTodos === 0 && noTodos === 0) {
            graphData.push(
                { x: "Active", y: `${ activeTodos }` }
            );

            dataColor.push(
                "Green"
            );
        } else if (activeTodos === 0 && closedTodos > 0 && noTodos === 0) {
            graphData.push(
                { x: "Comp", y: `${ closedTodos }` }
            );

            dataColor.push(
                "Tomato"
            );
        } else if (activeTodos > 0 && closedTodos > 0 && noTodos === 0) {
            graphData.push(
                { x: "Comp", y: `${ closedTodos }` },
                { x: "Active", y: `${ activeTodos }` }
            );

            dataColor.push(
                "Tomato",
                "Green"
            );
        }
    }

    return (
        <div className="section">
            <div className="card z-depth-0">
                <div className="card-content" style={ { height: 350 + 'px' } } >
                    <span className="card-title blue-text">
                        <b>Total 'Todds': { totalTodos }</b>
                    </span>
                    <svg width="460" height="260" viewBox="99 0 200 200">
                    <VictoryPie
                    standalone={false}
                        data = { graphData }
                        colorScale = { dataColor }
                        startAngle = { 90 }
                        endAngle = { -90 }
                        labelComponent = { <CustomLabel /> }
                        labels = { ({ datum }) => `${ datum.x }`}
                        style = { { labels: { fontSize: 15, fontWeight: "bold" } } }
                        labelRadius = { ({ innerRadius }) => innerRadius + 30 }
                        innerRadius = { 50 }
                    />
                    </svg>
                </div>
            </div>
        </div>
    )
}

Мне нужно изменить значение 'X'