reactjs - How to redraw text rendered using SVGRenderer in Highcharts React?

Question

I am using the SVGRenderer to draw the total value in the center of donut chart shown below:

The code to do this is shown below (please see CodeSandbox here)

export const PieChart = ({ title, totalLabel, pieSize, pieInnerSize, data }: PieChartProps) => {
    const chartRef = useRef(null);
    const [chartOptions, setChartOptions] = useState(initialOptions);

    useEffect(() => {
        // set options from props
        setChartOptions({...});

        // compute total
        const total = data.reduce((accumulator, currentValue) => accumulator + currentValue.y, 0);

        // render total
        const totalElement = chart.renderer.text(total, 0, 0).add();
        const totalElementBox = totalElement.getBBox();

        // Place total
        totalElement.translate(
            chart.plotLeft + (chart.plotWidth - totalElementBox.width) / 2,
            chart.plotTop + chart.plotHeight / 2
        );
        ...
    }, [title, totalLabel, pieSize, pieInnerSize, data]);

    return (
        <HighchartsReact
            highcharts={Highcharts}
            containerProps={{ style: { width: '100%', height: '100%' } }}
            options={chartOptions}
            ref={chartRef}
        />
    );
};

However this approach has two issues:

1. When chart is resized, the total stays where it is - so it is no longer centered inside the pie.

2. When the chart data is changed (using the form), the new total is drawn over the existing one.

How do I solve these issues? With React, I expect the chart to be fully re-rendered when it is resized or when the props are changed. However, with Highcharts React, the chart seems to keep internal state which is not overwritten with new props.

question from:https://stackoverflow.com/questions/65873505/how-to-redraw-text-rendered-using-svgrenderer-in-highcharts-react

Answer 1

I can suggest two options for this case:

1. Use the events.render callback, destroy and render a new label after each redraw:

Demo: https://jsfiddle.net/BlackLabel/ps97bxkg/

2. Use the events.render callback to trasnlate those labels after each redraw:

Demo: https://jsfiddle.net/BlackLabel/6kwag80z/

Render callback triggers after each chart redraw, so it is fully useful in this case - more information API: https://api.highcharts.com/highcharts/chart.events.render