How to prevent data labels in React Chart

17 Aug 20268 minutes to read

To stop a data label from rendering when its point’s value is 0, hook the textRender callback on the chart and set args.cancel. The callback fires for every data label; gate the cancel on a check of args.text and args.point.y so only the zero values are filtered.

Cancel the label

The textRender callback receives an args object with two relevant fields:

Field Meaning
args.text The formatted label string (for example, '0', '0.0', '-0').
args.point.y The numeric value of the point.

The example gates the cancel on both fields — first it checks that the formatted text is '0', then it sets args.cancel to a boolean expression that re-checks the underlying numeric value:

const textRender = (args) => {
    if (args.text === '0') {
        args.cancel = args.point.y === 0;
    }
};

Bind the callback on the <ChartComponent>:

<ChartComponent id='charts' textRender={textRender} … >

The two-condition guard is deliberate: the outer if (args.text === '0') makes sure the rest of the callback only runs for the labels we care about, and the inner args.point.y === 0 produces a true boolean for args.cancel rather than a stringified comparison.

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 primaryyAxis = { minimum: 0, maximum: 100, interval: 10 };
    const marker = { visible: true, dataLabel: { visible: true } };
    const textRender = (args) => {
        if (args.text === '0') {
            args.cancel = args.point.y === 0;
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Inflation - Consumer Price' textRender={textRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Germany' 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, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries,  ITextRenderEventArgs,AxisModel} from'@syncfusion/ej2-react-charts';
import {  EmitType } from '@syncfusion/ej2-base'
import { data } from './datasource';
 function App() {
  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 100, interval: 10 };
  const marker = { visible: true, dataLabel: { visible: true } };
  const textRender: EmitType<ITextRenderEventArgs> = (args: ITextRenderEventArgs): void => {
    if (args.text === '0') {
      args.cancel = args.point.y === 0;
    }
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Inflation - Consumer Price'
      textRender={textRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Germany'
          type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 0 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 }
];
export let data: Object[] = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 0 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 }
];

Troubleshooting

  • “Every data label disappears” — the if (args.text === '0') guard is missing. textRender fires for every label; without the guard you are cancelling all of them.
  • “The zero-value label still appears” — args.cancel is being set to a string (for example, args.cancel = '0') instead of a boolean. Assign a boolean expression: args.cancel = args.point.y === 0.

See also