Center label in React Accumulation chart component

24 Mar 20237 minutes to read

Center label

Using centerLabel it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the text property in the centerLabel.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';
function App() {
    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Browsers Statistics'}}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective}from'@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';

function App() {

    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Browsers Statistics'}}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Hover text

The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the hoverTextFormat property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';
function App() {
    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Browsers Statistics', hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'}}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective}from'@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';

function App() {

    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Browsers Statistics', hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'}}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Customization

Customize the center label text using the textStyle property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';
function App() {
    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Mobile<br>Browsers<br>Statistics',
    hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
    textStyle:{ fontWeight: '900',
    size: '15px',
    color: 'grey',
    fontFamily: 'Roboto',
    fontStyle: 'Italic'}
   }}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective}from'@syncfusion/ej2-react-charts';
import { centerData } from 'datasource.ts';

function App() {

    return <AccumulationChartComponent id='charts' centerLabel={{text : 'Mobile<br>Browsers<br>Statistics',
    hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
    textStyle:{ fontWeight: '900',
                size: '15px',
                color: 'grey',
                fontFamily: 'Roboto',
                fontStyle: 'Italic'}}}>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={centerData} xName='x' yName='y' innerRadius='65%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));