How to customize the data label’s font?

This article explains how to customize the data labels font in React Chart.

Customize the font of data labels

You can easily customize the font of data labels to match your design preferences. To do so, you can utilize the fontFamily, fontWeight, fontStyle, size, and color properties within the font property of the data label. These properties allow you to achieve precise control over the appearance of the text within the data labels.

The font property includes the following customization options:

• fontFamily - Specifies the font family for the data label.
• fontWeight - Specifies the font weight for the data label.
• fontStyle - Specifies the font style for the data label.
• size - Specifies the font size for the data label.
• color - Specifies the color for the data label.

In the following code example, the font of data labels is customized by utilizing the customization options.

Index.js

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

const Spline = () => {
 const marker = {
   visible: true,
   dataLabel: {
     visible: true,
     position: 'Top',
     font: {
       color: 'blue',
       fontWeight: '600',
       fontStyle: 'Italic',
       fontFamily: 'Arial',
       size: '13px'
     }
   }
 };
 return (
       <ChartComponent
         id="charts"
         primaryXAxis={{
           valueType: 'Category',
           interval: 1
         }}
         primaryYAxis={{
           labelFormat: '{value}°C'
         }}
         title="Weather Report"
       >
         <Inject services={[SplineSeries, Category, DataLabel]} />
         <SeriesCollectionDirective>
           <SeriesDirective
             dataSource={data}
             xName="x"
             yName="y"
             width={2}
             type="Spline"
             marker={marker}
           />
         </SeriesCollectionDirective>
       </ChartComponent>
   );
};
export default Spline;

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

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

Screenshot:

Refer to the working sample for additional details and implementation: View Sample in Stackblitz

Conclusion

We hope you enjoyed learning how to customize the data label’s font in 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, BoldDesk Support, or feedback portal. We are always happy to assist you!