Search code examples
javascripthtmlnode.jsreactjsreact-chartjs-2

CenterText in doughnut in react

centerText: {
    display: true,
    text: `${income}`,
    fontSize : 10
}

I'm not able to see center text using about code in option of doughnut chart. Anyone know why?

Thank you in advance

Solution

  • It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.

    <div style={{ width: '200px', height: '200px', position: 'relative'}}>
    <Doughnut data={data} options={options} width={200} height={200}/>
        <div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px',  lineHeight: '20px'}}>
            <span>Text here</span> //may use text-align here to center text
        </div>
        </div>