Ej1 api migration in EJ2 TypeScript Circular 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.

Circular gauge dimensions

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

$(“#container”).ejCircularGauge({ height: 400 });		 Property: height

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

$(“#container”).ejCircularGauge({ width: 100 });		 Property: width

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

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

let gauge: CircularGauge = new CircularGauge({
  width : ‘80%’
});
gauge.appendTo(‘#container’);

Axis Line

Behavior API in Essential JS 1 API in Essential JS 2
Axisline Width Property: scales.size

$(“#container”).ejCircularGauge({
  scales: [{
    showScaleBar: true, size: 6
  }] });		 Property: axes.lineStyle.width

let gauge: CircularGauge = new CircularGauge({
  axes: [{ lineStyle: { width: 4 } }]
});
gauge.appendTo(‘#container’);
Axisline Color Property: scales.size

$(“#container”).ejCircularGauge({
  scales: [{
    showScaleBar: true, backgroundColor: “red”
  }] });		 Property: axes.lineStyle.width

let gauge: CircularGauge = new CircularGauge({
  axes: [{ lineStyle: { color: ‘red’ } }]
});
gauge.appendTo(‘#container’);
Axisline BackgroundColor Not Applicable Property: axes.background

let gauge: CircularGauge = new CircularGauge({
  axes: [{ background: ‘red’ }]
});
gauge.appendTo(‘#container’);
Axisline Direction Property: scales.direction

$(“#container”).ejCircularGauge({
  scales: [{
    direction: “counterclockwise”
  }] });		 Property: axes.direction

let gauge: CircularGauge = new CircularGauge({
  axes: [{ direction: ‘AntiClockWise’ }]
});
gauge.appendTo(‘#container’);
Axisline Radius Property: scales.radius

$(“#container”).ejCircularGauge({
  scales: [{
    showScaleBar: true, radius: 150
  }] });		 Property: axes.radius

let gauge: CircularGauge = new CircularGauge({
  axes: [{ radius: ‘150’ }]
});
gauge.appendTo(‘#container’);
Axisline Startangle Property: scales.startAngle

$(“#container”).ejCircularGauge({
  scales: [{
    startAngle: 80
  }] });		 Property: axes.startAngle

let gauge: CircularGauge = new CircularGauge({
  axes: [{ startAngle: 200 }]
});
gauge.appendTo(‘#container’);
Axisline Endangle Property: scales.sweepAngle

$(“#container”).ejCircularGauge({
  scales: [{
    sweepAngle: 250
  }] });		 Property: axes.endAngle

let gauge: CircularGauge = new CircularGauge({
  axes: [{ endAngle: 150 }]
});
gauge.appendTo(‘#container’);
Minimum Axisvalue Property: scales.minimum

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

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

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

let gauge: CircularGauge = new CircularGauge({
  axes: [{ maximum: 200 }]
});
gauge.appendTo(‘#container’);

Ticks

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

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

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

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

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ width: 3 }]
  }] });		 Property: axes.majorTicks.width

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ color: “#777777” }]
  }] });		 Property: axes.majorTicks.color

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

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

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ angle: 10 }]
  }] });		 Not Applicable
Interval of Major Ticks Property: scales.majorIntervalValue

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

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’, height: 12 }]
  }] });		 Property: axes.minorTicks.height

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’, width: 3 }]
  }] });		 Property: axes.minorTicks.width

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’, color: “#777777” }]
  }] });		 Property: axes.minorTicks.color

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

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’, distanceFromScale: 10 }]
  }] });		 Property: axes.minorTicks.offset

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    minorTicks: { offset: 10 }
  }] });
gauge.appendTo(‘#container’);
Angle of Major Ticks Property: scales.ticks.angle

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’, angle: 10 }]
  }] });		 Not Applicable
Interval of Minor Ticks Property: scales.majorIntervalValue

$(“#container”).ejCircularGauge({
  scales: [{
    ticks: [{ type: ‘minor’ }], majorIntervalValue: 10
  }] });		 Property: axes.minorTicks.interval

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    minorTicks: { interval: 10 }
  }] });
gauge.appendTo(‘#container’);

Labels

Behavior API in Essential JS 1 API in Essential JS 2
Autoangle Property: scales.labels.autoAngle

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ showLabels: true, autoAngle: true }]
  }] });		 Property: axes.labelStyle.autoAngle

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    labelStyle: { autoAngle: true }
  }] });
