- Position and alignment
- Legend reverse
- Legend shape
- Legend size
- Legend item size
- Legend paging
- Legend text wrap
- Legend title
- Arrow page navigation
- Legend item padding
Contact Support
Legend in React 3D Circular Chart component
19 Mar 202424 minutes to read
The legend provides information about the data points rendered in the 3D Circular Chart. It can be added by enabling the visible
option in the legendSettings
property.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true}}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
To use data label feature, we need to inject
CircularChartLegend3D
module into the services.
Position and alignment
By using the position
property, the legend can be positioned at the left
, right
, top
or bottom
of the 3D Circular Chart. By default, the legend will be positioned to the right of the 3D Circular Chart. Additionally, you can align the legend to the center
, far
or near
of the chart using the alignment
property.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, position: 'Right' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, position: 'Right' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend reverse
You can reverse the order of the legend items by using the reverse
property in legendSettings
. By default, the legend for the first series in the collection will be placed first.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, position: 'Right', reverse: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, position: 'Right', reverse: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend shape
To change the legend shape, use the legendShape
property in the series
. By default, the legend shape is set to seriesType
.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend size
The legend size can be changed by using the width
and height
properties in legendSettings
.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, width: '200px', height: '100px' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, width: '200px', height: '100px' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend item size
The size of the legend items can be customized by using the shapeHeight
and shapeWidth
properties in legendSettings
.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, shapeHeight: 2, shapeWidth: 2 }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, shapeHeight: 2, shapeWidth: 2 }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend paging
Paging will be enabled by default when the legend items exceed the legend bounds. Each legend item can be viewed by navigating between the pages using navigation buttons.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, width: '200px', height: '100px' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true, width: '200px', height: '100px' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend text wrap
When the legend text exceeds the container, the text can be wrapped using the textWrap
property in legendSettings
. End users can also wrap the legend text based on the maximumLabelWidth
property in legendSettings
.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true,maximumLabelWidth: 80, textWrap: 'Wrap' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ visible: true,maximumLabelWidth: 80, textWrap: 'Wrap' }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend title
You can set a title for the legend using the title
property in legendSettings
. The size
, color
, opacity
, fontStyle
, fontWeight
, fontFamily
, textAlignment
, and textOverflow
of the legend title can be customized using the titleStyle
property in legendSettings
.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ title: 'Legend Title', visible: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{ title: 'Legend Title', visible: true }}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Arrow page navigation
The page number will always be visible when using legend paging. However, it is now possible to disable the page number and enable page navigation with the left and right arrows. To render the arrow page navigation, set the enablePages
property to false.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{
visible: true,
width: '240px',
height: '100px',
enablePages: false,
}}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{
visible: true,
width: '240px',
height: '100px',
enablePages: false,
}}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
Legend item padding
The itemPadding
property can be used to adjust the space between the legend items.
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{
visible: true,
position: 'Bottom',
itemPadding: 40
}}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import {
CircularChart3DComponent,
CircularChart3DSeriesCollectionDirective,
CircularChart3DSeriesDirective,
PieSeries3D,
CircularChartLegend3D,
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="Legend in Circular 3D"
tilt={-45}
legendSettings={{
visible: true,
position: 'Bottom',
itemPadding: 40
}}
>
<Inject services={[PieSeries3D, CircularChartLegend3D]} />
<CircularChart3DSeriesCollectionDirective
>
<CircularChart3DSeriesDirective
dataSource={circularData}
xName="x"
yName="y"
legendShape='Rectangle'
></CircularChart3DSeriesDirective>
</CircularChart3DSeriesCollectionDirective>
</CircularChart3DComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));