Events in React Linear gauge component
3 Mar 202324 minutes to read
This section describes the Linear Gauge component’s event that gets triggered when corresponding operations are performed.
animationComplete
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function animationComplete(args){
}
return (<div>
<LinearGaugeComponent animationComplete={animationComplete}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective value={50} animationDuration={1000}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IAnimationCompleteEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function animationComplete(args: IAnimationCompleteEventArgs){
}
return (<div>
<LinearGaugeComponent animationComplete={animationComplete}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective value={50} animationDuration={1000}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
annotationRender
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function annotationRender(args){
}
return (<div>
<LinearGaugeComponent annotationRender={annotationRender}>
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Gauge</h1></div>' axisValue={0} zIndex='1'>
</AnnotationDirective>
</AnnotationsDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Annotations, AnnotationsDirective, AnnotationDirective, LinearGaugeComponent,Inject, IAnnotationRenderEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function annotationRender(args: IAnnotationRenderEventArgs){
}
return (<div>
<LinearGaugeComponent annotationRender={annotationRender}>
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Gauge</h1></div>' axisValue={0} zIndex='1'>
</AnnotationDirective>
</AnnotationsDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
axisLabelRender
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 } from '@syncfusion/ej2-react-lineargauge';
export function App(){
function axisLabelRender(args){
}
return (<div>
<LinearGaugeComponent axisLabelRender={axisLabelRender}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App(){
function axisLabelRender(args: IAxisLabelRenderEventArgs){
}
return (<div>
<LinearGaugeComponent axisLabelRender={axisLabelRender}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
beforePrint
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
var gaugeInstance;
function clickHandler(){
gaugeInstance.print();
}
function beforePrint(args){
}
return (<div>
<ButtonComponent onClick= { clickHandler }>print</ButtonComponent>
<LinearGaugeComponent allowPrint={true} ref={g => gaugeInstance = g} beforePrint={beforePrint}>
<Inject services={[Print]} />
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
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';
export function App() {
let gaugeInstance : LinearGaugeComponent | null;
function clickHandler(){
gaugeInstance?.print();
}
function beforePrint(args: IPrintEventArgs){
}
return (<div>
<ButtonComponent onClick= { clickHandler }>print</ButtonComponent>
<LinearGaugeComponent allowPrint={true} ref={g => gaugeInstance = g} beforePrint={beforePrint}>
<Inject services={[Print]} />
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
dragEnd
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 } from '@syncfusion/ej2-react-lineargauge';
export function App(){
function dragEnd(args){
}
return (<div>
<LinearGaugeComponent dragEnd={dragEnd}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App(){
function dragEnd(args: IPointerDragEventArgs){
}
return (<div>
<LinearGaugeComponent dragEnd={dragEnd}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
dragMove
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function dragMove(args){
}
return (<div>
<LinearGaugeComponent dragMove={dragMove}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function dragMove(args: IPointerDragEventArgs){
}
return (<div>
<LinearGaugeComponent dragMove={dragMove}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
dragStart
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function dragStart(args){
}
return (<div>
<LinearGaugeComponent dragStart={dragStart}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IPointerDragEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function dragStart(args: IPointerDragEventArgs){
}
return (<div>
<LinearGaugeComponent dragStart={dragStart}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
gaugeMouseDown
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseDown(args){
}
return (<div>
<LinearGaugeComponent gaugeMouseDown={gaugeMouseDown}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseDown(args: IMouseEventArgs){
}
return (<div>
<LinearGaugeComponent gaugeMouseDown={gaugeMouseDown}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
gaugeMouseLeave
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseLeave(args){
}
return (<div>
<LinearGaugeComponent gaugeMouseLeave={gaugeMouseLeave}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseLeave(args: IMouseEventArgs){
}
return (<div>
<LinearGaugeComponent gaugeMouseLeave={gaugeMouseLeave}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
gaugeMouseMove
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseMove(args){
}
return (<div>
<LinearGaugeComponent gaugeMouseMove={gaugeMouseMove}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseMove(args: IMouseEventArgs){
}
return (<div>
<LinearGaugeComponent gaugeMouseMove={gaugeMouseMove}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
gaugeMouseUp
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseUp(args){
}
return (<div>
<LinearGaugeComponent gaugeMouseUp={gaugeMouseUp}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IMouseEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function gaugeMouseUp(args: IMouseEventArgs){
}
return (<div>
<LinearGaugeComponent gaugeMouseUp={gaugeMouseUp}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
load
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function load(args){
}
return (<div>
<LinearGaugeComponent load={load}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, ILoadEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function load(args: ILoadEventArgs){
}
return (<div>
<LinearGaugeComponent load={load}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
loaded
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function loaded(args){
}
return (<div>
<LinearGaugeComponent loaded={loaded}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function loaded(args: ILoadedEventArgs){
}
return (<div>
<LinearGaugeComponent loaded={loaded}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
resized
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function resized(args){
}
return (<div>
<LinearGaugeComponent resized={resized}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, IResizeEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function resized(args: IResizeEventArgs){
}
return (<div>
<LinearGaugeComponent resized={resized}>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
tooltipRender
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,
GaugeTooltip, Inject
} from '@syncfusion/ej2-react-lineargauge';
export function App() {
function tooltipRender(args){
}
return (<div>
<LinearGaugeComponent tooltipRender={tooltipRender} tooltip={{ enable: true }}>
<Inject services={[GaugeTooltip]} />
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective,
ITooltipRenderEventArgs, GaugeTooltip, Inject
} from '@syncfusion/ej2-react-lineargauge';
export function App() {
function tooltipRender(args: ITooltipRenderEventArgs){
}
return (<div>
<LinearGaugeComponent tooltipRender={tooltipRender} tooltip={{ enable: true }}>
<Inject services={[GaugeTooltip]} />
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
valueChange
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 } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function valueChange(args){
}
return (<div>
<LinearGaugeComponent valueChange={valueChange}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, IValueChangeEventArgs } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function valueChange(args: IValueChangeEventArgs){
}
return (<div>
<LinearGaugeComponent valueChange={valueChange}>
<AxesDirective>
<AxisDirective>
<PointersDirective>
<PointerDirective enableDrag={true}>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);