Ej1 api migration in EJ2 TypeScript Linear gauge control

19 Apr 202324 minutes to read

This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.

Linear gauge dimensions

Behavior API in Essential JS 1 API in Essential JS 2
Height Property: height

$(“#container”).ejLinearGauge({ height: 150 });		 Property: height

let gauge: LinearGauge = new LinearGauge({
  height : ‘150px’
});
gauge.appendTo(‘#container’);
Width Property: width

$(“#container”).ejLinearGauge({ width: 200 });		 Property: width

let gauge: LinearGauge = new LinearGauge({
  width : ‘200px’
});
gauge.appendTo(‘#container’);
Height(In Percentage) Not Applicable Property: height

let gauge: LinearGauge = new LinearGauge({
  height : ‘70%’
});
gauge.appendTo(‘#container’);
Width(In Percentage) Not Applicable Property: width

let gauge: LinearGauge = new LinearGauge({
  width : ‘100%px’
});
gauge.appendTo(‘#container’);

Line customizaton

Behavior API in Essential JS 1 API in Essential JS 2
Height Property: scales.length

$(“#container”).ejLinearGauge({
  scales:[{
    length: 300
  }] });		 Property: axes.line.height

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { height : 150 }
  }] });
gauge.appendTo(‘#container’);
Width Property: scales.width

$(“#container”).ejLinearGauge({
  scales:[{
    width: 300
  }] });		 Property: axes.line.width

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { width : 2 }
  }] });
gauge.appendTo(‘#container’);
Color Property: scales.backgroundColor

$(“#container”).ejLinearGauge({
  scales:[{
    backgroundColor: “blue”
  }] });		 Property: axes.line.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { color : ‘#4286f4’ }
  }] });
gauge.appendTo(‘#container’);
Offset Not Applicable Property: axes.line.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { offset : 2 }
  }] });
gauge.appendTo(‘#container’);
Opacity Property: scales.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    opacity: 0.2
  }] });		 Not Applicable
DashArray Not Applicable Property: axes.line.dashArray

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { dashArray : ‘1’ }
  }] });
gauge.appendTo(‘#container’);

Ticks

Behavior API in Essential JS 1 API in Essential JS 2
Type of Ticks Property: scales.ticks.type

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “majorinterval” }]
  }] });		 Property: axes.majorTicks.height

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { }
  }] });
gauge.appendTo(‘#container’);
Height of Major Ticks Property: scales.ticks.height

$(“#container”).ejLinearGauge({
  scales: [{
    ticks: [{ type: “majorinterval”, height: 8 }]
  }] });		 Property: axes.majorTicks.height

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { height : 10 }
  }] });
gauge.appendTo(‘#container’);
Width of Major Ticks Property: scales.ticks.width

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “majorinterval”, width: 5 }]
  }] });		 Property: axes.majorTicks.width

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { width : 2 }
  }] });
gauge.appendTo(‘#container’);
Color of Major Ticks Property: scales.ticks.color

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “majorinterval”, color: “Blue” }]
  }] });		 Property: axes.majorTicks.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { color: “Blue: }
  }] });
gauge.appendTo(‘#container’);
Offset for Major Ticks Property: scales.ticks.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ distanceFromScale: { x: 5, y: 5 }, type: “majorinterval” }]
  }] });		 Property: axes.majorTicks.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { offset : 1 }
  }] });
gauge.appendTo(‘#container’);
Interval of Major Ticks Property: scales.majorIntervalValue

$(“#container”).ejLinearGauge({
  scales: [{ majorIntervalValue: 15 }] });		 Property: axes.majorTicks.interval

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { interval : 20 }
  }] });
gauge.appendTo(‘#container’);
Angle of Major Ticks Property: scales.ticks.angle

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “majorinterval”, angle: 30 }]
  }] });		 Not Applicable
Opcity of Major Ticks Property: scales.ticks.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “majorinterval”, opacity: 0.5 }]
  }] });		 Not Applicable
