How to use a data label template in React Chart

You can render a custom HTML template for each data label to display richer content than plain text or numeric values. The template is assigned as a renderer function to the template property of DataLabelSettingsModel, where it receives an args object with the current data point.

Typical use cases include per-point color coding, progress chips, status badges, and rich content such as images inside data labels.

Define the template rendering function

Declare a regular React function that returns the JSX you want inside each label. The function receives an args object whose args.point describes the current data point (for example, args.point.x and args.point.y). Keep the function defined inside the same component so it can read component-scope variables.

In this example, the template wraps a colored chip around the x and y values. The color comes from the data source itself, so each label can be styled per-point.

Bind the template to the data label

Map a field from your data source to the data label’s name property so the template can read it from args.point, and assign the JSX function to the data label’s template property. Because data label configuration in this example is declared under marker, set both properties on marker.dataLabel and pass the resulting marker object to the series.

In the example below, the color field of each data row is mapped via marker.dataLabel.name, and the inline chartTemplate function is passed to marker.dataLabel.template:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const template = chartTemplate;
    const marker = { visible: true, dataLabel: { visible: true, name: 'color', 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}</div>
          <div>{args.point.y}</div>
        </div>);
    }
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <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 { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const template:any = chartTemplate;
  const marker = { visible: true, dataLabel: { visible: true, name: 'color', 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}</div>
          <div>{args.point.y}</div>
        </div>);
  }
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <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: 10,  y: 7000,  color: 'red' },
    { x: 20,  y: 1000,  color: 'yellow' },
    { x: 30,  y: 12000, color: 'orange' },
    { x: 40,  y: 14000, color: 'skyblue' },
    { x: 50,  y: 11000, color: 'blue' },
    { x: 60,  y: 5000,  color: 'green' },
    { x: 70,  y: 7300,  color: 'pink' },
    { x: 80,  y: 9000,  color: 'white' },
    { x: 90,  y: 12000, color: 'magenta' },
    { x: 100, y: 14000, color: 'purple' },
    { x: 110, y: 11000, color: 'teal' },
    { x: 120, y: 5000,  color: 'gray' }
];
export let data: Object[] = [
    { x: 10,  y: 7000,  color: 'red' },
    { x: 20,  y: 1000,  color: 'yellow' },
    { x: 30,  y: 12000, color: 'orange' },
    { x: 40,  y: 14000, color: 'skyblue' },
    { x: 50,  y: 11000, color: 'blue' },
    { x: 60,  y: 5000,  color: 'green' },
    { x: 70,  y: 7300,  color: 'pink' },
    { x: 80,  y: 9000,  color: 'white' },
    { x: 90,  y: 12000, color: 'magenta' },
    { x: 100, y: 14000, color: 'purple' },
    { x: 110, y: 11000, color: 'teal' },
    { x: 120, y: 5000,  color: 'gray' }
];

Available arguments

Inside the template renderer (the function you pass to dataLabel.template), you can read the following fields from the args.point object:

Argument Description
args.point.x The x value of the current data point (matches the bound axis data type).
args.point.y The y value of the current data point.
args.point.index The zero-based index of the point in its series.
args.point.text The text resolved from the field mapped to dataLabel.name.

Troubleshooting

  • “The data-label template is blank”: Confirm that visible is set to true in marker.dataLabel, the DataLabel module is included in the injected services, and the renderer function is assigned to dataLabel.template.

  • “args.point.text is undefined“: Confirm that dataLabel.name contains the name of a valid data-source field and that each applicable data item contains that field.

See also