Title and subtitle in React 3D Circular Chart component
19 Mar 202419 minutes to read
Title
The 3D Circular Chart can be given a title by using the title property to display information about the plotted data.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
legendSettings={{ visible: true, position: 'Right' }}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData: any[] = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
legendSettings={{ visible: true, position: 'Right' }}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));Title customization
The title of the 3D Circular Chart can be customized using the titleStyle property.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
titleStyle= {{fontFamily: 'Cursive', color: 'Blue', textAlignment: 'Far'}}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData: any[] = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
titleStyle= {{fontFamily: 'Cursive', color: 'Blue', textAlignment: 'Far'}}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));Subtitle
The 3D Circular Chart can be given a subtitle by using the subTitle property to display information about the plotted data.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
subTitle='Sub-title'
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData: any[] = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
subTitle='Sub-title'
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));Subtitle customization
The subtitle of the 3D Circular Chart can be customized using the subTitleStyle property.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
subTitle='Sub-title'
subTitleStyle={{fontFamily:'Cursive', fontStyle: 'Italic'}}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartDataLabel3D,
Inject,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const circularData: any[] = [
{ x: 'Chrome', y: 62.92 },
{ x: 'Internet Explorer', y: 6.12 },
{ x: 'Opera', y: 3.15 },
{ x: 'Edge', y: 5.5 },
{ x: 'Safari', y: 19.97 },
{ x: 'Others', y: 2.34 },
];
return (
<CircularChart3DComponent
id="charts"
title="Browser Market Shares in November 2023"
tilt={-45}
subTitle='Sub-title'
subTitleStyle={{fontFamily:'Cursive', fontStyle: 'Italic'}}
>
<Inject
services={[
PieSeries3D,
CircularChartDataLabel3D,
]}
/>
<CircularChart3DSeriesCollectionDirective>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
dataLabel={{
visible: true
}}
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));