You can use numeric axis to represent numeric values of data in chart. By default, the valueType
of an axis
is Double
.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Range for an axis, will be calculated automatically based on the provided data, you can also customize
the range of the axis using minimum
,
maximum
and interval
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, AreaSeries } from '@syncfusion/ej2-react-charts';
import { numericData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', minimum: 1, maximum: 20, interval: 5 };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', minimum: 1, maximum: 20, interval: 5 };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Padding can be applied to the minimum and maximum extremes of the axis range by using the
rangePadding
property. Numeric axis supports following types of padding.
Numeric - None
When the rangePadding
is set to None
, minimum and maximum of an axis is based on 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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'None' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'None' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric - Round
When the rangePadding
is set to Round
, minimum and maximum will be
rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the
interval is 1, then the minimum will be rounded to 3.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Round' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Round' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric - Additional
When the rangePadding
is set to Additional
, interval of an axis
will be padded to the minimum and maximum of the axis.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Additional' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Additional' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric - Normal
When the rangePadding
is set to Normal
, padding is applied to the
axis based on default range calculation.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Normal' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Normal' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric - Auto
When the rangePadding
is set to Auto
,horizontal numeric axis takes
None as padding calculation, while the vertical numeric axis takes Normal as padding calculation.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { valueType: 'Double', title: 'Overs', rangePadding: 'Auto' };
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'Double', title: 'Overs', rangePadding: 'Auto' };
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric Label Format
Numeric labels can be formatted by using the labelFormat
property.
Numeric labels supports all globalize format.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = { title: 'Runs', labelFormat: 'c' };
}
render() {
return <ChartComponent id='charts' primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { title: 'Runs', labelFormat: 'c' };
render() {
return <ChartComponent id='charts'
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The following table describes the result of applying some commonly used label formats on numeric values.
Label Value | Label Format property value | Result | Description |
1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
1000 | c1 | * 000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
1000 | c2 | * 000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
To separate groups of thousands, use useGroupingSeparator
property in chart.
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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryyAxis = { title: 'Runs' };
}
render() {
return <ChartComponent id='charts' primaryYAxis={this.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>;
}
}
;
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}
from'@syncfusion/ej2-react-charts';
import { groupingData } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryyAxis: AxisModel = { title: 'Runs' };
render() {
return <ChartComponent id='charts'
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Axis also supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 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.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryyAxis = { labelFormat: '${value}K' };
}
render() {
return <ChartComponent id='charts' primaryYAxis={this.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>;
}
}
;
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.ts';
class App extends React.Component<{}, {}> {
public primaryyAxis: AxisModel = { labelFormat: '${value}K' };
render() {
return <ChartComponent id='charts'
primaryYAxis={this.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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));