How to show axis label smartly without intersecting?

This article explains how to display axis labels without intersecting in the React Chart.

Customize to display all the axis labels

By default, the axis labels that intersect with each other will be trimmed. React chart has options to make all the labels visible and position the collided labels smartly.

The labelIntersectAction property includes the following customization actions:

• None - Shows all the labels.
• Hide - Hides the label when it intersects.
• Trim - Trim the label when it intersects.
• Wrap - Wrap the label when it intersects.
• MultipleRows - Shows the label in MultipleRows when it intersects.
• Rotate45 - Rotates the label to 45 degree when it intersects.
• Rotate90 - Rotates the label to 90 degree when it intersects.

In the following code example, the intersect labels placed in multiple rows.

Index.js

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

const Column = () => {
return (
   <ChartComponent
     id="charts"
     primaryXAxis={{
       valueType: 'Category',
       interval: 1,
       labelPlacement: 'OnTicks',
       labelIntersectAction: 'MultipleRows'
     }}
     primaryYAxis={{
       minimum: 0,
       maximum: 80,
       interval: 10
     }}
   >
     <Inject services={[ColumnSeries, Category]} />
     <SeriesCollectionDirective>
       <SeriesDirective
         dataSource={data}
         xName="x"
         yName="y"
         type="Column"
         fill="#ffc803"
       />
     </SeriesCollectionDirective>
   </ChartComponent>
);
};
export default Column;

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

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

Screenshot:

View Sample in Stackblitz

Alternatively, we also have another option to rotate all the labels by using the labelRotation property. This helps avoid collisions and ensures that all the labels fit into available positions.

In the following code example, the intersecting labels are rotated at -45 degrees.

Index.js

  primaryXAxis={{
     valueType: 'Category',
     interval: 1,
     labelPlacement: 'OnTicks',
     labelRotation: -45
  }}

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

Screenshot:

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to display axis labels without intersecting 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!