The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the valueType
of a Range Selector is Double.
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"));
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"));
The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the minimum
, maximum
, and interval
properties.
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"));
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"));
The numeric labels can be formatted using the labelFormat
property and it supports all the globalized formats.
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"));
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"));
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 Selector also supports the Custom Label formats using the placeholders such as {value}$, in which the value represents the axis label, e.g. 20$.
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"));
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"));
The Logarithmic supports the logarithmic scale, and it is used to visualize the data when the Range Selector has numerical values in both the lower (e.g.: 10-6) and the higher (e.g.: 106) orders of the 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";
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"));
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"));
To use logarithmic scale, inject the
Logarithmic
module using theRangeNavigator.Inject(Logarithmic)
method, and then set thevalueType
toLogarithmic
.
The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by 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";
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"));
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"));
The Logarithmic Base can be customized using the logBase
property. The default value of this 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";
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"));
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"));
The Range Selector supports the DateTime scale and displays the DateTime values as labels in the specified format.
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"));
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"));
Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.
The DateTime intervals can be customized using the interval
and the intervalType
properties of the Range Selector. For example, if the interval
is set to 2 and the intervalType
is set to years, the interval will be considered to be 2 years.
DateTime supports the following interval types:
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"));
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"));
The labelFormat
property is used to format and parse the date to all globalize format.
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"));
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"));
The following table shows the results of applying some common DateTime 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 |