Axis Labels in React Charts

To get started quickly with Axis Labels in React Charts, you can check on this video:

Smart axis labels

When axis labels overlap due to limited space or dense data points, the labelIntersectAction property can be used to control how the labels are rendered. This helps improve readability by automatically adjusting label visibility or orientation. The supported values are None, Hide, Rotate45, Rotate90, Wrap, MultipleRows, and Trim. The default value is None.

When setting labelIntersectAction as Hide, overlapping labels are hidden to avoid visual clutter.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Countries', labelIntersectAction: 'Hide', valueType: 'Category' };
    const primaryyAxis = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { title: 'Countries', labelIntersectAction: 'Hide', valueType: 'Category' };
  const primaryyAxis: AxisModel = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let smartAxisData = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];
export let smartAxisData: Object[] = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];

When setting labelIntersectAction as Rotate45, the labels are rotated by 45 degrees to reduce overlap.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Countries', labelIntersectAction: 'Rotate45', valueType: 'Category' };
    const primaryyAxis = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection }from'@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { title: 'Countries', labelIntersectAction: 'Rotate45', valueType: 'Category' };
  const primaryyAxis: AxisModel = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let smartAxisData = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];
export let smartAxisData: Object[] = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];

When setting labelIntersectAction as Rotate90, the labels are rotated vertically to maximize space utilization.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Countries', labelIntersectAction: 'Rotate90', valueType: 'Category' };
    const primaryyAxis = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}from'@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { title: 'Countries', labelIntersectAction: 'Rotate90', valueType: 'Category' };
  const primaryyAxis: AxisModel = { title: 'People(in millions)', minimum: 0, maximum: 80, interval: 10 };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Internet Users'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' name='Internet' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let smartAxisData = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];
export let smartAxisData: Object[] = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];

Axis labels positioning

By default, axis labels are positioned Outside the axis line. Labels can also be placed Inside the axis line using the labelPosition property, which is useful when optimizing space within the chart area. The supported values are Outside (default) and Inside.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', labelPosition: 'Inside' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', labelPosition: 'Inside' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Multilevel labels

Multiple levels of labels can be displayed on an axis using the multiLevelLabels property. This feature is useful for grouping related categories and improving data interpretation. The following configuration options are available:

• Categories
• Overflow
• Alignment
• Text style
• Border

Note: To use the multilevel label feature, we need to inject MultiLevelLabel module into the services.

import { MultiLevelLabel } from '@syncfusion/ej2-react-charts';

<ChartComponent services={[MultiLevelLabel]}>
  {/* ... */}
</ChartComponent>

Categories

Using the categories property, the start, end, text, and maximumTextWidth values of multilevel labels can be configured to define the label range and content. maximumTextWidth is specified in pixels and defaults to 100; if the label text exceeds this width, it will be truncated.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, MultiLevelLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        multiLevelLabels: [{
                categories: [
                    {
                        start: -0.5,
                        end: 3.5,
                        //Multi-level label's text.
                        text: 'Half Yearly 1'
                    },
                    { start: 3.5, end: 7.5, text: 'Half Yearly 2' },
                ]
            }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, MultiLevelLabel } from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    multiLevelLabels: [{
      categories: [
        {//Start and end values of the multi-level labels accepts number, date and sring values
          start: -0.5,
          end: 3.5,
          //Multi-level label's text.
          text: 'Half Yearly 1'
        },
        { start: 3.5, end: 7.5, text: 'Half Yearly 2' },
      ]
    }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Overflow

Using the overflow property, multilevel labels can be configured to either Trim (default) or Wrap when the text exceeds the available space.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, MultiLevelLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        multiLevelLabels: [{
                categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1', maximumTextWidth: 50 },
                    { start: 3.5, end: 7.5, text: 'Half Yearly 2', maximumTextWidth: 50 }],
                overflow: 'Trim'
            }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, MultiLevelLabel} from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    multiLevelLabels: [{
      categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1', maximumTextWidth: 50 },
      { start: 3.5, end: 7.5, text: 'Half Yearly 2', maximumTextWidth: 50 }],
      overflow: 'Trim'
    }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Alignment

