Vue
Demos
Support
Forum
Download
Search results

User Interaction

Tooltip

Circular gauge will displays the pointer details through tooltip, when the mouse is moved over the pointer.

Enable Tooltip

By default, tooltip is not visible. Enable the tooltip by setting enable property to true and injecting GaugeTooltip module using CircularGauge.Inject(GaugeTooltip) method.

Note: To use tooltip, we need to refer the gauge CSS file in our web page. Tooltip CSS files are available in the ej2-circulargauge package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

@import '../../node_modules/@syncfusion/ej2-circulargauge/styles/material.css';
Source
Preview
app.vue
<template>
  <div id="app">
      <div class='wrapper'>
    <ejs-circulargauge   :tooltip='tooltip' >
    <e-axes>
      <e-axis >
        <e-pointers>
           <e-pointer value=70 ></e-pointer>
    </e-pointers>
    </e-axis>
    </e-axes>
    </ejs-circulargauge>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CircularGaugePlugin, GaugeTooltip } from "@syncfusion/ej2-vue-circulargauge";

Vue.use(CircularGaugePlugin);
export default {
      data: function () {
          return{
            tooltip: {
               enable: true
            }
          }
    },
     provide: {
       circulargauge: [ GaugeTooltip]
     },
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-circulargauge/styles/material.css";
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }
</style>

Template

Any HTML elements can be displayed in the tooltip by using the template property of the tooltip.

Source
Preview
app.vue
<template>
   <div id="app">
      <div class='wrapper'>
    <ejs-circulargauge   :tooltip='tooltip' >
    <e-axes>
      <e-axis >
        <e-pointers>
           <e-pointer value=70 ></e-pointer>
    </e-pointers>
    </e-axis>
    </e-axes>
    </ejs-circulargauge>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CircularGaugePlugin, GaugeTooltip } from "@syncfusion/ej2-vue-circulargauge";

Vue.use(CircularGaugePlugin);
export default {
      data: function () {
          return{
            tooltip: {
               enable: true,
               template: '<div>Pointer: 70 </div>'
            }
          }
    },
     provide: {
       circulargauge: [ GaugeTooltip]
     },
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-circulargauge/styles/material.css";
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }
</style>

Pointer Drag

Pointers can be dragged over the axis value. This can be achieved by clicking and dragging the pointer. To enable or disable the pointer drag, you can use enablePointerDrag property.

Source
Preview
app.vue
<template>
   <div id="app">
      <div class='wrapper'>
    <ejs-circulargauge id='tooltip-container' enablePointerDrag= 'enablePointerDrag' :tooltipRender='tooltipRender' :tooltip='tooltip' >
    <e-axes>
      <e-axis >
        <e-pointers>
           <e-pointer value=70 ></e-pointer>
    </e-pointers>
    </e-axis>
    </e-axes>
    </ejs-circulargauge>
  </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CircularGaugePlugin, GaugeTooltip } from "@syncfusion/ej2-vue-circulargauge";

Vue.use(CircularGaugePlugin);
export default {
      data: function () {
          return{
              enablePointerDrag: true
            tooltip: {
               enable: true,
               template: '<div id='templateWrap'><div class='des'>pointer <span>${Math.round(value)} </span></div></div>'
            }
          }
    },
     provide: {
       circulargauge: [ GaugeTooltip]
     },
        methods:{
         tooltipRender: function (args) {
            let cotainerObj = document.getElementById('tooltip-container');
            let value = args.pointer.currentValue;
            debugger;
            cotainerObj.ej2_instances[0].setPointerValue(0, 0, value);
            }
        }
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-circulargauge/styles/material.css";
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }
#templateWrap .des {
    float: right;
    padding-left: 10px;
    line-height: 30px;
}
</style>

changes

