Data Labels in React Charts

Data labels display the values of data points directly on the chart, removing the need to reference axes for exact values. Data labels are configured under the marker.dataLabel property of each series. Enable data labels by setting the visible option to true. Labels automatically adjust to avoid overlapping and to maintain readability.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const marker = {
        visible: true,
        height: 10, width: 10,
        shape: 'Pentagon',
        dataLabel: { visible: true }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
        </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,
  Legend, DateTime, Tooltip, DataLabel, LineSeries, MarkerSettingsModel
} from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const marker: MarkerSettingsModel = {
    visible: true,
    height: 10, width: 10,
    shape: 'Pentagon',
    dataLabel: { visible: true }
  };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}>
    <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
        type='Line' marker={marker}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(2016, 0, 1),  y: -7.1 }, { x: new Date(2016, 1, 1),  y: -3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 },  { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
export let data: Object[] = [
    { x: new Date(2016, 0, 1),  y: -7.1 }, { x: new Date(2016, 1, 1),  y: -3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 },  { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];

Note: To use the data label feature, the DataLabel module must be injected into the services.

Position

Use the position property to place data labels at Top, Middle, Bottom, or Outer. The Outer position applies only to column and bar series types. Appropriate label positioning enhances clarity and preserves chart readability.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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: 'Months', valueType: 'Category' };
    const marker = { dataLabel: { visible: true, position: 'Middle' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Months', valueType: 'Category' };
  const marker = { dataLabel: { visible: true, position: 'Middle' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
          type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 },    { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
export let data: Object[] = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 },    { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];

Data label template

Customize label content using templates. Use placeholders such as ${point.x} and ${point.y} to display data point values. The template property enables fully customizable and visually rich labels.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';

function App() {
  const primaryxAxis = { title: 'Months', valueType: 'DateTime', intervalType: 'Months' };
  const template = chartTemplate;
  const marker = { dataLabel: { visible: true, position: 'Middle', template: template } };
  function chartTemplate(args) {
    return (<div id="templateWrap" style={{ border: '1px solid black', backgroundColor: 'red', padding: '3px 3px 3px 3px' }}>
      <div>{args.point.x.getFullYear()}</div>
      <div>{args.point.y}</div>
    </div>);
  }
  ;
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
    <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
      </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,
  Legend, DateTime, Tooltip, DataLabel, LineSeries, MarkerSettingsModel
}
  from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Months', valueType: 'DateTime', intervalType: 'Months' };
  const template: any = chartTemplate;
  const marker: MarkerSettingsModel = { dataLabel: { visible: true, position: 'Middle', template: template } };
  function chartTemplate(args: any) {
    return (<div id="templateWrap" style={{ border: '1px solid black', backgroundColor: 'red', padding: '3px 3px 3px 3px' }}>
      <div>{args.point.x.getFullYear()}</div>
      <div>{args.point.y}</div>
    </div>);
  };

  return <ChartComponent id='charts'
    primaryXAxis={primaryxAxis}>
    <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
        type='Line' marker={marker}>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(2016, 0, 1),  y: -7.1 }, { x: new Date(2016, 1, 1),  y: -3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 },  { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
export let data: Object[] = [
    { x: new Date(2016, 0, 1),  y: -7.1 }, { x: new Date(2016, 1, 1),  y: -3.7 },
    { x: new Date(2016, 2, 1),  y: 0.8 },  { x: new Date(2016, 3, 1),  y: 6.3 },
    { x: new Date(2016, 4, 1),  y: 13.3 }, { x: new Date(2016, 5, 1),  y: 18.0 },
    { x: new Date(2016, 6, 1),  y: 19.8 }, { x: new Date(2016, 7, 1),  y: 18.1 },
    { x: new Date(2016, 8, 1),  y: 13.1 }, { x: new Date(2016, 9, 1),  y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];

Text mapping

Display custom text using the name property, which maps label text from a specific field in the data source. This feature is useful for descriptive or category-based labels.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const marker = { dataLabel: { visible: true, name: 'text' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={mapData} xName='x' yName='y' type='Column' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { mapData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const marker = { dataLabel: { visible: true, name: 'text' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={mapData} xName='x' yName='y'
          type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let mapData = [
    { x: 'Jan', y: 12, text: 'January : 12°C' }, 
    { x: 'Feb', y: 8,  text: 'February : 8°C' }, 
    { x: 'Mar', y: 11, text: 'March : 11°C' }, 
    { x: 'Apr', y: 6,  text: 'April : 6°C' }
];
export let mapData: Object[] = [
    { x: 'Jan', y: 12, text: 'January : 12°C' }, 
    { x: 'Feb', y: 8,  text: 'February : 8°C' }, 
    { x: 'Mar', y: 11, text: 'March : 11°C' }, 
    { x: 'Apr', y: 6,  text: 'April : 6°C' }
];

Format

Apply number or date formatting using the format property. Global formatting symbols include:

n - number format
p - percentage format
c - currency format

The format property also supports placeholders such as {value}°C, where {value} represents the data point’s value (for example, 20°C).

Value	Format	Resultant Value	Description
1000	n1	1000.0	Formats as a number with 1 decimal place.
1000	n2	1000.00	Formats as a number with 2 decimal places.
1000	n3	1000.000	Formats as a number with 3 decimal places.
0.01	p1	1.0%	Formats as a percentage with 1 decimal place.
0.01	p2	1.00%	Formats as a percentage with 2 decimal places.
0.01	p3	1.000%	Formats as a percentage with 3 decimal places.
1000	c1	$1000.0	Formats as currency with 1 decimal place.
1000	c2	$1000.00	Formats as currency with 2 decimal places.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
class App extends React.Component {
    primaryxAxis = { valueType: 'Category' };
    marker = { dataLabel: { visible: true, format: 'n2' } };
    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>;
    }
}
;
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,
         Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { mapData } from './datasource';
class App extends React.Component<{}, {}> {

  public primaryxAxis: AxisModel = { valueType: 'Category' };
  public marker = { dataLabel: { visible: true, format: 'n2' } };

  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>
  }

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let mapData = [
    { x: 'Jan', y: 12, text: 'January : 12°C' }, 
    { x: 'Feb', y: 8,  text: 'February : 8°C' }, 
    { x: 'Mar', y: 11, text: 'March : 11°C' }, 
    { x: 'Apr', y: 6,  text: 'April : 6°C' }
];
export let mapData: Object[] = [
    { x: 'Jan', y: 12, text: 'January : 12°C' }, 
    { x: 'Feb', y: 8,  text: 'February : 8°C' }, 
    { x: 'Mar', y: 11, text: 'March : 11°C' }, 
    { x: 'Apr', y: 6,  text: 'April : 6°C' }
];

Margin

Adjust spacing around labels using the margin property, which includes left, right, bottom, and top values. Margins help prevent labels from overlapping chart elements.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const marker = {
        dataLabel: {
            visible: true, border: { width: 1, color: 'red' },
            margin: {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5
            }
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const marker = {
    dataLabel: {
      visible: true, border: { width: 1, color: 'red' },
      margin: {
        left: 5,
        right: 5,
        top: 5,
        bottom: 5
      }
    }
  };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold'
          type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Data label rotation

Rotate data labels by setting enableRotation to true and specifying the rotation angle with the angle property. Rotation improves readability when labels are long or when space is limited.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const 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
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const 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
    }
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold'
          type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Customization

Enhance label appearance using properties such as fill (background), border, and corner radius (rx, ry). Refine text appearance using the font settings, which support color, fontFamily, fontWeight, and size.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const marker = {
        dataLabel: {
            visible: true, font: { color: "blue", fontWeight: "500" }, border: { width: 2, color: 'red' },
            rx: 10, ry: 10
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const marker = {
    dataLabel: {
      visible: true, font: { color: "blue", fontWeight: "500" }, border: { width: 2, color: 'red' },
      rx: 10, ry: 10
    }
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold'
          type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Note: The rx and ry properties require a non-null border value (with a defined width and color).

Customizing specific point

Customize individual markers or labels using the pointRender and textRender events:

pointRender modifies shape, color, or border of a point.
textRender customizes the label text for specific points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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 pointRender = (args) => {
        if (args.point.index === 6) {
            args.fill = 'red';
        }
    };
    const primaryxAxis = { valueType: 'Category' };
    const marker = { dataLabel: { visible: true, position: 'Middle' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} pointRender={pointRender} title='Alaska Weather Statistics - 2016'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </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,
         Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
    if (args.point.index === 6) {
      args.fill = 'red'
    }
  };
  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const marker = { dataLabel: { visible: true, position: 'Middle' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      pointRender={pointRender}
      title='Alaska Weather Statistics - 2016'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y'
          type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 },    { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
export let data: Object[] = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 },    { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];

Show percentage based on each series points

Calculate and display percentage values based on each series’ total using the seriesRender and textRender events:

In seriesRender, compute the total of y values.
In textRender, calculate the percentage for each point and update the label text.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
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';
import { data1, data2, data3 } from './datasource';

const total = [];
function App() {
    return (<div className='control-pane'>

            <div className='control-section'>
                <ChartComponent id='charts' style={{ textAlign: "center" }} textRender={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={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>);
    function 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);
        }
    }
    ;
    function onTextRender(args) {
        var percentage = (parseInt(args.text) / total[args.point.x]) * 100;
        percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
        args.text = percentage + '%';
    }
    ;
}
export default App;
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';
import { data1, data2, data3 } from './datasource';

const total = [];

function App() {
        return (<div className='control-pane'>

            <div className='control-section'>
                <ChartComponent id='charts' style={{ textAlign: "center" }} textRender={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={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>);
      function 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);
          }
    }
    ;
    function onTextRender(args) {
        var percentage = (parseInt(args.text) / total[args.point.x]) * 100;
        percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
        args.text = percentage + '%';
    };
}
export default App;
render(<App />, document.getElementById('charts'));
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 }
];
export let data1: Object[] = [
    { x: 'USA', y: 46 }, 
    { x: 'GBR', y: 27 }, 
    { x: 'CHN', y: 26 }
];

export let data2: Object[] = [
    { x: 'USA', y: 37 }, 
    { x: 'GBR', y: 23 }, 
    { x: 'CHN', y: 18 }
];

export let data3: Object[] = [
    { x: 'USA', y: 38 }, 
    { x: 'GBR', y: 17 }, 
    { x: 'CHN', y: 26 }
];

Last value label

The lastValueLabel feature highlights the final data point in a series, making the latest trend or value easy to identify. The lastValueLabel option is configured on each SeriesDirective (it is a Series-level property), not on the chart component. To use this feature, inject the ColumnSeries (or other required series), Category, DataLabel, and LastValueLabel modules into the services.

Enable last value label

Enable the label by setting the enable property inside the lastValueLabel configuration of the series.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LastValueLabel, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryXAxis = { title: 'Year', interval: 1 };
    const primaryYAxis = { title: 'Efficiency', labelFormat: '{value}%' };
    const tooltip = { enable: true };
    const title = 'Efficiency of oil-fired power production';
    const marker = { visible: false, dataLabel: { visible: true }};
    return <ChartComponent id='charts' title={title} width='90%' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} tooltip={tooltip}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LastValueLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='series1' animation={{ enable: true }} 
          lastValueLabel={{ enable: true }} marker={marker}/>
      </SeriesCollectionDirective>
    </ChartComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, SeriesCollectionDirective, MarkerSettingsModel, SeriesDirective, TooltipSettingsModel, Tooltip, LastValueLabel } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
    const primaryXAxis: Object = { title: 'Year', interval: 1 };
    const primaryYAxis: Object = { title: 'Efficiency', labelFormat: '{value}%' };
    const tooltip: TooltipSettingsModel = { enable: true };
    const title: string = 'Efficiency of oil-fired power production';
    const marker: MarkerSettingsModel = { visible: false, dataLabel: { visible: true }};

    return <ChartComponent id='charts' title={title} width='90%' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} tooltip={tooltip}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LastValueLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='series1' animation={{ enable: true }} 
          lastValueLabel={{ enable: true }} marker={marker}/>
      </SeriesCollectionDirective>
    </ChartComponent>;
};

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
];

Note: To use the last value label feature, inject the LastValueLabel module into the services.

Customization

Customize the appearance using font, background, border, dashArray, lineWidth, lineColor, rx, and ry. The lineColor, lineWidth, and dashArray properties control the connector line drawn between the last data point and the label.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LastValueLabel, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryXAxis = { title: 'Year', interval: 1 };
        const primaryYAxis = { title: 'Efficiency', labelFormat: '{value}%' };
        const lastValueLabel = { enable: true, background: "blue", lineColor: "red", lineWidth: 2, dashArray: "5,5", rx: 10, ry: 10, border: { width: 2, color: "red" }, font: { color: "white", size: "12px", fontWeight: "bold" } };
        const tooltip = { enable: true };
        const title = 'Efficiency of oil-fired power production';
        const marker = { visible: false, dataLabel: { visible: true }};
        return <ChartComponent id='charts' title={title} width='90%' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} tooltip={tooltip}>
          <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LastValueLabel, Category]}/>
          <SeriesCollectionDirective>
            <SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='series1' animation={{ enable: true }} 
              lastValueLabel={lastValueLabel} marker={marker}/>
          </SeriesCollectionDirective>
        </ChartComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, SeriesCollectionDirective, MarkerSettingsModel, SeriesDirective, TooltipSettingsModel, Tooltip, LastValueLabel, LastValueLabelSettingsModel } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
    const primaryXAxis: Object = { title: 'Year', interval: 1 };
        const primaryYAxis: Object = { title: 'Efficiency', labelFormat: '{value}%' };
        const lastValueLabel: LastValueLabelSettingsModel  = { enable: true, background: "blue", lineColor: "red", lineWidth: 2, dashArray: "5,5", rx: 10, ry: 10, border: { width: 2, color: "red" }, font: { color: "white", size: "12px", fontWeight: "bold" } };
        const tooltip: TooltipSettingsModel = { enable: true };
        const title: string = 'Efficiency of oil-fired power production';
        const marker: MarkerSettingsModel = { visible: false, dataLabel: { visible: true }};
    
        return <ChartComponent id='charts' title={title} width='90%' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} tooltip={tooltip}>
          <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LastValueLabel, Category]}/>
          <SeriesCollectionDirective>
            <SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='series1' animation={{ enable: true }} 
              lastValueLabel={lastValueLabel} marker={marker}/>
          </SeriesCollectionDirective>
        </ChartComponent>;
};

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
];

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Data Labels in React Charts

Position

Data label template

Text mapping

Format

Margin

Data label rotation

Customization

Customizing specific point

Show percentage based on each series points

Last value label

Enable last value label

Customization

See Also