Height of Minor Ticks Property: scales.ticks.height

$(“#container”).ejLinearGauge({
  scales: [{
    ticks: [{ type: “minorinterval”, height: 8 }]
  }] });		 Property: axes.minorTicks.height

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    minorTicks: { height : 10 }
  }] });
gauge.appendTo(‘#container’);
Width of Minor Ticks Property: scales.ticks.width

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “minorinterval”, width: 5 }]
  }] });		 Property: axes.minorTicks.width

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    minorTicks: { width : 2 }
  }] });
gauge.appendTo(‘#container’);
Color of Minor Ticks Property: scales.ticks.color

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “minorinterval”, color: “Blue” }]
  }] });		 Property: axes.minorTicks.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    minorTicks: { color: “Blue: }
  }] });
gauge.appendTo(‘#container’);
Offset for Minor Ticks Property: scales.ticks.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ distanceFromScale: { x: 5, y: 5 }, type: “minorinterval” }]
  }] });		 Property: axes.minorTicks.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    minorTicks: { offset : 1 }
  }] });
gauge.appendTo(‘#container’);
Interval of Minor Ticks Property: scales.minorIntervalValue

$(“#container”).ejLinearGauge({
  scales: [{ minorIntervalValue: 8 }] });		 Property: axes.minorTicks.interval

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    minorTicks: { interval : 5 }
  }] });
gauge.appendTo(‘#container’);
Angle of Minor Ticks Property: scales.ticks.angle

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “minorinterval”, angle: 30 }]
  }] });		 Not Applicable
Opcity of Minor Ticks Property: scales.ticks.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    ticks: [{ type: “minorinterval”, opacity: 0.5 }]
  }] });		 Not Applicable

Labels

Behavior API in Essential JS 1 API in Essential JS 2
Angle Property: scales.labels.angle

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ angle: 15 }]
  }] });		 Not Applicable
Offset Property: scales.labels.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ distanceFromScale: { x: -5, y: 10 } }]
  }] });		 Property: axes.labelStyle.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { offset : 3 }
  }] });
gauge.appendTo(‘#container’);
Format Property: scales.labels.unitText

$(“#container”).ejLinearGauge({
  scales:[{
   labels: [{ unitText: “F” }]
  }] });		 Property: axes.labelStyle.format

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { format: ‘c’ }
  }] });
gauge.appendTo(‘#container’);
Unit Text Placement Property: scales.labels.unitTextPlacement

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ unitTextPlacement: “front” }]
  }] });		 Not Applicable
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { useRangeColor: true }
  }] });
gauge.appendTo(‘#container’);
Opacity Property: scales.labels.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ opacity: 0.5 }]
  }] });		 Property: axes.labelStyle.font.opacity

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font: { opacity: 5 } }
  }] });
gauge.appendTo(‘#container’);
Label Text Color Property: scales.labels.textColor

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ textColor: “Red” }]
  }] });		 Property: axes.labelStyle.font.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font:{ color: ‘red’ } }
  }] });
gauge.appendTo(‘#container’);
Label Font Family Property: scales.labels.font.fontFamily

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ font: { fontFamily: “Segoe UI” } }]
  }] });		 Property: axes.labelStyle.font.fontFamily

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font:{ fontFamily: ‘Arial’ } }
  }] });
gauge.appendTo(‘#container’);
Label Font Style Property: scales.labels.font.fontStyle

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ font: {
      fontStyle: ej.datavisualization.LinearGauge.FontStyle.Normal } }]
  }] });		 Property: axes.labelStyle.font.fontStyle

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font: { fontStyle: ‘Bold’ } }
  }] });
gauge.appendTo(‘#container’);
Label Size Property: scales.labels.font.size

$(“#container”).ejLinearGauge({
  scales:[{
    labels: [{ font: { size: “20px” } }]
  }] });		 Property: axes.labelStyle.font.size

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font:{ size: “15px” } }
  }] });
