This section describes the Linear Gauge component’s event that gets triggered when corresponding operations are performed.
When the pointer animation is completed, the animationComplete event will be triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IAnimationCompleteEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public animationComplete(args: IAnimationCompleteEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} animationComplete={this.animationComplete.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective value={10}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
animationComplete(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} animationComplete={this.animationComplete.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective value={10}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));Before the annotation is rendered in the Linear Gauge, the annotationRender event will be triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Annotations, AnnotationsDirective, AnnotationDirective, LinearGaugeComponent,Inject, IAnnotationRenderEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public annotationRender(args: IAnnotationRenderEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} annotationRender={this.annotationRender.bind(this)}>
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Gauge</h1></div>' axisValue={0} zIndex='1'>
</AnnotationDirective>
</AnnotationsDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Annotations, AnnotationsDirective, AnnotationDirective, LinearGaugeComponent, Inject } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
annotationRender(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} annotationRender={this.annotationRender.bind(this)}>
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Gauge</h1></div>' axisValue={0} zIndex='1'>
</AnnotationDirective>
</AnnotationsDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));Before each axis label is rendered in the Linear Gauge, the axisLabelRender event is fired. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public axisLabelRender(args: IAxisLabelRenderEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} axisLabelRender={this.axisLabelRender.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
axisLabelRender(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} axisLabelRender={this.axisLabelRender.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));The beforePrint event is fired before the print begins. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, Print, Inject, IPrintEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public clickHandler(){
this.linear.print();
}
public beforePrint(args: IPrintEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<ButtonComponent value='print' onClick= { this.clickHandler.bind(this)}>print</ButtonComponent>
<LinearGaugeComponent id='gauge' allowPrint={true} ref={g => this.linear = g} beforePrint={this.beforePrint.bind(this)}>
<Inject services={[Print]} />
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, Print, Inject } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
clickHandler() {
this.linear.print();
}
beforePrint(args) {
}
render() {
return (<div>
<ButtonComponent value='print' onClick={this.clickHandler.bind(this)}>print</ButtonComponent>
<LinearGaugeComponent id='gauge' allowPrint={true} ref={g => this.linear = g} beforePrint={this.beforePrint.bind(this)}>
<Inject services={[Print]}/>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));The dragEnd event will be fired before the pointer drag is completed. To know more about the argument of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public dragEnd(args: IPointerDragEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragEnd={this.dragEnd.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
dragEnd(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragEnd={this.dragEnd.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));The dragMove event will be fired when the pointer is dragged. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public dragMove(args: IPointerDragEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragMove={this.dragMove.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
dragMove(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragMove={this.dragMove.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));When the pointer drag begins, the dragStart event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public dragStart(args: IPointerDragEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragStart={this.dragStart.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
dragStart(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} dragStart={this.dragStart.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));When mouse is pressed down on the gauge, the gaugeMouseDown event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public gaugeMouseDown(args: IMouseEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseDown={this.gaugeMouseDown.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
gaugeMouseDown(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseDown={this.gaugeMouseDown.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));When mouse pointer moves over the gauge, the gaugemouseleave event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public gaugeMouseLeave(args: IMouseEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseLeave={this.gaugeMouseLeave.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
gaugeMouseLeave(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseLeave={this.gaugeMouseLeave.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));When mouse pointer leaves the gauge, the gaugeMouseMove event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public gaugeMouseMove(args: IMouseEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseMove={this.gaugeMouseMove.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
gaugeMouseMove(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseMove={this.gaugeMouseMove.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));When the mouse pointer is released over the Linear Gauge, the gaugeMouseUp event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public gaugeMouseUp(args: IMouseEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseUp={this.gaugeMouseUp.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
gaugeMouseUp(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} gaugeMouseUp={this.gaugeMouseUp.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));Before the Linear Gauge is loaded, the load event is fired. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, ILoadEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public load(args: ILoadEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} load={this.load.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
load(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} load={this.load.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));After the Linear Gauge has been loaded, the loaded event will be triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public loaded(args: ILoadedEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} loaded={this.loaded.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
loaded(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} loaded={this.loaded.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));After the window resizing, the resized event is triggered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IResizeEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public resized(args: IResizeEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} loaded={this.resized.bind(this)}>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
resized(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} loaded={this.resized.bind(this)}>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));The tooltipRender event is fired before the tooltip is rendered. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, ITooltipRenderEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public tooltipRender(args: ITooltipRenderEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} tooltipRender={this.tooltipRender.bind(this)} tooltip={{ enable: true }}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
tooltipRender(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} tooltipRender={this.tooltipRender.bind(this)} tooltip={{ enable: true }}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));The valueChange event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer here.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IValueChangeEventArgs } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component<{}, {}>{
public valueChange(args: IValueChangeEventArgs){
}
private linear: LinearGaugeComponent;
render(){
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} valueChange={this.valueChange.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('gauge'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';
class App extends React.Component {
valueChange(args) {
}
render() {
return (<div>
<LinearGaugeComponent id='gauge' ref={g => this.linear = g} valueChange={this.valueChange.bind(this)}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('gauge'));