Numeric scale is used to represent the numeric values of data in a chart. By default, the valueType of a range navigator is Double.
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = double;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
tooltip={this.tooltip}
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = double;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' tooltip={this.tooltip} value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = double;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
tooltip={this.tooltip}
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = double;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' tooltip={this.tooltip} value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Numeric labels can be formatted using the labelFormat property.
Numeric labels support all globalized formats.
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = double;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
labelFormat='n1'
tooltip={this.tooltip}
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = double;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' labelFormat='n1' tooltip={this.tooltip} value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
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 | $1,000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
1000 | c2 | $1,000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
The range navigator also supports custom label formats using placeholders such as {value}$, in which, the value represent the axis label, e.g. 20$.
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = double;
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
labelFormat='{value}
</div>
<div></div>
</div>
</div>
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = double;
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' labelFormat='{value}
</div>
<div></div>
</div>
</div>
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Logarithmic supports logarithmic scale, and it is used to visualize data when the Range navigator has numerical values in both lower (e.g.: 10-6) and higher (e.g.: 106) orders of magnitude.
import {
StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = [];
public max: number = 100;
public chartLoad(): void {
let i: number;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
valueType='Logarithmic'
interval={1}
value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'
type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [];
this.max = 100;
}
chartLoad() {
let i;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts' labelPosition='Outside' valueType='Logarithmic' interval={1} value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Note: To use logarithmic scale, inject the Logarithmic module using the RangeNavigator.Inject(Logarithmic) method, and then set the valueType to Logarithmic.
Range
Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.
import {
StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = [];
public max: number = 100;
public chartLoad(): void {
let i: number;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
valueType='Logarithmic'
interval={1}
value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'
type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [];
this.max = 100;
}
chartLoad() {
let i;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts' labelPosition='Outside' valueType='Logarithmic' interval={1} value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Logarithmic base can be customized using the logBase property. The default value of the logBase property is 10.
import {
StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = [];
public max: number = 100;
public chartLoad(): void {
let i: number;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
valueType='Logarithmic'
logBase={2}
value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'
type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { StepLineSeries, Logarithmic, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [];
this.max = 100;
}
chartLoad() {
let i;
for (i = 0; i < 100; i++) {
this.data.push({
x: Math.pow(10, i * 0.1),
y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
});
}
}
render() {
this.chartLoad();
return <RangeNavigatorComponent id='charts' labelPosition='Outside' valueType='Logarithmic' logBase={2} value={[4, 6]}>
<Inject services={[StepLineSeries, Logarithmic, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='StepLine' width={2}>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Note: Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.
Date-time intervals can be customized using the interval and intervalType properties of the range navigator. For example, when you set interval as 2 and intervalType as years, the interval is considered as 2 years. Date-time supports the following interval types:
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Label Format
You can format and parse the date to all globalize format using labelFormat
property in an axis.
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='y/M/d' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='y/M/d' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
The following table describes the result of applying some common date time formats to the labelFormat
property
Label Value | Label Format Property Value | Result | Description |
new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
new Date(2000, 03, 10) | hm | 12:00 AM | Time of the date value is displayed as label |
new Date(2000, 03, 10) | hms | 12:00:00 AM | The Label is displayed in hours:minutes:seconds format |