gauge.appendTo(‘#container’);
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { font:{ fontWeight: ‘4’ } }
  }] });
gauge.appendTo(‘#container’);

Axis

Behavior API in Essential JS 1 API in Essential JS 2
Minimum Value Property: scales.minimum

$(“#container”).ejLinearGauge({
  scales: [{ minimum: 20 }]
});		 Property: axes.minimum

let gauge: LinearGauge = new LinearGauge({
  axes: [{ minimum: 20 }]
});
gauge.appendTo(‘#container’);
Maximum Value Property: scales.maximum

$(“#container”).ejLinearGauge({
  scales: [{ maximum: 120 }]
});		 Property: axes.maximum

let gauge: LinearGauge = new LinearGauge({
  axes: [{ maximum: 120 }]
});
gauge.appendTo(‘#container’);
Inverted Position Not Applicable Property: axes.isInversed

let gauge: LinearGauge = new LinearGauge({
  axes: [{ isInversed: true }]
});
gauge.appendTo(‘#container’);
Opposed Position Not Applicable Property: axes.opposedPosition

let gauge: LinearGauge = new LinearGauge({
  axes: [{ opposedPosition: true }]
});
gauge.appendTo(‘#container’);

Ranges

Behavior API in Essential JS 1 API in Essential JS 2
Start Value Property: scales.ranges.startValue

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ startValue: 20 }]
  }] });		 Property: axes.ranges.start

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ start: 20 }]
  }] });
gauge.appendTo(‘#container’);
End Value Property: scales.ranges.endValue

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ endValue: 20 }]
  }] });		 Property: axes.ranges.end

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ end: 20 }]
  }] });
gauge.appendTo(‘#container’);
Start Width Property: scales.ranges.startWidth

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ startWidth: 10 }]
  }] });		 Property: axes.ranges.startWidth

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ startWidth: 10 }]
  }] });
gauge.appendTo(‘#container’);
End Width Property: scales.ranges.endWidth

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ endWidth: 15 }]
  }] });		 Property: axes.ranges.endWidth

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ endWidth: 15 }]
  }] });
gauge.appendTo(‘#container’);
Color Property: scales.ranges.backgroundColor

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ backgroundColor: “red” }]
  }] });		 Property: axes.ranges.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ color: “red” }]
  }] });
gauge.appendTo(‘#container’);
Offset Property: scales.ranges.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ distanceFromScale: 10 }]
  }] });		 Property: axes.ranges.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ offset: 10 }]
  }] });
gauge.appendTo(‘#container’);
Range Position Property: scales.ranges.placement

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ placement: “Near” }]
  }] });		 Property: axes.ranges.position

let gauge: LinearGauge = new LinearGauge({
 axes: [{
    ranges: [{ position: ‘Inside’ }]
  }] });
gauge.appendTo(‘#container’);
Opacity Property: scales.ranges.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ opacity: 0.3 }]
  }] });		 Not Applicable
Border Customization Property: scales.ranges.border

$(“#container”).ejLinearGauge({
  scales:[{
    ranges: [{ border: { color: “green”, width: 2 } }]
  }] });		 Property: axes.ranges.border

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ border: { color: “blue”, width: 2 } }]
  }] });
gauge.appendTo(‘#container’);

Bar Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Bar Pointer Property: scales.barPointers.value

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{ value: 20 }]
  }] });		 Property: axes.pointers.value

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Bar’, value: 20 }]
  }] });
gauge.appendTo(‘#container’);
Color of Bar Pointer Property: scales.barPointers.backgroundColor

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{ value: 20, backgroundColor: “red” }]
  }] });		 Property: axes.pointers.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Bar’, value: 20, color: ‘red’ }]
  }] });
gauge.appendTo(‘#container’);
Offset of Bar Pointer Property: scales.barPointers.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{ value: 40, distanceFromScale: 20 }]
  }] });		 Property: axes.pointers.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Bar’, value: 20, offset: 20 }]
  }] });
