As like a chart, the legend is also available for accumulation charts, which gives information about the points.
By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom,
if the height of the chart is high. Other customization features regarding the legend element are same as the
chart legend
.
Here, the legend for a point can be collapsed by giving the empty string to the x value of the point.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { visible: true };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { visible: true };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Note: To use the legends feature, inject the
AccumulationLegend
using the module into theservices
.
By using the position property, you can position the legend at the left
, right
, top
or bottom
of the chart.
You can also align the legend to center
, far
or near
of the chart using the alignment property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { position: 'Right', visible: true, height: '40', width: '160' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { position: 'Right', visible: true, height: '40', width: '160' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
You can reverse the order of the legend items by using the reverse
property. By default, legend for the first series in the collection will be placed first.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, Inject } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 'Argentina', y: 505370, r: '50%' },
{ x: 'Belgium', y: 551500, r: '70%' },
{ x: 'Cuba', y: 312685, r: '84%' },
{ x: 'Dominican Republic', y: 350000, r: '97%' },
{ x: 'Egypt', y: 301000, r: '84%' },
{ x: 'Kazakhstan', y: 300000, r: '70%' },
{ x: 'Somalia', y: 357022, r: '90%' },
];
}
render() {
return (<AccumulationChartComponent id="charts" ref={(pie) => (this.pie = pie)} legendSettings={{
visible: true,
reverse: true,
}} useGroupingSeparator={true} enableSmartLabels={true} enableAnimation={true} tooltip={{ enable: true }}>
<Inject services={[
AccumulationLegend,
PieSeries,
AccumulationDataLabel,
AccumulationTooltip,
]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data1} xName="x" yName="y" innerRadius="20%" dataLabel={{
visible: true,
position: 'Outside',
name: 'x',
}} radius="r"></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent,
AccumulationSeriesCollectionDirective,
AccumulationSeriesDirective,
AccumulationLegend,
PieSeries,
AccumulationDataLabel,
AccumulationTooltip,
Inject }
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any = [
{ x: 'Argentina', y: 505370, r: '50%' },
{ x: 'Belgium', y: 551500, r: '70%' },
{ x: 'Cuba', y: 312685, r: '84%' },
{ x: 'Dominican Republic', y: 350000, r: '97%' },
{ x: 'Egypt', y: 301000, r: '84%' },
{ x: 'Kazakhstan', y: 300000, r: '70%' },
{ x: 'Somalia', y: 357022, r: '90%' },
];
render() {
return (
<AccumulationChartComponent
id="charts"
ref={(pie) => (this.pie = pie)}
legendSettings={{
visible: true,
reverse: true,
}}
useGroupingSeparator={true}
enableSmartLabels={true}
enableAnimation={true}
tooltip={{ enable: true }}
>
<Inject
services={[
AccumulationLegend,
PieSeries,
AccumulationDataLabel,
AccumulationTooltip,
]}
/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
dataSource={this.data1
xName="x"
yName="y"
innerRadius="20%"
dataLabel={{
visible: true,
position: 'Outside',
name: 'x',
}}
radius="r"
></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
To change the legend icon shape, use the legendShape
property in the series
. By default, legend icon shape
is seriesType
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { position: 'Right', visible: true, height: '40', width: '160' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Rectangle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,
AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { position: 'Right', visible: true, height: '40', width: '160' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Rectangle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The legend size can be changed by using the width
and height
properties of the legendSettings
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { width: '150', height: '100', border: { width: 1, color: 'pink' } };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,
AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { width: '150', height: '100', border: { width: 1, color: 'pink' } };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
You can customize the size of the legend items by using the shapeHeight
and shapeWidth
properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { shapeHeight: 15, shapeWidth: 15 };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { shapeHeight: 15, shapeWidth: 15 };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view the each legend item by navigating between the pages using the navigation buttons.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { height: '150', width: '80' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { height: '150', width: '80' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' legendShape='Circle'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
When the legend text exceeds the container, the text can be wrapped by using textWrap
Property. End user can also wrap the legend text based on the maximumLabelWidth
property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { piechart } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { visible: true, position: 'Right', textWrap: 'Wrap', maximumLabelWidth: 60, height: '44%', width: '64%' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={piechart} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { piechart } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { visible:true, position:'Right', textWrap:'Wrap',maximumLabelWidth:60, height:'44%', width:'64%' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={piechart} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
You can customize the animation while clicking legend by setting enableAnimation as true or false using
enableAnimation
property in Accumulation Chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { data1 } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { height: '150', width: '80' };
this.datalabel = { visible: true,
name: 'text',
position: 'Inside',
font: {
fontWeight: '600',
color: '#ffffff'
}
};
this.tooltip = { enable: false };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} tooltip={this.tooltip} title='Project Cost Breakdown'>
<Inject services={[AccumulationLegend, AccumulationDataLabel, AccumulationTooltip]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' legendShape='Circle' dataLabel={this.datalabel} startAngle='0' endAngle='360' explode={true} explodeOffset='10%' explodeIndex={3} name='Project' radius='70%' innerRadius='40%'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,TooltipSettingsModel,AccumulationTooltip,LegendSettingsModel, AccumulationDataLabelSettingsModel,AccumulationDataLabel}
from'@syncfusion/ej2-react-charts';
import { data1 } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { height: '150', width: '80' };
public datalabel: AccumulationDataLabelSettingsModel = { visible: true,
name: 'text',
position: 'Inside',
font: {
fontWeight: '600',
color: '#ffffff'
}
};
public tooltip: TooltipSettingsModel = { enable: false };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} tooltip={this.tooltip} title='Project Cost Breakdown' >
<Inject services={[AccumulationLegend,AccumulationDataLabel,AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' legendShape='Circle' dataLabel={this.datalabel}
startAngle='0' endAngle='360' explode={true} explodeOffset='10%' explodeIndex={3} name='Project' radius='70%' innerRadius='40%'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
You can set title for legend using title
property in legendSettings
. You can also customize the fontStyle
, size
, fontWeight
, color
, textAlignment
, fontFamily
, opacity
and textOverflow
of legend title. titlePosition
is used to set the legend position in Top
, Left
and Right
position. maximumTitleWidth
is used to set the width of the legend title. By default, it will be 100px
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { title: 'Months', position: 'Bottom' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { title: 'Months', position: 'Bottom' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set false
value to enablePages
to get this support.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.legendSettings = { width: '260px', height: '50px', enablePages: false, position: 'Bottom' };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public legendSettings: LegendSettingsModel = { width: '260px', height: '50px', enablePages: false, position: 'Bottom' };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings}>
<Inject services={[AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y'></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));