Data label can be added to a chart series by enabling the visible
option in the dataLabel property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public datalabel: AccumulationDataLabelSettingsModel = { visible: true }
render() {
return <AccumulationChartComponent id='charts' enableSmartLabels='true'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'
dataLabel={this.datalabel}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Note: To use the data label feature, inject the
DataLabelmodule into theservices.
Accumulation chart provides support for placing the data label either inside or outside the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public datalabel: AccumulationDataLabelSettingsModel = { visible: true, position: 'Outside' };
render() {
return <AccumulationChartComponent id='charts' enableSmartLabels='true'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'
dataLabel={this.datalabel}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Datalabels will be arranged smartly without overlapping with each other. You can enable or disable this feature using
the enableSmartLabels property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public datalabel: AccumulationDataLabelSettingsModel = { visible: true, name: 'text', position: 'Outside' };
render() {
return <AccumulationChartComponent id='charts' enableSmartLabels='true'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y'
dataLabel={this.datalabel}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Label content can be formatted by using the template option. Inside the template, you can add the placeholder text
${point.x} and ${point.y} to display corresponding data points x & y value. Using
templateproperty, you can set data label
template in chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public template:any =this.chartTemplate;
public datalabel: AccumulationDataLabelSettingsModel = { visible: true, name: 'text', position: 'Outside', template: this.template };
public chartTemplate(args:any){
return (<div id="templateWrap">
<div>{args.point.x}</div>
<div>{args.point.y}</div>
</div>);
}
render() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Connector line will be visible when the data label is placed outside the chart.
The connector line can be customized using the type, color, width, length and dashArray properties
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public datalabel: AccumulationDataLabelSettingsModel = {
visible: true, name: 'text', position: 'Outside',
connectorStyle: {
//Length of the connector line in pixels
length: '50px',
//Width of the connector line in pixels
width: 2,
//dashArray of the connector line
dashArray: '5,3',
//Color of the connector line
color: '#f4429e',
//Specifies the type of the connector line either Line or Curve
type: 'Curve'
}
};
render() {
return <AccumulationChartComponent id='charts' enableSmartLabels='true'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));The fill color and the text in the data source can be mapped to the chart using pointColorMapping and name
properties, respectively.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationDataLabel,AccumulationDataLabelSettingsModel}
from'@syncfusion/ej2-react-charts';
import { dataMapping } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public datalabel: AccumulationDataLabelSettingsModel = { visible: true, name: 'text', position: 'Outside' };
render() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={dataMapping} xName='x' yName='y' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Individual text can be customized using the textRender event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective,AccumulationDataLabelSettingsModel,
IAccTextRenderEventArgs, AccumulationSeriesDirective, Inject, AccumulationDataLabel}
from'@syncfusion/ej2-react-charts';
import { accData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public textRender = (args: IAccTextRenderEventArgs): void => {
if (args.text === '7') {
args.color = 'red';
args.border.width = 1;
}
};
public datalabel: AccumulationDataLabelSettingsModel = { visible: true };
render() {
return <AccumulationChartComponent id='charts' enableSmartLabels='true' textRender={this.textRender}>
<Inject services={[AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={accData} xName='x' yName='y' dataLabel={this.datalabel}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));