Source
Preview
app.vue
<template>
<div id="app">
      <div class='wrapper'>
        <ejs-circulargauge style='display:block' align='center' id='tooltip-container' :title='title' :titleStyle='titleStyle' :enablePointerDrag='enablePointerDrag' :tooltipRender='tooltipRender' :tooltip='tooltip'>
            <e-axes>
                <e-axis :radius='gaugeradius' :startAngle='startAngle' minimum=0 maximum=120 :endAngle='endAngle' :majorTicks='majorTicks' :lineStyle='lineStyle' :minorTicks='minorTicks' :labelStyle='labelStyle' :ranges='ranges'>
                    <e-pointers>
                        <e-pointer :value='value' :cap='cap' :radius='pointerRadius' :color='color' :animation='animation'></e-pointer>
                    </e-pointers>
                </e-axis>
            </e-axes>
        </ejs-circulargauge>
    </div>
</div>
</template>

<script>
import Vue from 'vue';
import {CircularGaugePlugin, GaugeTooltip } from "@syncfusion/ej2-vue-circulargauge";
Vue.use(CircularGaugePlugin);
export default {
    data: function () {
        return {
            title: 'Tooltip Customization',
            titleStyle: {
                size: '15px',
                color: 'grey'
            },
            gaugeradius: '90%',
            startAngle: 240,
            endAngle: 120,
            lineStyle: {
                width: 0
            },
            majorTicks: {
                color: 'white',
                offset: -5,
                height: 12
            },
            minorTicks: {
                width: 0
            },
            labelStyle: {
                useRangeColor: true,
                font: {
                    color: '#424242',
                    size: '13px',
                    fontFamily: 'Roboto'
                }
            },
            value: 70,
            pointerRadius: '60%',
            color: '#33BCBD',
            cap: {
                radius: 10,
                border: {
                    color: '#33BCBD',
                    width: 5
                }
            },
            animation: {
                enable: true,
                duration: 1500
            },
            ranges: [{
                start: 0,
                end: 50,
                startWidth: 10,
                endWidth: 10,
                radius: '102%',
                color: '#3A5DC8',
            }, {
                start: 50,
                end: 120,
                radius: '102%',
                startWidth: 10,
                endWidth: 10,
                color: '#33BCBD',
            }],
            tooltip: {
                enable: true,
                fill: 'transparent',
                template: "<div id='templateWrap'><img src='src/circulargauge/images/range1.png'/><img src='src/circulargauge/images/range3.png'/><div class='des'><span>${Math.round(pointers[0].value)} MPH</span></div></div>",
                border: {
                    color: '#33BCBD',
                    width: 2
                }
            },
            enablePointerDrag: true
        }
    },
    provide: {
        circulargauge: [GaugeTooltip]
    },
    methods: {
        load: function (args) {
            let selectedTheme = location.hash.split("/")[1];
            selectedTheme = selectedTheme ? selectedTheme : "Material";
            args.gauge.theme =
                selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1);
        },
        tooltipRender: function (args) {
            let color;
            let cotainerObj = document.getElementById('tooltip-container');
            let value = args.pointer.currentValue;
            debugger;
            let content = args.content;
            if (value >= 0 && value <= 50) {
                let color = '#3A5DC8';
                content.children[1].remove();
                args.textStyle.color = color;
                args.border.color = color;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].animation.enable = false;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].color = color;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].cap.border.color = color;
                cotainerObj.ej2_instances[0].setPointerValue(0, 0, value);
            } else {
                let color = '#33BCBD';
                content.children[0].remove();
                args.textStyle.color = color;
                args.border.color = color;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].animation.enable = false;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].color = color;
                cotainerObj.ej2_instances[0].axes[0].pointers[0].cap.border.color = color;
                cotainerObj.ej2_instances[0].setPointerValue(0, 0, value);
            }
        }
    }
};
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-vue-circulargauge/styles/material.css";
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
  }
#templateWrap img {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

#templateWrap .des {
    float: right;
    padding-left: 10px;
    line-height: 30px;
}
</style>
Previous
Next