Numeric axis in React Charts

The numeric axis is used to represent numeric values in a chart. By default, the valueType of an axis is set to Double, which is suitable for displaying continuous numerical data.

Before you begin, ensure the Syncfusion React Chart is installed and configured in your project. For setup steps, see the Getting Started for React documentation.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
  const primaryyAxis: AxisModel = { title: 'Runs' };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Range

The range of the axis is calculated automatically based on the provided data. You can also customize the visible range by using the minimum, maximum, and interval properties of the AxisModel. To control the lower bound separately, use the startFromZero property, and to derive evenly spaced intervals, use desiredIntervals.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', minimum: 1, maximum: 20, interval: 5 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', minimum: 1, maximum: 20, interval: 5 };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Range Padding

Padding can be applied to the minimum and maximum values of the axis range by using the rangePadding property. The default value is Auto. The numeric axis supports the following padding options:

  • None
  • Round
  • Additional
  • Normal
  • Auto

Numeric - Auto (default)

When the rangePadding property is set to Auto, the horizontal numeric axis uses None as padding, while the vertical numeric axis uses Normal padding. The orientation is determined by whether the axis is the primaryXAxis or primaryYAxis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Auto' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Auto' };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Numeric - None

When the rangePadding property is set to None, the minimum and maximum values of the axis are derived directly from the data.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'None' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'None' };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Numeric - Round

When the rangePadding property is set to Round, the minimum and maximum values are rounded to the nearest values divisible by the interval. For example, with a data minimum of 3 and an interval of 5, the axis minimum is rounded to 5, and with a data maximum of 17, the axis maximum is rounded to 20.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Round' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Round' };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Numeric - Additional

When the rangePadding property is set to Additional, one interval is added to both the minimum and maximum values of the axis range.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Additional' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Additional' };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Numeric - Normal

When the rangePadding property is set to Normal, padding is applied to the axis by adding a default percentage of the range to both ends so that data points are not flush against the plot edges.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Normal' };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Normal' };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

Label Format

Numeric axis labels can be formatted by using the labelFormat property. This property supports all Globalize numeric formats. The format applied is also affected by the chart’s locale.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Runs', labelFormat: 'c' };
    return <ChartComponent id='charts' primaryYAxis={primaryxAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { title: 'Runs', labelFormat: 'c' };

  return <ChartComponent id='charts'
      primaryYAxis={primaryxAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Area'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

The following table shows examples of commonly used numeric label formats and their corresponding outputs.

Label Value Label Format property value Result Description
1000 n1 1000.0 Rounded to 1 decimal place
1000 n2 1000.00 Rounded to 2 decimal places
1000 n3 1000.000 Rounded to 3 decimal places
0.01 p1 1.0% Converted to percentage with 1 decimal place
0.01 p2 1.00% Converted to percentage with 2 decimal places
0.01 p3 1.000% Converted to percentage with 3 decimal places
1000 c1 $1000.0 Currency format with 1 decimal place
1000 c2 $1000.00 Currency format with 2 decimal places

Grouping Separator

To separate groups of thousands in numeric labels, enable the useGroupingSeparator property on the Chart (a chart-level ChartModel property, not an axis property). The separator character is determined by the chart’s locale.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { groupingData } from './datasource';
function App() {
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryYAxis={primaryyAxis} title='England - Sales Rate' useGroupingSeparator={true}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={groupingData} xName='x' yName='y' name='England' 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, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries, Selection, AxisModel }
from'@syncfusion/ej2-react-charts';
import { groupingData } from './datasource';
function App() {

  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryYAxis={primaryyAxis}
      title='England - Sales Rate' useGroupingSeparator={true}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={groupingData} xName='x' yName='y' name='England' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let groupingData = [
    { x: 10, y: 7000 },   { x: 20, y: 1000 }, 
    { x: 30, y: 12000 },  { x: 40, y: 14000 }, 
    { x: 50, y: 11000 },  { x: 60, y: 5000 },
    { x: 70, y: 7300 },   { x: 80, y: 9000 }, 
    { x: 90, y: 12000 },  { x: 100, y: 14000 }, 
    { x: 110, y: 11000 }, { x: 120, y: 5000 }
];
export let groupingData: Object[] = [
    { x: 10, y: 7000 },   { x: 20, y: 1000 }, 
    { x: 30, y: 12000 },  { x: 40, y: 14000 }, 
    { x: 50, y: 11000 },  { x: 60, y: 5000 },
    { x: 70, y: 7300 },   { x: 80, y: 9000 }, 
    { x: 90, y: 12000 },  { x: 100, y: 14000 }, 
    { x: 110, y: 11000 }, { x: 120, y: 5000 }
];

Custom Label Format

The numeric axis also supports custom label formats by using the {value} placeholder within the labelFormat string, where {value} is replaced with the actual numeric axis label. For example, labelFormat: '{value}°C' displays the value 20 as 20°C.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {
    const primaryyAxis = { labelFormat: '${value}K' };
    return <ChartComponent id='charts' primaryYAxis={primaryyAxis} title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' 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, AreaSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { numericData } from './datasource';
function App() {

  const primaryyAxis: AxisModel = { labelFormat: '${value}K' };

  return <ChartComponent id='charts'
      primaryYAxis={primaryyAxis}
      title='England - Run Rate'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, AreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={numericData} xName='x' yName='y' name='England' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let numericData = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];
export let numericData: Object[] = [
    { x: 1, y: 7 },   { x: 2, y: 1 }, 
    { x: 3, y: 1 },   { x: 4, y: 14 }, 
    { x: 5, y: 1 },   { x: 6, y: 10 },
    { x: 7, y: 8 },   { x: 8, y: 6 }, 
    { x: 9, y: 10 },  { x: 10, y: 10 }, 
    { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, 
    { x: 15, y: 5 },  { x: 16, y: 2 }, 
    { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 },  { x: 20, y: 10 }
];

See also