Axis labels in React Chart component

14 Dec 202424 minutes to read

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

Smart axis labels

When the axis labels overlap with each other, you can use labelIntersectAction property in the axis, to place them smartly.

When setting labelIntersectAction as Hide

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

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

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, the axis labels can be placed at outside the axis line and this also can be placed at inside the axis line using the labelPosition property.

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

Any number of levels of labels can be added to an axis using the multiLevelLabels property.
This property can be configured using the following properties:

• Categories
• Overflow
• Alignment
• Text style
• Border

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

Categories

Using the categories property, you can configure the start, end, text, and maximumTextWidth of multilevel labels.

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, you can trim or wrap the multilevel labels.

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 option to position the multilevel labels at far, center, or near.

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, 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, you can customize the width, color, and type. The type of border are Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder and CurlyBrace.

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 chart. The arguments that are required to pass to sort method are data of chart. The fields depend on which sorting is performed either x or y, and the isDescending with which data source values are sorted in either ascending or descending.

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 in the chart. To avoid this, use edgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it. By default, the edgeLabelPlacement property is set to Shift to ensure that labels are shifted inside the chart area, avoiding any overlap or coincidence.

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

Border of the axis labels can be customized using width, color and type property of the axis.

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 specific point

You can customize the specific text in the axis labels using axisLabelRender event.

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

You can trim the label using enableTrim property and width of the labels can also be customized using maximumLabelWidth property in the axis, the value maximum label width is 34 by default.

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

Line break feature used to customize the long axis label text into multiple lines by using tag. Refer the below example in that dataSource x value contains long text, it breaks into two lines by using <br> tag.

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 }
];