gauge.appendTo(‘#container’);
Angle Property: scales.labels.angle

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ showLabels: true, angle: 30 }]
  }] });		 Not Applicable
Offset Property: scales.labels.distanceFromScales

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ showLabels: true, distanceFromScales: 10 }]
  }] });		 Property: axes.labelStyle.offset

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

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ unitText: “kmph”, unitTextPosition: “front” }]
  }] });		 Property: axes.labelStyle.format

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    labelStyle: { format: “kmph” }
  }] });
gauge.appendTo(‘#container’);
UnitText Position Property: scales.labels.placement

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ showLabels: true, placement: “near” }]
  }] });		 Property: axes.labelStyle.position

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    labelStyle: { position: “Outside” }
  }] });
gauge.appendTo(‘#container’);
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    labelStyle: { useRangeColor: true }
  }] });
gauge.appendTo(‘#container’);
LabelText Color Property: scales.labels.color

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

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    labelStyle: { font: { color: “red” } }
  }] });
gauge.appendTo(‘#container’);
Opacity Property: scales.labels.opacity

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

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

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

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

$(“#container”).ejCircularGauge({
  scales: [{
    labels: [{ font: { fontStyle: “Bold” } }]
  }] });		 Property: axes.labelStyle.font.fontStyle

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

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

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

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

Ranges

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

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

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

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{ showRanges: true , endValue: 30 }]
  }] });		 Property: axes.ranges.end

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

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

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

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{ showRanges: true, endWidth: 10 }]
  }] });		 Property: axes.ranges.endWidth

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

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

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

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{ showRanges: true , distanceFromScale: 10 }]
  }] });		 Not Applicable
Placement Property: scales.ranges.placement

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{ showRanges: true, placement: “center” }]
  }] });		 Not Applicable
Opacity Property: scales.ranges.opacity

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{ showRanges: true, opacity: 0.5 }]
  }] });		 Not Applicable
Radius Not Applicable Property: axes.ranges.radius

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    ranges: [{ radius: ‘80’ }]
  }] });
gauge.appendTo(‘#container’);
Rounded Corner Radius Not Applicable Property: axes.ranges.roundedCornerRadius

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    ranges: [{ roundedCornerRadius: 10 }]
  }] });
gauge.appendTo(‘#container’);
Gradients Property: scales.ranges.gradients

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{
      showRanges: true,
      gradients: { colorInfo: [{ colorStop : 0, color:”#FFFFFF” }] } }]
  }] });		 Not Applicable
Border Property: scales.ranges.border

$(“#container”).ejCircularGauge({
  scales:[{
    ranges: [{
      showRanges: true,
      border: { color: “blue”, width: 2 } }]
  }] });		 Not Applicable

Needle Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Needle Pointer Property: scales.pointers.type

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘needle’ }]
  }] });		 Property: axes.pointers.type

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

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ backgroundColor: ‘red’ }]
  }] });		 Property: axes.pointers.color

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ color: ‘red’ }]
  }] });
gauge.appendTo(‘#container’);
Animation Property: enableAnimation

$(“#container”).ejCircularGauge({
  enableAnimation: true
});		 Property: axes.pointers.animation

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ animation: true, duration: 1000 }]
  }] });
gauge.appendTo(‘#container’);
Pointer Width Property: scales.pointers.width

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ width: 5 }]
  }] });		 Property: axes.pointers.pointerWidth

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ pointerWidth: 5 }]
  }] });
gauge.appendTo(‘#container’);
Pointer Radius Property: scales.pointers.distanceFromScale

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ distanceFromScale: 10 }]
  }] });		 Property: axes.pointers.radius

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ radius: 80 }]
  }] });
gauge.appendTo(‘#container’);
Opacity Property: scales.pointers.opacity

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ opacity: 0.5 }]
  }] });		 Not Applicable
Needle Type Property: scales.pointers.needleType

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ needleType: “triangle” }]
  }] });		 Not Applicable
Back Needle Length Property: scales.pointers.backNeedleLength

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ showBackNeedle: true, backNeedleLength: 3 }]
  }] });		 Property: axes.pointers.needleTail.length

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ needleTail: { length: 5 } }]
  }] });
