React

Search results

Legend in React Accumulation Chart component

29 Sep 2022 / 7 minutes to read

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.

Source

Preview

index.jsx

index.tsx

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 the services.

Position and Alignment

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.

Source

Preview

index.jsx

index.tsx

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"));

Legend Reverse

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.

Source

Preview

index.jsx

index.tsx

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"));

Legend Shape

To change the legend icon shape, use the legendShape property in the series. By default, legend icon shape is seriesType.

Source

Preview

index.jsx

index.tsx

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"));

Legend Size

The legend size can be changed by using the width and height properties of the legendSettings.

Source

Preview

index.jsx

index.tsx

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"));

Legend Item Size

You can customize the size of the legend items by using the shapeHeight and shapeWidth properties.

Source

Preview

index.jsx

index.tsx

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 for Legend

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.

Source

Preview

index.jsx

index.tsx

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"));

Legend Text Wrap

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.

Source

Preview

index.jsx

index.tsx

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"));

Enable Animation

You can customize the animation while clicking legend by setting enableAnimation as true or false using enableAnimation property in Accumulation Chart.

Source

Preview

index.jsx

index.tsx

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"));

Legend Title

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.

Source

Preview

index.jsx

index.tsx

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.

Source

Preview

index.jsx

index.tsx

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"));

Contents

Position and Alignment
Legend Reverse
Legend Shape
Legend Size
Legend Item Size
Paging for Legend
Legend Text Wrap
Enable Animation
Legend Title
Arrow Page Navigation

Contents

Position and Alignment
Legend Reverse
Legend Shape
Legend Size
Legend Item Size
Paging for Legend
Legend Text Wrap
Enable Animation
Legend Title
Arrow Page Navigation

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Legend in React Accumulation Chart component

Position and Alignment

Legend Reverse

Legend Shape

Legend Size

Legend Item Size

Paging for Legend

Legend Text Wrap

Enable Animation

Legend Title

Arrow Page Navigation