The alignment property provides options to position multilevel labels at Far, Center (default), or Near relative to the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, MultiLevelLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        multiLevelLabels: [{
                categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
                    { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
                alignment: 'Far'
            }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, MultiLevelLabel} from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    multiLevelLabels: [{
      categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
      { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
      alignment: 'Far'
    }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Text customization

The textStyle property of multilevel labels provides options to customize the size (default '12px'), color, fontFamily, fontWeight, fontStyle, opacity, textAlignment, and textOverflow.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, MultiLevelLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        multiLevelLabels: [{
                categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
                    { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
                textStyle: { size: '18px', color: 'Red' }
            }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, MultiLevelLabel } from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    multiLevelLabels: [{
      categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
      { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
      textStyle: { size: '18px', color: 'Red' }
    }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Border customization

Using the border property, the width, color, and type of the multilevel label border can be customized. The supported border types are:

  • Rectangle — a simple rectangular border (default).
  • Brace — a bracket-style border with curled ends.
  • WithoutBorder — no border is rendered.
  • WithoutTopBorder — bottom and side borders only.
  • WithoutTopAndBottomBorder — only side borders are rendered.
  • CurlyBrace — a fully curled brace on both ends.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, MultiLevelLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        multiLevelLabels: [{
                categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
                    { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
                border: { type: 'Brace', color: 'Blue', width: 2 },
            }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, MultiLevelLabel} from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    multiLevelLabels: [{
      categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
      { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
      border: { type: 'Brace', color: 'Blue', width: 2 },
    }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, MultiLevelLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Sorting

The chart’s data source can be sorted using the sort method of the chart. The arguments required for the sort method are the chart data and a sortField object that specifies whether sorting is performed on the x or y field, along with an isDescending flag (default false) to sort in ascending or descending order. The method signature is:

chart.sort(data, 'x', false); // ascending by x
chart.sort(data, 'y', true);  // descending by y

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection }from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Edge label placement

Labels with long text at the edges of an axis may appear partially outside the chart area. To avoid this, use the edgeLabelPlacement property in the axis. This property moves the label inside the chart area or hides it for better appearance. The supported values are None, Shift (default), and Hide. By default, the property is set to Shift, ensuring that labels are repositioned inside the chart area to prevent overlap. Use Hide to completely hide edge labels.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', edgeLabelPlacement: 'Shift' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', edgeLabelPlacement: 'Shift' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Labels customization

The labelStyle property of an axis provides options to customize the color, fontFamily, size, and fontWeight of axis labels.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', border: { width: 1, type: 'Rectangle', color: 'red' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', border: { width: 1, type: 'Rectangle', color: 'red' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Customizing individual labels

Specific axis label text can be customized using the axisLabelRender event, which allows conditional formatting or dynamic text updates during label rendering. The event provides an args object with properties such as text, value, labelStyle, and axis, which can be modified before the label is rendered.

const axisLabelRender = (args) => {
  if (args.value === 50) {
    args.text = 'Custom Label';
  }
};

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const axisLabelRender = (args) => {
        if (args.text === 'France') {
            args.labelStyle.color = 'Red';
        }
    };
    const primaryxAxis = { valueType: 'Category', border: { width: 1, type: 'Rectangle', color: 'red' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} axisLabelRender={axisLabelRender}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, IAxisLabelRenderEventArgs, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from'@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const axisLabelRender = (args: IAxisLabelRenderEventArgs) => {
    if (args.text === 'France') {
      args.labelStyle.color = 'Red';
    }
  }
  const primaryxAxis: AxisModel = { valueType: 'Category', border: { width: 1, type: 'Rectangle', color: 'red' } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      axisLabelRender={axisLabelRender}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Trim using maximum label width

Axis labels can be trimmed when they exceed the available space using the enableTrim property. The width of the labels can also be customized using the maximumLabelWidth property. The default maximum label width value is 34 (in pixels). The maximumLabelWidth value must be greater than 0; setting it to 0 or a negative value will be ignored.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category',
        //label is trimmed
        enableTrim: true,
        //maximum width of label is provided
        maximumLabelWidth: '34',
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, IAxisLabelRenderEventArgs, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} from'@syncfusion/ej2-react-charts';
import { smartAxisData } from './datasource';
function App() {

   const primaryxAxis: AxisModel = { valueType: 'Category',
        //label is trimmed
        enableTrim: true,
        //maximum width of label is provided
        maximumLabelWidth: '34',
   };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={smartAxisData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let smartAxisData = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];
export let smartAxisData: Object[] = [
    { x: "South Korea",  y: 39.4 }, 
    { x: "India",        y: 61.3 }, 
    { x: "Pakistan",     y: 20.4 },
    { x: "Germany",      y: 65.1 }, 
    { x: "Australia",    y: 15.8 }, 
    { x: "Italy",        y: 29.2 },
    { x: "France",       y: 44.6 }, 
    { x: "Saudi Arabia", y: 9.7 }, 
    { x: "Russia",       y: 40.8 },
    { x: "Mexico",       y: 31 }, 
    { x: "Brazil",       y: 75.9 }, 
    { x: "China",        y: 51.4 }
];

Line break support

The line break feature is used to display long axis label text across multiple lines. In the following example, the x value in the data source contains long text, which is split into two lines using the <br> tag. The <br> tag must be embedded directly in the data string; HTML special characters within label text should be properly escaped to prevent rendering issues.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StackingColumnSeries, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { data1 } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', interval: 1, tickPosition: 'Inside', labelPosition: 'Inside', labelStyle: { color: '#ffffff' } };
    const primaryyAxis = { minimum: 0, maximum: 300, interval: 50, labelStyle: { color: 'transparent' } };
    let count = 0;
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Trade in Food Groups'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StackingColumnSeries]}/>
         <SeriesCollectionDirective>
                            <SeriesDirective dataSource={data1} type='Column' xName='x' width={2} yName='y' name='Tiger' cornerRadius={{ bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 }} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
                            </SeriesDirective>
          </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, IAxisLabelRenderEventArgs,StackingColumnSeries, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection} from'@syncfusion/ej2-react-charts';
import { data1 } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', interval: 1,tickPosition: 'Inside', labelPosition:'Inside', labelStyle: { color: '#ffffff' } };
  const primaryyAxis: AxisModel ={ minimum: 0, maximum: 300, interval: 50,  labelStyle: { color: 'transparent' } };
  let count: number = 0;
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}  primaryYAxis={primaryyAxis} title='Trade in Food Groups'
>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category,StackingColumnSeries]} />
         <SeriesCollectionDirective>
                            <SeriesDirective dataSource={data1} type='Column' xName='x' width={2} yName='y' name='Tiger'
                                cornerRadius={{ bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 }}
                                marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
                            </SeriesDirective>
          </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data1 = [
    { x: 'Egg',    y: 106 },
    { x: 'Fish',   y: 103 },
    { x: 'Misc',   y: 198 },
    { x: 'Tea',    y: 189 },
    { x: 'Fruits', y: 250 }
];
export let data1: Object[] = [
    { x: 'Egg',    y: 106 },
    { x: 'Fish',   y: 103 },
    { x: 'Misc',   y: 198 },
    { x: 'Tea',    y: 189 },
    { x: 'Fruits', y: 250 }
];

Axis label template

The axis label template allows axis labels to be customized using HTML content. This enables conditional styling and the inclusion of dynamic elements such as icons, images, or additional contextual data. This customization is enabled by setting the template content in the labelTemplate property of the AxisModel. The template string supports placeholders such as ${value} to reference axis values.

const labelTemplate = '<div style="background:#e0f7fa;padding:2px 6px;border-radius:3px;">${value}</div>';

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const axisLabeltemplate =
          '<table>'
            '<tr>'
                '<td align="center" style="background-color: #2E8B57; font-size: 14px; color: #FFD700; font-weight: bold; padding: 5px">Country :</td>'
                '<td align="center" style="background-color: #4682B4; font-size: 14px; color: #FFFFFF; font-weight: bold; padding: 5px">${label}</td>'
            '</tr>'
        '</table>';
    const primaryxAxis = { valueType: 'Category', labelTemplate: axisLabeltemplate };
    const primaryyAxis = { valueType: 'Double' };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' width='70%'>
      <Inject services={[ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='Country' yName='Count' type='Column' 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 { AxisModel,ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category} from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
  const axisLabeltemplate: string =
          '<table>'
            '<tr>'
                '<td align="center" style="background-color: #2E8B57; font-size: 14px; color: #FFD700; font-weight: bold; padding: 5px">Country :</td>'
                '<td align="center" style="background-color: #4682B4; font-size: 14px; color: #FFFFFF; font-weight: bold; padding: 5px">${label}</td>'
            '</tr>'
        '</table>';
  const primaryxAxis: AxisModel = { valueType: 'Category', labelTemplate: axisLabeltemplate };
  const primaryyAxis: AxisModel = { valueType: 'Double' };
  const marker = { visible: true };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' width='70%'>
      <Inject services={[ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='Country' yName='Count' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { Country: 'USA', Count: 46 },
    { Country: 'UK', Count: 27 },
    { Country: 'China', Count: 26 },
    { Country: 'Russia', Count: 19 },
    { Country: 'Germany', Count: 17 }
];
export let chartData: Object[] = [
    { Country: 'USA', Count: 46 },
    { Country: 'UK', Count: 27 },
    { Country: 'China', Count: 26 },
    { Country: 'Russia', Count: 19 },
    { Country: 'Germany', Count: 17 }
];