reactjs - 在图例中显示标签和值：plotly.js

Question

现在我当前的图表行为是这样的

这是一个反应组件

 <PieChart
                                data={[{
                                    textinfo: "none",
                                    values: [60, 20, 10, 5, 5], labels: ['Healthy', 'Mild', 'Moderate', 'Severe', 'Critical'], hole: .6, type: 'pie', marker: {
                                        colors: ['#68B34D', '#FFDF83', '#FE9551', '#FE0801', '#B90000']
                                    }
                                }]}
                                layout={{
                                    title: { text: 'Health Status', x: '0.1', size: '14', family: 'Montserrat,  sans-serif' }, annotations: [
                                        {
                                            font: {
                                                size: 13,
                                                color: '#323D4B',
                                                family: 'Montserrat,  sans-serif'
                                            },
                                            text: `<br>Machines</b>`,
                                            showarrow: false,
                                        }
                                    ], showlegend: true,
                                    legend: {orientation:'h', x: 0.5, y: -.7, xanchor: 'center', yanchor: 'bottom', font: { family: 'Montserrat, sans- serif' } },
                                    height: 320,
                                    width: 248,
                                    margin: { l: 0, r: 0, t: 50, b: 20 },
                                }}
                            /> 

我的预期行为是，图例（饼图信息）也应该显示标签各自的值

健康：60 轻度：10

饼图代码

import createPlotlyComponent from "react-plotly.js/factory";
export const Plot = createPlotlyComponent(Plotly);

export function PieChart(props: PieChartProps) {
  const { data, layout } = props;
  return <Plot data={data} layout={layout}  />;
}