syncfusion-vue-linear-gauge

Implementing Linear Gauge

The Linear Gauge is a Syncfusion Vue component for visualizing numerical values along a linear axis. It renders using SVG for high performance and supports multiple pointers, ranges, annotations, and interactive features like drag-and-drop and tooltips.

When to Use Linear Gauge

• Measurement displays: Temperature, pressure, speed, battery level
• Dashboard metrics: KPIs displayed as gauge indicators
• Real-time monitoring: Updates to pointer values as data changes
• Multi-level indicators: Multiple pointers showing different metrics on same axis
• Annotated ranges: Highlighting safe/warning/danger zones

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and setup
• Basic component initialization
• Vue 3 and Vue 2 compatibility
• Theming and CSS imports
• First working example

Axis Configuration

📄 Read: references/axis-configuration.md

• Axis properties (min, max, interval, line style)
• Label formatting and positioning
• Axis ranges (visible range)
• RTL support
• Multiple axes

Pointers and Ranges

📄 Read: references/pointers-and-ranges.md

• Marker pointers (shape, size, position)
• Bar pointers (width, offset)
• Range bars and ranges
• Color styling for different elements
• Performance with multiple elements

Annotations and Customization

📄 Read: references/annotations-and-customization.md

• Adding text and HTML annotations
• Annotation positioning and alignment
• CSS class customization
• Dynamic style updates
• Theme integration

Interactions and Events

📄 Read: references/interactions-and-events.md

• Pointer drag-and-drop functionality
• Tooltip configuration
• Event handling (valueChange, drag, resize)
• Animation behavior
• Print and export functionality

Advanced Features

📄 Read: references/advanced-features.md

• Animation configuration
• Internationalization (i18n) support
• Accessibility compliance (WCAG, ARIA)
• Component methods and references
• Performance optimization
• Browser compatibility

Troubleshooting

📄 Read: references/troubleshooting.md

• Common issues and solutions
• Data binding and updates
• Event handling gotchas
• Styling and CSS issues
• Known limitations

Quick Start Example

<template>
  <ejs-lineargauge id="linearGauge" :axes="axes" :pointers="pointers">
  </ejs-lineargauge>
</template>

<script>
import { LinearGaugeComponent as EjsLineargauge, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-vue-gauges';

export default {
  components: {
    'ejs-lineargauge': EjsLineargauge,
    'e-axes': AxesDirective,
    'e-axis': AxisDirective,
    'e-pointers': PointersDirective,
    'e-pointer': PointerDirective
  },
  data() {
    return {
      axes: [{
        minimum: 0,
        maximum: 100,
        line: { width: 2 },
        pointers: [{
          value: 60,
          type: 'Marker',
          markerType: 'Triangle',
          width: 15,
          border: { width: 2, color: '#F8F8F8' },
          color: '#F262CC'
        }],
        ranges: [{
          start: 0,
          end: 35,
          color: '#3DA58A'
        }, {
          start: 35,
          end: 70,
          color: '#FDD835'
        }, {
          start: 70,
          end: 100,
          color: '#F6464F'
        }]
      }],
      pointers: []
    };
  }
};
</script>

Common Patterns

Pattern 1: Update Pointer Value Programmatically

// Get gauge instance and update pointer value
const gauge = document.getElementById('linearGauge').ej2_instances[0];
gauge.setPointerValue(0, 0, 75); // axis index, pointer index, new value

Pattern 2: Multiple Pointers on Same Axis

data() {
  return {
    axes: [{
      minimum: 0,
      maximum: 100,
      pointers: [
        {
          value: 45,
          type: 'Marker',
          markerType: 'Triangle',
          color: '#FF0000'
        },
        {
          value: 70,
          type: 'Bar',
          width: 8,
          color: '#00FF00'
        }
      ]
    }]
  };
}

Pattern 3: Reactive Data Binding

<template>
  <div>
    <input v-model.number="pointerValue" type="range" min="0" max="100">
    <ejs-lineargauge :axes="axes"></ejs-lineargauge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pointerValue: 50,
      axes: [{
        minimum: 0,
        maximum: 100,
        pointers: [{
          value: this.pointerValue,
          type: 'Marker'
        }]
      }]
    };
  },
  watch: {
    pointerValue(newVal) {
      const gauge = document.getElementById('linearGauge').ej2_instances[0];
      gauge.setPointerValue(0, 0, newVal);
    }
  }
};
</script>

Key Props and Configuration

Prop	Purpose	Common Values
minimum	Axis lower bound	0, -50, -100
maximum	Axis upper bound	100, 50, 360
interval	Tick mark interval	10, 20, 25, 50
type	Pointer shape	'Marker' | 'Bar'
markerType	Marker appearance	'Circle' | 'Triangle' | 'Diamond' | 'Rectangle'
value	Pointer position	0-100 (numeric)
width	Pointer thickness	2-20 (pixels)
color	Fill color	'#FF0000', 'red'
startValue	Range start	numeric value
endValue	Range end	numeric value