gauge.appendTo(‘#container’);
Opacity of Bar Pointer Property: scales.barPointers.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{ value: 40, opacity: 0.5 }]
  }] });		 Property: axes.pointers.opacity

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Bar’, value: 20, opacity: 0.5 }]
  }] });
gauge.appendTo(‘#container’);
Width of Bar Pointer Property: scales.barPointers.width

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{ value: 40, width: 25 }]
  }] });		 Property: axes.pointers.width

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Bar’, value: 20, width: 25 }]
  }] });
gauge.appendTo(‘#container’);
Gradients of Bar Pointer Property: scales.barPointers.gradients

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{
      value: 40,
      gradients: { colorInfo:[{ colorStop : 0, color:”#FFFFFF”}] }
    }]
  }] });		 Not Applicable
Border of Bar Pointer Property: scales.barPointers.border

$(“#container”).ejLinearGauge({
  scales:[{
    barPointers: [{
      value: 40,
      border: { color: “red”, width: 2 } }]
  }] });		 Property: axes.pointers.border

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Bar’,
      value: 20,
      border: { color: ‘red’, width: 2.5 } }]
  }] });
gauge.appendTo(‘#container’);
Animation of Bar Pointer Property: enableAnimation

$(“#container”).ejLinearGauge({
  enableAnimation: true
  }] });		 Property: axes.pointers.animationDuration

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Bar’,
      value: 20,
      animationDuration: 2500 }]
  }] });
gauge.appendTo(‘#container’);
Rounded Corner of Bar Pointer Not Applicable Property: axes.pointers.roundedCornerRadius

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Bar’,
      value: 20,
      roundedCornerRadius: 15 }]
  }] });
gauge.appendTo(‘#container’);

Marker Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Marker Pointer Property: scales.markerPointers.value

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 20 }]
  }] });		 Property: axes.pointers.value

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Marker’, value: 20 }]
  }] });
gauge.appendTo(‘#container’);
Color of Marker Pointer Property: scales.markerPointers.backgroundColor

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 20, backgroundColor: “blue” }]
  }] });		 Property: axes.pointers.color

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Marker’, value: 20, color: ‘red’ }]
  }] });
gauge.appendTo(‘#container’);
Offset of Marker Pointer Property: scales.markerPointers.distanceFromScale

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 40, distanceFromScale: 10 }]
  }] });		 Property: axes.pointers.offset

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Marker’, value: 20, offset: 10 }]
  }] });
gauge.appendTo(‘#container’);
Opacity of Marker Pointer Property: scales.markerPointers.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 40, opacity: 1 }]
  }] });		 Property: axes.pointers.opacity

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Marker’, value: 20, opacity: 1 }]
  }] });
gauge.appendTo(‘#container’);
Width of Marker Pointer Property: scales.markerPointers.width

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 40, width: 20 }]
  }] });		 Property: axes.pointers.width

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: ‘Marker’, value: 20, width: 25 }]
  }] });
gauge.appendTo(‘#container’);
Gradients of Marker Pointer Property: scales.markerPointers.gradients

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{
      value: 40,
      gradients:{colorInfo:[{colorStop : 0, color:”#FFFFFF”}]}
    }]
  }] });		 Not Applicable
Border of Marker Pointer Property: scales.markerPointers.border

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{
      value: 40,
      border: { color: “red”, width: 2 } }]
  }] });		 Property: axes.pointers.border

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      border: { color: ‘red’, width: 2.5 } }]
  }] });
gauge.appendTo(‘#container’);
Animation of Marker Pointer Property: enableMarkerPointerAnimation

$(“#container”).ejLinearGauge({
  enableMarkerPointerAnimation: true
  }] });		 Property: axes.pointers.animationDuration

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      animationDuration: 1000 }]
  }] });
gauge.appendTo(‘#container’);
Type of Marker Pointer Property: scales.markerPointers.type

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{
      value: 40,
      type: ej.datavisualization.LinearGauge.
        MarkerType.Diamond }]
  }] });		 Property: axes.pointers.markerType

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      markerType: ‘Diamond’ }]
  }] });
