How to place the React Chart Data label at the top and bottom of the marker alternatively?

This article explains how to place the data label at the top and bottom of the marker alternatively in the React Chart.

Customize the data label position

You can easily customize data labels at the top and bottom positions of the marker alternately by using the textRender event. By default, label positions are based on the series. However, by using the position property, you can place the labels at the Top, Middle, Bottom, or Outer positions.

The position property includes the following customization options:

• Outer - Positions the label outside the point.
• Top - Positions the label on top of the point.
• Bottom - Positions the label at the bottom of the point.
• Middle - Positions the label to the middle of the point.
• Auto - Positions the label based on series.

In the following code example, the position of data labels is customized by alternately utilizing the top and bottom positions of the marker.

Index.js

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DataLabel,
 Category } from '@syncfusion/ej2-react-charts';

const Line = () => {
 const textRender = (args) => {
   if (args.point.y % 2 === 0) {
     args.point.location = 'top';
   } else {
     args.point.location = 'bottom';
   }
 };
 return (
       <ChartComponent
         id="charts"
         primaryXAxis={{
           valueType: 'Double',
           minimum: 1,
           maximum: 10,
           interval: 2,
           labelPlacement: 'OnTicks',
           labelFormat: '{value}AM'
         }}
         primaryYAxis={{
           rangePadding: 'None',
           minimum: 0,
           maximum: 60,
           interval: 5
         }}
         textRender={textRender.bind(this)}
       >
         <Inject services={[LineSeries, DataLabel, Category]} />
         <SeriesCollectionDirective>
           <SeriesDirective
             dataSource={data}
             xName="x"
             yName="y"
             width={2}
             marker={{
               visible: true,
               width: 10,
               height: 10,
               shape: 'Circle',
               fill: '#0000ff',
               border: { width: 0 },
               dataLabel: {
                 visible: true,
                 rx: 0,
                 ry: 0,
                 fill: '#00ffff',
                 border: { width: 2 }
               }
             }}
             type="Line"
             fill="#febe17"
           ></SeriesDirective>
         </SeriesCollectionDirective>
       </ChartComponent>
   );
};
export default Line;

const root = createRoot(document.getElementById('sample'));
root.render(<Line />);

The following screenshot illustrate the output of the above code snippet.

Screenshot:

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to place the data label at the top and bottom of the marker alternatively in the React Chart Component.

You can refer to our React Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!