Data label can be added to a chart series by enabling the visible
option in the dataLabel. By default, the labels will arrange smartly without overlapping.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'DateTime' };
this.marker = {
visible: true,
height: 10, width: 10,
shape: 'Pentagon',
dataLabel: { visible: true }
};
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'DateTime' };
public marker = {
visible: true,
height: 10, width: 10,
shape: 'Pentagon',
dataLabel: { visible: true }
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Note: To use data label feature, we need to inject DataLabel
module into the services
.
Using position
property, you can place the label either
on Top
, Middle
,Bottom
or Outer
(outer is applicable for column and bar type series).
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { title: 'Months', valueType: 'Category' };
this.marker = { dataLabel: { visible: true, position: 'Middle' } };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Months', valueType: 'Category' };
public marker = { dataLabel: { visible: true, position: 'Middle' } };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Note: The position Outer
is applicable for column and bar type series.
Label content can be formatted by using the template option. Inside the template, you can add the placeholder
text ${point.x}
and ${point.x}
to display corresponding data points x & y value. Using
template
property, you can set data label template in chart.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { title: 'Months', valueType: 'Category' };
this.template = this.chartTemplate;
this.marker = { dataLabel: { visible: true, position: 'Middle', template: this.template } };
}
chartTemplate(args) {
return (<div id="templateWrap" style={{ border: '1px solid black', backgroundColor: 'red', padding: '3px 3px 3px 3px' }}>
<div>{args.point.x}</div>
<div>{args.point.y}</div>
</div>);
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
{
% endraw % ;
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Months', valueType: 'Category' };
public template:any =this.chartTemplate;
public marker = { dataLabel: { visible: true, position: 'Middle', template: this.template } };
public chartTemplate(args:any){
return (<div id="templateWrap" style={{ border:'1px solid black', backgroundColor:'red', padding:'3px 3px 3px 3px'}}>
<div>{args.point.x}</div>
<div>{args.point.y}</div>
</div>);
}
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
{% endraw %}
Text from the data source can be mapped using name
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 { mapData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category' };
this.marker = { dataLabel: { visible: true, name: 'text' } };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={mapData} xName='x' yName='y' type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { mapData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category' };
public marker = { dataLabel: { visible: true, name: 'text' } };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={mapData} xName='x' yName='y'
type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
margin
for data label can be applied to using left
, right
, bottom
and top
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 { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category' };
this.marker = {
dataLabel: {
visible: true, border: { width: 1, color: 'red' },
margin: {
left: 5,
right: 5,
top: 5,
bottom: 5
}
}
};
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category' };
public marker = {
dataLabel: {
visible: true, border: { width: 1, color: 'red' },
margin: {
left: 5,
right: 5,
top: 5,
bottom: 5
}
}
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold'
type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Using angle
property, you can rotate the data label by its given angle.
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 { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category' };
this.marker = {
//Data label angle as 45
dataLabel: {
visible: true, border: { width: 1, color: 'red' },
margin: {
left: 5,
right: 5,
top: 5,
bottom: 5
}, angle: 45, enableRotation: true
}
};
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category' };
public marker = {
//Data label angle as 45
dataLabel: {
visible: true, border: { width: 1, color: 'red' },
margin: {
left: 5,
right: 5,
top: 5,
bottom: 5
}, angle: 45, enableRotation: true
}
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold'
type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
stroke
and border
of data label can be customized using fill
and border
properties.
Rounded corners can be customized using rx
and ry
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 { columnData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Category' };
this.marker = {
dataLabel: {
visible: true, bborder: { width: 2, color: 'red' },
rx: 10, ry: 10
}
};
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Category' };
public marker = {
dataLabel: {
visible: true, bborder: { width: 2, color: 'red' },
rx: 10, ry: 10
}
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold'
type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Note: rx
and ry
properties requires border
values not to be null.
You can also customize the specific marker and label using
pointRender
and
textRender
event. pointRender
event
allows you to change the shape, color and border for a point, whereas the textRender
event allows you
to change the text for the point.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.pointRender = (args) => {
if (args.point.index === 6) {
args.fill = 'red';
}
};
this.primaryxAxis = { valueType: 'Category' };
this.marker = { dataLabel: { visible: true, position: 'Middle' } };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} pointRender={this.pointRender} title='Alaska Weather Statistics - 2016'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
if (args.point.index === 6) {
args.fill = 'red'
}
};
public primaryxAxis: AxisModel = { valueType: 'Category' };
public marker = { dataLabel: { visible: true, position: 'Middle' } };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
pointRender={this.pointRender}
title='Alaska Weather Statistics - 2016'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
You can calculate the percentage value based on the sum for each series using the seriesRender
and textRender
events in the chart. In seriesRender
calculate the sum of each series y values and In textRender
calculate percentage value based on the sum value and modify the text.
import { render } from 'react-dom';
import * as React from "react";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
export let data1 = [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }];
export let data2 = [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }];
export let data3 = [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }];
let total = [];
export class App extends React.Component {
render() {
return (<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} textRender={this.onTextRender.bind(this)} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 } }} primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '60%'} title='Olympic Medal Counts - RIO' seriesRender={this.onSeriesRender.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Gold' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Silver' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
<SeriesDirective dataSource={data3} xName='x' yName='y' name='Bronze' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>);
}
onSeriesRender(args) {
for (var i = 0; i < args.data.length; i++) {
if (!total[args.data[i].x])
total[args.data[i].x] = 0;
total[args.data[i].x] += parseInt(args.data[i].y);
}
}
;
onTextRender(args) {
var percentage = (parseInt(args.text) / total[args.point.x]) * 100;
percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
args.text = percentage + '%';
}
;
}
render(<App />, document.getElementById('charts'));
import { render } from 'react-dom';
import * as React from "react";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
export let data1 = [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }];
export let data2 = [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }];
export let data3 = [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }];
let total = [];
export class App extends React.Component {
render() {
return (<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} textRender={this.onTextRender.bind(this)} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 } }} primaryYAxis={{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '60%'} title='Olympic Medal Counts - RIO' seriesRender={this.onSeriesRender.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Gold' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Silver' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
<SeriesDirective dataSource={data3} xName='x' yName='y' name='Bronze' type='Column' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>);
}
onSeriesRender(args) {
for (var i = 0; i < args.data.length; i++) {
if (!total[args.data[i].x]) total[args.data[i].x] = 0;
total[args.data[i].x] += parseInt(args.data[i].y);
}
}
;
onTextRender(args) {
var percentage = (parseInt(args.text) / total[args.point.x]) * 100;
percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
args.text = percentage + '%';
};
}
render(<App />, document.getElementById('charts'));