HelpBot Assistant

How can I help you?

Data labels in React Chart component

3 Feb 202624 minutes to read

Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Enable data labels by setting the visible option to true in the dataLabel configuration. Labels automatically adjust to avoid overlapping and 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 (applicable to column and bar series). 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 }
];

Note: The Outer position applies only to column and bar series types.

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

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' }
];

Value	Format	Resultant Value	Description
1000	n1	1000.0	Rounded to 1 decimal place.
1000	n2	1000.00	Rounded to 2 decimal places.
1000	n3	1000.000	Rounded to 3 decimal places.
0.01	p1	1.0%	Converted to percentage with 1 decimal place.
0.01	p2	1.00%	Converted to percentage with 2 decimal places.
0.01	p3	1.000%	Converted to percentage with 3 decimal places.
1000	c1	$1000.0	Currency with 1 decimal place.
1000	c2	$1000.00	Currency with 2 decimal places.

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 using 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 non‑null border values.

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.

Enable last value label

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

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= 
          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 } 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= 
          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 }
];

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

Customization

Customize the appearance using properties such as font, background, border, dashArray, lineWidth, lineColor, rx, and ry.

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= 
              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= 
              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 HelpBot

Search docs

Ask HelpBot

How can I help you?

Data labels in React Chart component

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