gauge.appendTo(‘#container’);
Placement of Marker Pointer Property: scales.markerPointers.placement

$(“#container”).ejLinearGauge({
  scales:[{
    markerPointers: [{
      value: 40,
      placement: ej.datavisualization.LinearGauge.
        PointerPlacement.Near }]
  }] });		 Property: axes.pointers.placement

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      placement: ‘Center’ }]
  }] });
gauge.appendTo(‘#container’);
Drag of Marker Pointer Property: readOnly

$(“#container”).ejLinearGauge({ readOnly: false }		 Property: axes.pointers.enableDrag

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      enableDrag: true }]
  }] });
gauge.appendTo(‘#container’);
Image Marker Pointer Not Applicable Property: axes.pointers.imageUrl

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{
      type: ‘Marker’,
      value: 20,
      imageUrl: ‘./image.png’ }]
  }] });
gauge.appendTo(‘#container’);

Annotation

Behavior API in Essential JS 1 API in Essential JS 2
Content Property: scales.customLabels.value

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge” }]
  }] });		 Property: annotations.content

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation” }] });
gauge.appendTo(‘#container’);
Horizontal Alignment Not Applicable Property: annotations.horizontalAlignment

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, horizontalAlignment: ‘Center’ }] });
gauge.appendTo(‘#container’);
Vertical Alignment Not Applicable Property: annotations.verticalAlignment

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, verticalAlignment: ‘Far’ }] });
gauge.appendTo(‘#container’);
Position of X Property: scales.customLabels.position.x

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, position: { x: 20 } }]
  }] });		 Property: annotations.x

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, x: 35 }] });
gauge.appendTo(‘#container’);
Position of Y Property: scales.customLabels.position.y

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, position: { y: 30 } }]
  }] });		 Property: annotations.y

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, y: 40 }] });
gauge.appendTo(‘#container’);
Z Index Not Applicable Property: annotations.zIndex

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, zIndex: 1 }] });
gauge.appendTo(‘#container’);
Axis Index Not Applicable Property: annotations.axisIndex

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, axisIndex: 0 }] });
gauge.appendTo(‘#container’);
Axis Value Not Applicable Property: annotations.axisValue

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, axisValue: 35 }] });
gauge.appendTo(‘#container’);
Font customization Property: scales.customLabels.font

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, font: { size: “30px” } }]
  }] });		 Property: annotations.font

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, font: { size: ‘15px’ } }] });
gauge.appendTo(‘#container’);
Annotation Color Property: scales.customLabels.color

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, color: “yellow” }]
  }] });		 Property: annotations.font

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, font: { color: ‘red’ } }] });
gauge.appendTo(‘#container’);
Opacity of Annotation Property: scales.customLabels.opacity

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, opacity: 0.5 }]
  }] });		 Property: annotations.font

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: “Annotation”, font: { opacity: 0.7 } }] });
gauge.appendTo(‘#container’);
Position Type Property: scales.customLabels.positionType

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, positionType: “outer” }]
  }] });		 Not applicable
TextAngle of Annotation Property: scales.customLabels.textAngle

$(“#container”).ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: “LinearGauge”, textAngle: 25 }]
  }] });		 Not applicable

Tooltip

Behavior API in Essential JS 1 API in Essential JS 2
Tooltip for Pointer Not Applicable Property: tooltip.enable

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true }
 });
gauge.appendTo(‘#container’);
Tooltip for Label Property: tooltip.showLabelTooltip

$(“#container”).ejLinearGauge({
  tooltip: {
    showLabelTooltip: true
  });		 Not Applicable
Tooltip Format Not Applicable Property: tooltip.format

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, format: ${pointers.value}cm }
 });
gauge.appendTo(‘#container’);
Tooltip Color Not Applicable Property: tooltip.fill

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, fill: ‘gray’ }
 });