gauge.appendTo(‘#container’);

Marker Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Marker Pointer Property: scales.pointers.type

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘marker’ }]
  }] });		 Property: axes.pointers.type

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘marker’, value: 20 }]
  }] });
gauge.appendTo(‘#container’);
Marker Type Property: scales.pointers.markerType

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘marker’, markerType: “rectangle” }]
  }] });		 Property: axes.pointers.markerShape

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘marker’, markerShape: ‘Diamond’ }]
  }] });
gauge.appendTo(‘#container’);
Marker Width Property: scales.pointers.width

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘marker’, width: 20 }]
  }] });		 Property: axes.pointers.markerWidth

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘marker’, markerWidth: 20 }]
  }] });
gauge.appendTo(‘#container’);
Marker Height Property: scales.pointers.length

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘marker’, length: 25 }]
  }] });		 Property: axes.pointers.markerHeight

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘marker’, markerHeight: 25 }]
  }] });
gauge.appendTo(‘#container’);
Marker Image Property: scales.pointers.imageUrl

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{ type: ‘marker’, imageUrl: “football.png” }]
  }] });		 Property: axes.pointers.imageUrl

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘marker’, imageUrl: “football.png” }]
  }] });
gauge.appendTo(‘#container’);
Border Customization Property: scales.pointers.border

$(“#container”).ejCircularGauge({
  scales:[{
    pointers: [{
      type: ‘marker’,
      border: { color: ‘red’, width: 2 } }]
  }] });		 Property: axes.pointers.border

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{
      type: ‘marker’,
      border: { color: ‘red’, width: 2 } }]
  }] });
gauge.appendTo(‘#container’);

Rangebar Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Rangebar Not Applicable Property: axes.pointers.type

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘RangeBar’ }]
  }] });
gauge.appendTo(‘#container’);
Rounded Corner Radius Not Applicable Property: axes.pointers.roundedCornerRadius

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    pointers: [{ type: ‘RangeBar’, roundedCornerRadius: 10 }]
  }] });
gauge.appendTo(‘#container’);

Annotations

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

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ value: ‘Lineargauge’ }]
  }] });		 Property: axes.annotations.content

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ content: ‘Annotation’ }]
  }] });
gauge.appendTo(‘#container’);
Angle Property: scales.customLabels.textAngle

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ textAngle: 90 }]
  }] });		 Property: axes.annotations.angle

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ angle: 90 }]
  }] });
gauge.appendTo(‘#container’);
Font Family Property: scales.customLabels.font.fontFamily

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ font: { fontFamily: “Arial” } }]
  }] });		 Property: axes.annotations.textStyle.fontFamily

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ textStyle: { fontFamily: “Arial” } }]
  }] });
gauge.appendTo(‘#container’);
Font Color Property: scales.customLabels.color

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ color : “red” }]
  }] });		 Property: axes.annotations.textStyle.color

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ textStyle: { color: “red” } }]
  }] });
gauge.appendTo(‘#container’);
Auto Angle Not Applicable Property: axes.annotations.autoAngle

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ autoAngle : true }]
  }] });
gauge.appendTo(‘#container’);
Radius Not Applicable Property: axes.annotations.radius

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ radius : “10%” }]
  }] });
gauge.appendTo(‘#container’);
Annotation Position Property: scales.customLabels.position

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ position : { x: 10, y: 10 } }]
  }] });		 Not Applicable
Annotation Position Type Property: scales.customLabels.positionType

$(“#container”).ejCircularGauge({
  scales:[{
    customLabels: [{ positionType : “outer” }]
  }] });		 Not Applicable
ZIndex Not Applicable Property: axes.annotations.zIndex

let gauge: CircularGauge = new CircularGauge({
  axes: [{
    annotations: [{ zIndex : ‘1’ }]
  }] });
