在 Kendo-react-UI 中使用 ReactJs 在 Donut 的孔中添加文本

Question

How should we inset text in the hole of donut charts using reactJs in Kendo-react-charts. In documentation its shown but it isn't working in reality. Documentation link: https://www.telerik.com/kendo-react-ui/components/charts/series-types/donut/#toc-using-drawing-visuals

my code:

import React, { Component } from 'react';
import 'hammerjs';
import { Chart, ChartLegend, ChartSeries, ChartSeriesItem, ChartSeriesLabels } from '@progress/kendo-react-charts';

const donutCenterRenderer = () => (<span>22.5%</span>);
const labelContent = (e) => (e.category);

class Donut extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <div className = "container">
                <Chart seriesColors={['#050594', '#0E0EC3', '#4343DD', '#8181D9', '#B4B4E1', 'white']}>
                    <ChartSeries SeriesLabelsPosition = "center">
                        <ChartSeriesItem type = "donut" data = {this.props.data} categoryField = "kind" field = "share" holeSize={50}>
                        </ChartSeriesItem>
                    </ChartSeries>
                    <ChartLegend visible = {true} labels = "black" position = "bottom"/>
                </Chart>
                <h5>Donut chart</h5>
            </div>
        );
    }
}

export default Donut;

and the data passed as props:

data: [ {
                "kind": "Hydroelectric", "share": 0.175,
            }, {
                "kind": "Nuclear", "share": 0.238
            }, {
                "kind": "Coal", "share": 0.118
            }, {
                "kind": "Solar", "share": 0.052
            }, {
                "kind": "Wind", "share": 0.225
            }, {
                "kind": "Other", "share": 0.192
            } ]

Answer 1

The Chart have property called donutCenterRender that can be used for placing something into the center of the chart. Here is basic usage:

<Chart 
     donutCenterRender = {() => (<span>something here</span>)}
     ...additional properties 
>
    ...child configuration
</Chart>

You may also find this issue in the official KendoReact repository with further discussion and samples.

I see that you have defined the donutCenterRenderer , but it is not used anywhere in your sample.

Answer 2

use kendoChartDonutCenterTemplate to add text to center of donut chart

<ng-template kendoChartDonutCenterTemplate>
       <h3>99%</h3>
        Accepted
 </ng-template>