How can I help you?
Legend in React Chart component
24 Feb 202624 minutes to read
The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style.
To get started quickly with legends in React Charts, refer to this video:
Position and alignment
By using the position property, the legend can be positioned at the left, right, top, or bottom of the chart. By default, the legend is positioned at the bottom of the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, position: 'Top' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, position: 'Top' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Custom positioning allows the legend to be placed anywhere in the chart using x and y coordinates.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = {
visible: true, position: 'Custom',
location: { x: 200, y: 40 }
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = {
visible: true, position: 'Custom',
location: { x: 200, y: 40 }
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Legend reverse
Use the reverse property to reverse the order of legend items. By default, the legend item for the first series is placed first.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
return (<ChartComponent id="charts" primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}} primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}} title="Olympic Medals" legendSettings={{
visible: true,
reverse: true
}}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName="country" yName="gold" name="Gold" type="Column"></SeriesDirective>
<SeriesDirective dataSource={data} xName="country" yName="silver" name="Silver" type="Column"></SeriesDirective>
<SeriesDirective dataSource={data} xName="country" yName="bronze" name="Bronze" type="Column"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent,
SeriesCollectionDirective,
SeriesDirective,
Inject,
Legend,
Category,
Tooltip,
ColumnSeries,
DataLabel }
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
return (
<ChartComponent
id="charts"
primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
}}
primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: { color: 'transparent' },
}}
title="Olympic Medals"
legendSettings={{
visible: true,
reverse: true
}}
>
<Inject
services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}
/>
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data}
xName="country"
yName="gold"
name="Gold"
type="Column"
></SeriesDirective>
<SeriesDirective
dataSource={data}
xName="country"
yName="silver"
name="Silver"
type="Column"
></SeriesDirective>
<SeriesDirective
dataSource={data}
xName="country"
yName="bronze"
name="Bronze"
type="Column"
></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: 'USA', gold: 50, silver: 70, bronze: 45 },
{ country: 'China', gold: 40, silver: 60, bronze: 55 },
{ country: 'Japan', gold: 70, silver: 60, bronze: 50 },
{ country: 'Australia', gold: 60, silver: 56, bronze: 40 },
{ country: 'France', gold: 50, silver: 45, bronze: 35 },
{ country: 'Germany', gold: 40, silver: 30, bronze: 22 },
{ country: 'Italy', gold: 40, silver: 35, bronze: 37 },
{ country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
];Legend alignment
Align the legend to center, far, or near using the alignment property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { position: 'Top', alignment: 'Near' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { position: 'Top', alignment: 'Near' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Customization
To change the legend icon shape, use the legendShape property in the series. By default, the legend icon shape is the seriesType.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { position: 'Top' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { position: 'Top' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver'
legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Legend size
By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size using the width and height properties of legendSettings.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, height: '100', width: '500' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, height: '100', width: '500' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver'
legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Legend item size
Customize the size of legend items using the shapeHeight and shapeWidth properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, shapeHeight: 12, shapeWidth: 12 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, shapeHeight: 12, shapeWidth: 12 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver'
legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Paging for legend
Paging is enabled automatically when legend items exceed the legend bounds. Navigate between pages using the provided navigation buttons.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
const primaryyAxis = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
const legendSettings = {
padding: 10, shapePadding: 10,
visible: true, border: {
width: 2, color: 'grey'
},
width: '200'
};
const marker1 = { visible: true, width: 10, height: 10, shape: 'Diamond' };
const marker2 = { visible: true, width: 10, height: 10, shape: 'Pentagon' };
const marker3 = { visible: true, width: 10, height: 10, shape: 'Triangle' };
const marker4 = { visible: true, width: 10, height: 10, shape: 'Circle' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2} name='December 2007' marker={marker1}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2} name='December 2008' marker={marker2}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2} name='December 2009' marker={marker3}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2} name='December 2010' marker={marker4}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
const primaryyAxis: AxisModel = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
const legendSettings: LegendSettingsModel = {
padding: 10, shapePadding: 10,
visible: true, border: {
width: 2, color: 'grey'
},
width: '200'
};
const marker1 = { visible: true, width: 10, height: 10, shape: 'Diamond' };
const marker2 = { visible: true, width: 10, height: 10, shape: 'Pentagon' };
const marker3 = { visible: true, width: 10, height: 10, shape: 'Triangle' };
const marker4 = { visible: true, width: 10, height: 10, shape: 'Circle' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2}
name='December 2007' marker={marker1} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2}
name='December 2008' marker={marker2} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2}
name='December 2009' marker={marker3} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2}
name='December 2010' marker={marker4} >
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];export let data: Object[] = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];Legend text wrap
When legend text exceeds the container, enable wrapping using the textWrap property. Wrapping can also be controlled using the maximumLabelWidth property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, position: 'Right', textWrap: 'Wrap', maximumLabelWidth: 50, };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold Medals' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver Medals' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze Medals' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, position: 'Right', textWrap:'Wrap', maximumLabelWidth:50, };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold Medals' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver Medals' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze Medals' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Legend text color
Change the legend text color by setting the color property within the textStyle of legendSettings.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, textStyle: { color: "red" } };
return (<ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>)
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category', title: 'Countries'
};
const primaryyAxis: AxisModel = {
minimum: 0, maximum: 80, interval: 20, title: 'Medals'
};
const legendSettings: LegendSettingsModel = {
visible: true, textStyle: { color: "red" }
};
return (<ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>)
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Set the label color based on series color
Set the legend label color based on the series color by using the chart’s loaded event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
// declare the series colors
let colors = ['#00BDAE', '#404041', '#357CD2'];
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, position: 'Top' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} loaded={onChartLoaded.bind(this)} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
function onChartLoaded(args) {
let chart = document.getElementById('charts');
let legendTextCol = chart.querySelectorAll('[id*="chart_legend_text_"]');
for (let i = 0; i < legendTextCol.length; i++) {
//set the color to legend label
legendTextCol[i].setAttribute('fill', colors[i]);
}
}
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, Chart, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries, ILoadedEventArgs}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
// declare the series colors
let colors: string[] = ['#00BDAE', '#404041', '#357CD2'];
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, position: 'Top' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
loaded={onChartLoaded.bind(this)}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
function onChartLoaded(args: ILoadedEventArgs) {
let chart: Chart = document.getElementById('charts');
let legendTextCol: HTMLElement = chart.querySelectorAll('[id*="chart_legend_text_"]');
for (let i = 0; i < legendTextCol.length; i++) {
//set the color to legend label
legendTextCol[i].setAttribute('fill', colors[i]);
}
}
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Series selection on legend
By default, clicking a legend item toggles the visibility of its series. To select a series through a legend click, disable toggleVisibility.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, toggleVisibility: false };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} selectionMode='Series' title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, Selection]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, toggleVisibility: false };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
selectionMode='Series'
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, Selection]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver'
legendShape='SeriesType' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Enable animation
Enable or disable animation during legend interactions by setting enableAnimation to true or false in the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection } from '@syncfusion/ej2-react-charts';
import { chartData1, chartData2, chartData3 } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', interval: 1, majorGridLines: { width: 0 } };
const primaryyAxis = { majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } };
const marker = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
const tooltip = { enable: true };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medal Counts - RIO' enableAnimation={true} tooltip={tooltip}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, Selection]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData1} xName='x' yName='y' name='Gold' marker={marker} type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={chartData2} xName='x' yName='y' name='Silver' marker={marker} type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={chartData3} xName='x' yName='y' name='Bronze' marker={marker} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,TooltipSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { chartData1, chartData2, chartData3 } from './datasource';
function App() {
const primaryxAxis: AxisModel = {valueType: 'Category', interval: 1, majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent'}};
const marker = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
const tooltip: TooltipSettingsModel = { enable: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Olympic Medal Counts - RIO'
enableAnimation={true}
tooltip={tooltip}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, Selection]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData1} xName='x' yName='y' name='Gold'
marker={marker} type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={chartData2} xName='x' yName='y' name='Silver'
marker={marker} type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={chartData3} xName='x' yName='y' name='Bronze'
marker={marker} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let chartData1 = [
{ x: 'USA', y: 46 },
{ x: 'GBR', y: 27 },
{ x: 'CHN', y: 26 }
];
export let chartData2 = [
{ x: 'USA', y: 37 },
{ x: 'GBR', y: 23 },
{ x: 'CHN', y: 18 }
];
export let chartData3 = [
{ x: 'USA', y: 38 },
{ x: 'GBR', y: 17 },
{ x: 'CHN', y: 26 }
];export let chartData1: Object[] = [
{ x: 'USA', y: 46 },
{ x: 'GBR', y: 27 },
{ x: 'CHN', y: 26 }
];
export let chartData2: Object[] = [
{ x: 'USA', y: 37 },
{ x: 'GBR', y: 23 },
{ x: 'CHN', y: 18 }
];
export let chartData3: Object[] = [
{ x: 'USA', y: 38 },
{ x: 'GBR', y: 17 },
{ x: 'CHN', y: 26 }
];Collapsing legend item
By default, the series name is displayed as a legend item. To omit a legend item for a particular series, set the series name to an empty string.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = { visible: true, toggleVisibility: true };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = { visible: true, toggleVisibility: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Legend title
Set a title for the legend using the title property in legendSettings. The title can be customized using fontStyle, size, fontWeight, color, textAlignment, fontFamily, opacity, and textOverflow. Use titlePosition to place the title at Top, Left, or Right. The maximumTitleWidth property sets the width of the legend title and defaults to 100px.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category'
};
const primaryyAxis = {
minimum: 0, maximum: 80, interval: 20, title: 'Medals'
};
const legendSettings = {
visible: true, title: 'Countries'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' type='Column' name='December 2007'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column' name='December 2008'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' type='Column' name='December 2009'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category'
};
const primaryyAxis: AxisModel = {
minimum: 0, maximum: 80, interval: 20, title: 'Medals'
};
const legendSettings: LegendSettingsModel = {
visible: true, title: 'Countries'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' type='Column'
name='December 2007'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'
name='December 2008'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' type='Column'
name='December 2009'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Arrow page navigation
When legend paging is enabled, page numbers are shown by default. To display only left and right arrows for navigation, set enablePages to false.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
const primaryyAxis = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
const legendSettings = {
width: '180', enablePages: false
};
const marker1 = { visible: true, width: 10, height: 10, shape: 'Diamond' };
const marker2 = { visible: true, width: 10, height: 10, shape: 'Pentagon' };
const marker3 = { visible: true, width: 10, height: 10, shape: 'Triangle' };
const marker4 = { visible: true, width: 10, height: 10, shape: 'Circle' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} legendSettings={legendSettings} title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2} name='December 2007' marker={marker1}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2} name='December 2008' marker={marker2}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2} name='December 2009' marker={marker3}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2} name='December 2010' marker={marker4}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
const primaryyAxis: AxisModel = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
const legendSettings: LegendSettingsModel = {
width: '180', enablePages: false
};
const marker1 = { visible: true, width: 10, height: 10, shape: 'Diamond' };
const marker2 = { visible: true, width: 10, height: 10, shape: 'Pentagon' };
const marker3 = { visible: true, width: 10, height: 10, shape: 'Triangle' };
const marker4 = { visible: true, width: 10, height: 10, shape: 'Circle' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2}
name='December 2007' marker={marker1} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2}
name='December 2008' marker={marker2} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2}
name='December 2009' marker={marker3} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2}
name='December 2010' marker={marker4} >
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];export let data: Object[] = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];Legend item padding
Use the itemPadding property to adjust the spacing between legend items.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
class App extends React.Component {
primaryxAxis = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
primaryyAxis = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
legendSettings = {
width: '180', enablePages: false
};
marker1 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Diamond', itemPadding: 30 };
marker2 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Pentagon', itemPadding: 30 };
marker3 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Triangle', itemPadding: 30 };
marker4 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Circle', itemPadding: 30 };
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} legendSettings={this.legendSettings} title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2} name='December 2007' marker={this.marker1}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2} name='December 2008' marker={this.marker2}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2} name='December 2009' marker={this.marker3}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2} name='December 2010' marker={this.marker4}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,LegendSettingsModel,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = {
title: 'Countries', valueType: 'Category', interval: 1,
labelIntersectAction: 'Rotate45'
};
public primaryyAxis: AxisModel = {
title: 'Penetration (%)', rangePadding: 'None', labelFormat: '{value}%',
minimum: 0, maximum: 90
};
public legendSettings: LegendSettingsModel = {
width: '180', enablePages: false
};
public marker1 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Diamond', itemPadding: 30 };
public marker2 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Pentagon', itemPadding: 30 };
public marker3 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Triangle', itemPadding: 30 };
public marker4 = { visible: true, width: 10, height: 10, position: "Bottom", shape: 'Circle', itemPadding: 30 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
legendSettings={this.legendSettings}
title='Olympic Medals'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' width={2}
name='December 2007' marker={this.marker1} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' width={2}
name='December 2008' marker={this.marker2} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' type='Line' width={2}
name='December 2009' marker={this.marker3} >
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y3' type='Line' width={2}
name='December 2010' marker={this.marker4} >
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];export let data: Object[] = [
{ x: 'WW', y: 12, y1: 22, y2: 38.3, y3: 50 },
{ x: 'EU', y: 9.9, y1: 26, y2: 45.2, y3: 63.6 },
{ x: 'APAC', y: 4.4, y1: 9.3, y2: 18.2, y3: 20.9 },
{ x: 'LATAM', y: 6.4, y1: 28, y2: 46.7, y3: 65.1 },
{ x: 'MEA', y: 30, y1: 45.7, y2: 61.5, y3: 73 },
{ x: 'NA', y: 25.3, y1: 35.9, y2: 64, y3: 81.4 }
];Legend layout
The layout property in legendSettings displays the legend horizontally or vertically. By default, layout is set to Auto. The maximumColumns property defines the maximum number of columns that can be displayed within the available space when using auto layout. Enabling the fixedWidth property ensures that all legend items have equal widths, determined by the maximum item width.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ColumnSeries } from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
title: 'Countries'
};
const primaryyAxis = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const legendSettings = {
visible: true,
layout: "Auto",
maximumColumns: 3,
fixedWidth: true
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Ruby' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Platinum' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Diamond' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, LegendSettingsModel, Legend, Category, ColumnSeries } from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
title: 'Countries'
};
const primaryyAxis: AxisModel = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const legendSettings: LegendSettingsModel = {
visible: true,
layout: "Auto",
maximumColumns: 3,
fixedWidth: true
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
legendSettings={legendSettings}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Silver' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Ruby' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' name='Platinum' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Diamond' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Note: To use legend features, inject the
Legendmodule into theservices.