Category Axis in React Charts

The category axis is used to represent string-based values instead of numeric values. It is commonly used for displaying discrete categories such as names, labels, or textual groupings along an axis.

To get start quickly with React Category Axis, you can check out this video:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Countries' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} 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} from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
      title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let chartData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Note: To use the category axis, you need to inject the Category module into the services array and set the valueType of the axis to Category.

Label placement

By default, category labels are positioned between the axis tick marks. They can also be aligned directly on the ticks by using the labelPlacement property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Countries', labelPlacement: 'OnTicks' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} 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} from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries', labelPlacement: 'OnTicks' };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
      title='Olympic Medals'  >
      <Inject services={[ColumnSeries, Legend, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let chartData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Range

The visible range of the category axis can be customized by using the minimum, maximum, and interval properties of the axis. These properties control the start value, end value, and spacing between category labels. By default, all categories are displayed.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', title: 'Countries', interval: 2, minimum: 1, maximum: 5 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} 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 { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,ColumnSeries, Legend, Category, AxisModel } from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries', interval: 2, minimum: 1, maximum: 5 };
  
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
      title='Olympic Medals'  >
      <Inject services={[ColumnSeries, Legend, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let chartData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Indexed category axis

Beyond the default category-by-value behavior, the category axis can also be rendered based on the index values of the data source. This is useful when you have multiple data sources with different category values that need to be aligned on the same axis, or when you want to position data points by their index instead of their actual category values. This behavior can be enabled by setting the isIndexed property of the axis to true.

Note: When using an indexed category axis, ensure the Category module is injected into the services array.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, Inject, Legend, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';
import { data1, data2 } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category', isIndexed: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
                        <Inject services={[ColumnSeries, Legend, Category]}/>
                        <SeriesCollectionDirective>
                            <SeriesDirective dataSource={data1} xName='x' yName='y' type='Column'/>
                            <SeriesDirective dataSource={data2} xName='x' yName='y' type='Column'/>
                        </SeriesCollectionDirective>
                  </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,Category,ChartComponent,ColumnSeries,Inject,Legend, SeriesCollectionDirective, SeriesDirective } from'@syncfusion/ej2-react-charts';
import { data1, data2 } from './datasource';
function App() {
    const primaryxAxis: AxisModel= { valueType: 'Category',   isIndexed: true } ;

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

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data1 = [
    { x: 'Myanmar',    y: 7.3 }, 
    { x: 'India',      y: 7.9 },
    { x: 'Bangladesh', y: 6.8 }, 
    { x: 'Cambodia',   y: 7.0 }, 
    { x: 'China',      y: 6.9 }
];

export let data2 = [
    { x: 'Poland',    y: 2.7 }, 
    { x: 'Australia', y: 2.5 },
    { x: 'Singapore', y: 2.0 }, 
    { x: 'Canada',    y: 1.4 }, 
    { x: 'Germany',   y: 1.8 }
];
export let data1: Object[] = [
    { x: 'Myanmar',    y: 7.3 }, 
    { x: 'India',      y: 7.9 },
    { x: 'Bangladesh', y: 6.8 }, 
    { x: 'Cambodia',   y: 7.0 }, 
    { x: 'China',      y: 6.9 }
];

export let data2: Object[] = [
    { x: 'Poland',    y: 2.7 }, 
    { x: 'Australia', y: 2.5 },
    { x: 'Singapore', y: 2.0 }, 
    { x: 'Canada',    y: 1.4 }, 
    { x: 'Germany',   y: 1.8 }
];