Kendo UI RadialGauge add custom tool-tip on pointe

Question

I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot

Answer 1

There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:

In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element

$("#gauge").kendoRadialGauge({
    pointer: {
        value: $("#gauge-value").val(),
        color: "rgba(255,102,0,.999)"
    },
    scale: {
        minorUnit: 5,
        startAngle: -30,
        endAngle: 210,
        max: 180
    }
});

Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.

var tooltip = $('#gauge').kendoTooltip({
    filter: '[fill="rgba(255,102,0,.999)"]',
    position: "center",
    content: $("#gauge").data("kendoRadialGauge").value(),
    show: function(e) {
      e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
      e.sender.refresh();
    }
}).data("kendoTooltip");

Here is a dojo DEMO