gauge.appendTo(‘#container’);
Tooltip Template Property: tooltip.templateID

$(“#container”).ejLinearGauge({
  tooltip: {
    templateID: true
  });		 Property: tooltip.template

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, template: ‘Template’ }
 });
gauge.appendTo(‘#container’);
Tooltip Animation Not Applicable Property: tooltip.enableAnimation

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, enableAnimation: true }
 });
gauge.appendTo(‘#container’);
Tooltip Border Not Applicable Property: tooltip.border

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, border: { width: 2, color: ‘red’ }
 });
gauge.appendTo(‘#container’);
Tooltip TextStyle Not Applicable Property: tooltip.textStyle

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true, textStyle: { color: ‘white’, size: ‘10px’ }
 });
gauge.appendTo(‘#container’);

Appearence of Linear Gauge

Behavior API in Essential JS 1 API in Essential JS 2
Background Color Property: backgroundColor

$(“#container”).ejLinearGauge({ backgroundColor: “Red” });		 Property: background

let gauge: LinearGauge = new LinearGauge({
  background: ‘skyblue’
 });
gauge.appendTo(‘#container’);
Border Color Property: borderColor

$(“#container”).ejLinearGauge({ borderColor: “Black” });		 Property: border.color

let gauge: LinearGauge = new LinearGauge({
  border: { color: ‘red’ }
 });
gauge.appendTo(‘#container’);
Margin Not Applicable Property: margin

let gauge: LinearGauge = new LinearGauge({
  margin: { left: 40, right: 40, top: 40, bottom: 40 }
 });
gauge.appendTo(‘#container’);
Orientation Property: orientation

$(“#container”).ejLinearGauge({ orientation: “Vertical” });		 Property: orientation

let gauge: LinearGauge = new LinearGauge({
  orientation: ‘Horizontal’
 });
gauge.appendTo(‘#container’);
Locale Property: locale

$(“#container”).ejLinearGauge({ locale: “en-US” });		 Property: locale

let gauge: LinearGauge = new LinearGauge({
  locale: ‘en-US’
 });
gauge.appendTo(‘#container’);
Theme Property: theme

$(“#container”).ejLinearGauge({
  theme: ej.datavisualization.LinearGauge.flatdark });		 Property: theme

let gauge: LinearGauge = new LinearGauge({
  theme: ‘Highcontrast’
 });
gauge.appendTo(‘#container’);
Gauge Title Not Applicable Property: title

let gauge: LinearGauge = new LinearGauge({
  title: ‘Linear Gauge’
 });
gauge.appendTo(‘#container’);

Gauge Container type

Behavior API in Essential JS 1 API in Essential JS 2
Container Type Property: scales.type

$(“#container”).ejLinearGauge({
  scales: [{
    type: ‘thermometer’
  }] });		 Property: container.type

let gauge: LinearGauge = new LinearGauge({
  container: { type: ‘Thermometer’ }
 });
gauge.appendTo(‘#container’);
Container Height Not Applicable Property: container.height

let gauge: LinearGauge = new LinearGauge({
  container: { height: 20 }
 });
gauge.appendTo(‘#container’);
Container Width Not Applicable Property: container.width

let gauge: LinearGauge = new LinearGauge({
  container: { width: 10 }
 });
gauge.appendTo(‘#container’);
Container Offset Not Applicable Property: container.offset

let gauge: LinearGauge = new LinearGauge({
  container: { offset: 5 }
 });
gauge.appendTo(‘#container’);

Events

Behavior API in Essential JS 1 API in Essential JS 2
Animation Complete Event Not Applicable Event: animationComplete

let gauge: LinearGauge = new LinearGauge({
  animationComplete: function(e: IAnimationCompleteEventArgs): void { }
});
gauge.appendTo(‘#container’);
Annotation Render Event Event: drawCustomLabel

$(“#container”).ejLinearGauge({
  drawCustomLabel: function (args) {}
});		 Event: annotationRender

let gauge: LinearGauge = new LinearGauge({
  annotationRender: function(e: IAnnotationRenderEventArgs): void { }
})
gauge.appendTo(‘#container’);
AxisLabel Render Event Event: drawLabels

$(“#container”).ejLinearGauge({
  drawLabels: function (args) {}
});		 Event: axisLabelRender

let gauge: LinearGauge = new LinearGauge({
  axisLabelRender: function(e: IAxisLabelRenderEventArgs): void { }
})
gauge.appendTo(‘#container’);
Load Event Event: load

$(“#container”).ejLinearGauge({
  load: function (args) {}
});		 Event: load

let gauge: LinearGauge = new LinearGauge({
  load: function(e: ILoadEventArgs): void { }
})
gauge.appendTo(‘#container’);
Loaded Event Not Applicable Event: loaded

let gauge: LinearGauge = new LinearGauge({
  loaded: function(e: ILoadedEventArgs): void { }
})
gauge.appendTo(‘#container’);
Resize Event Not Applicable Event: resized

let gauge: LinearGauge = new LinearGauge({
  resized: function(e: IResizeEventArgs): void { }
})
gauge.appendTo(‘#container’);
Tooltip Render Event Not Applicable Event: tooltipRender

let gauge: LinearGauge = new LinearGauge({
  tooltipRender: function(e: ITooltipRenderEventArgs): void { }
})
gauge.appendTo(‘#container’);
Value Change Event Not Applicable Event: valueChange

let gauge: LinearGauge = new LinearGauge({
  valueChange: function(e: IValueChangeEventArgs): void { }
})
gauge.appendTo(‘#container’);
Mouse Move Event Event: mouseClickMove

$(“#container”).ejLinearGauge({
  mouseClickMove: function (args) {}
});		 Event: gaugeMouseMove

let gauge: LinearGauge = new LinearGauge({
  gaugeMouseMove: function(e: IMouseEventArgs): void { }
})
gauge.appendTo(‘#container’);
Mouse Up Event Event: mouseClickUp

$(“#container”).ejLinearGauge({
  mouseClickUp: function (args) {}
});		 Event: gaugeMouseUp

let gauge: LinearGauge = new LinearGauge({
  gaugeMouseUp: function(e: IMouseEventArgs): void { }
})
gauge.appendTo(‘#container’);
Mouse Down Event Not Applicable Event: gaugeMouseDown

let gauge: LinearGauge = new LinearGauge({
  gaugeMouseDown: function(e: IMouseEventArgs): void { }
})
gauge.appendTo(‘#container’);
Mouse Leave Event Not Applicable Event: gaugeMouseLeave

let gauge: LinearGauge = new LinearGauge({
  gaugeMouseLeave: function(e: IMouseEventArgs): void { }
})
gauge.appendTo(‘#container’);
Mouse Click Event Event: mouseClick

$(“#container”).ejLinearGauge({
  mouseClick: function (args) {}
});		 Not Applicable
Render Complete Event Event: renderComplete

$(“#container”).ejLinearGauge({
  renderComplete: function (args) {}
});		 Not Applicable
Double Click Event Event: doubleClick

$(“#container”).ejLinearGauge({
  doubleClick: function (args) {}
});		 Not Applicable
Right Click Event Event: rightClick

$(“#container”).ejLinearGauge({
  rightClick: function (args) {}
});		 Not Applicable
BarPointers Event Event: drawBarPointers

$(“#container”).ejLinearGauge({
  drawBarPointers: function (args) {}
});		 Not Applicable
Indicators Event Event: drawIndicators

$(“#container”).ejLinearGauge({
  drawIndicators: function (args) {}
});		 Not Applicable
MarkerPointer Event Event: drawMarkerPointers

$(“#container”).ejLinearGauge({
  drawMarkerPointers: function (args) {}
});		 Not Applicable
Ranges Event Event: drawRange

$(“#container”).ejLinearGauge({
  drawRange: function (args) {}
});		 Not Applicable
Gauge Initialized Event Event: init

$(“#container”).ejLinearGauge({
  init: function (args) {}
});		 Not Applicable