How to add text in the middle of the doughnut graph?

[vadymchornyidev]

My code:

Chart.register(ArcElement);

export type GraphCardProps = {
    yValues: string[]
    dataSets: {
        labels: string,
        xValues: number[]
    }[],
};
const DoughnutGraph = (props: GraphCardProps) => {
    return (
        <Doughnut
            className={styles["graphCard"]}
            data={{
                labels: props.yValues,
                datasets: props.dataSets.map(
                    (dataset, index) => {
                        return {
                            label: dataset.labels,
                            data: dataset.xValues,
                            backgroundColor: GraphColors,
                        };
                    }
                )
            }}
            options={{
                cutout: 28,
                aspectRatio: 460 / 292,
                interaction: {
                    mode: "index" as const,
                    intersect: false,
                },
                plugins: {
                    legend: {
                        display: true,
                        position: "right",
                        fullSize: true,
                        align: "start",
                        labels: {
                            padding: 18,
                            textAlign: "center",
                            color: "#252420",
                            pointStyle: "circle",
                            usePointStyle: true,
                        }
                    },
                    tooltip: {
                        backgroundColor: "#252420",
                        bodyColor: "#999689",
                        borderColor: "red",
                        boxPadding: 12,
                        bodySpacing: 6,
                        padding: 20,
                        titleAlign: "left",
                        titleFont: {
                            size: 14,
                            weight: "600",
                            family: "Inter",
                        },
                        bodyFont: {
                            size: 12,
                            weight: "600",
                            family: "Inter",
                        },
                    }
                },
            }}
        />
    );
};

How do I add text to the middle of the graphic?
For example, in the middle of the circle, there will be "80%"

[vadymchornyidev]

@LeeLenaleee can you help me?

[stockiNail]

@VadimChorrny I think you need a plugin to do that. There is https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel but not sure if is maintained and it works with last Chart.js version.

It could be also a good starting point for your plugin, I guess.

Another option (but not available yet) could be to use the annotation plugin (se PR chartjs/chartjs-plugin-annotation#825).

[vadymchornyidev]

@stockiNail Thanks, but https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel is not supported in the latest version.

Are there any other options on how I can do this?

[stockiNail]

see codepen: https://codepen.io/stockinail/pen/eYjRgXV

it's a prototype.

[edwandr]

It's been some time but for those like me seeing this question, it's now easily doable using chartjs-plugin-annotation : https://www.chartjs.org/chartjs-plugin-annotation/3.1.0/guide/types/doughnutLabel.html