Category axis in React Chart component

3 Feb 202621 minutes to read

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:

index.jsx

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"));

index.tsx

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"));

datasource.jsx

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

datasource.tsx

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 category axis, we need to inject Category module into the services and
set the valueType of axis to Category.

Labels 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.

index.jsx

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"));

index.tsx

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"));

datasource.jsx

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

datasource.tsx

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.

index.jsx

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"));

index.tsx

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"));

datasource.jsx

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

datasource.tsx

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

The category axis can also be rendered based on the index values of the data source. This behavior can be enabled by setting the isIndexed property of the axis to true, which positions data points according to their index instead of their actual category values.

index.jsx

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"));

index.tsx

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"));

datasource.jsx

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

datasource.tsx

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