gauge.appendTo(‘#container’);

Appearance

Behavior API in Essential JS 1 API in Essential JS 2
Title Not Applicable Property: title

let gauge: CircularGauge = new CircularGauge({
  title: ‘Circular Gauge’
});
gauge.appendTo(‘#container’);
Background Color Property: backgroundColor

$(“#container”).ejCircularGauge({
  backgroundColor : “red”
});		 Property: background

let gauge: CircularGauge = new CircularGauge({
  background : “red” </br> });
gauge.appendTo(‘#container’);
Localization Property: locale

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

let gauge: CircularGauge = new CircularGauge({
  locale : “en-US” </br> });
gauge.appendTo(‘#container’);
Border Not Applicable Property: border

let gauge: CircularGauge = new CircularGauge({
  border : { color: “red” , width: 2 } </br> });
gauge.appendTo(‘#container’);
Center of X Not Applicable Property: centerX

let gauge: CircularGauge = new CircularGauge({
  centerX : “120px” </br> });
gauge.appendTo(‘#container’);
Center of Y Not Applicable Property: centerY

let gauge: CircularGauge = new CircularGauge({
  centerY : “150px” </br> });
gauge.appendTo(‘#container’);
Theme Property: theme

$(“#container”).ejCircularGauge({
  theme : “flatlight”
});		 Property: theme

let gauge: CircularGauge = new CircularGauge({
  theme : “Material” </br> });
gauge.appendTo(‘#container’);
Margin Not Applicable Property: margin

let gauge: CircularGauge = new CircularGauge({
  margin: { left: 40, right: 40, top: 40, bottom: 40 } </br> });
gauge.appendTo(‘#container’);

Events

Behavior API in Essential JS 1 API in Essential JS 2
Annotation Event Event: drawCustomLabel

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

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

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

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

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

let gauge: CircularGauge = new CircularGauge({
  load: function(e: ILoadedEventArgs): void { }
});
gauge.appendTo(‘#container’);
Loaded Event Event: loaded

$(“#container”).ejCircularGauge({
  loaded: function (args) {}
});		 Event: loaded

let gauge: CircularGauge = new CircularGauge({
  loaded: function(e: ILoadedEventArgs): void { }
});
gauge.appendTo(‘#container’);
Tooltip Rendered Event Not Applicable Event: tooltipRender

let gauge: CircularGauge = new CircularGauge({
  tooltipRender: function(e: ITooltipRenderEventArgs): void { }
});
gauge.appendTo(‘#container’);
Resized Rendered Event Not Applicable Event: resized

let gauge: CircularGauge = new CircularGauge({
  tooltipRender: function(e: IResizeEventArgs): void { }
});
gauge.appendTo(‘#container’);
Animation Event Not Applicable Event: animationComplete

let gauge: CircularGauge = new CircularGauge({
  animationComplete: function(e: IAnimationCompleteEventArgs): void { }
});
gauge.appendTo(‘#container’);
Mousedown Event Event: mouseClick

$(“#container”).ejCircularGauge({
  mouseClick: function (args) {}
});		 Event: gaugeMouseDown

let gauge: CircularGauge = new CircularGauge({
  gaugeMouseDown: function(e: IMouseEventArgs): void { }
});
gauge.appendTo(‘#container’);
Mousemove Event Event: mouseClickMove

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

let gauge: CircularGauge = new CircularGauge({
  gaugeMouseLeave: function(e: IMouseEventArgs): void { }
});
gauge.appendTo(‘#container’);
Mouseup Event Event: mouseClickUp

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

let gauge: CircularGauge = new CircularGauge({
  gaugeMouseUp: function(e: IMouseEventArgs): void { }
});
gauge.appendTo(‘#container’);
Pointerdrag Move Event Event: drawPointers

$(“#container”).ejCircularGauge({
  drawPointers: function (args) {}
});		 Event: dragMove

let gauge: CircularGauge = new CircularGauge({
  dragMove: function(e: IMouseEventArgs): void { }
});
gauge.appendTo(‘#container’);
Draw Range Event Event: drawRange

$(“#container”).ejCircularGauge({
  drawRange: function (args) {}
});		 Not Applicable
Draw Ticks Event Event: drawTicks

$(“#container”).ejCircularGauge({
  drawTicks: function (args) {}
});		 Not Applicable
Legend Render Event Event: legendItemRender

$(“#container”).ejCircularGauge({
  legendItemRender: function (args) {}
});		 Not Applicable
Animation Complete Event Not Applicable Event: animationComplete

let gauge: CircularGauge = new CircularGauge({
  animationComplete: function(e: IAnimationCompleteEventArgs): void { }
});
gauge.appendTo(‘#container’);
Right Click Event Event: rightClick

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

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