Search code examples
jquerykendo-uikendo-dataviz

Disable Kendo Chart Tooltip Animations


I want to get rid of the silly tooltip animation that slides the tooltip from one bar to another. It updates the tooltip instantly but lingers on the previous bar. I have tried the documenations transitions property on both the chart and the tooltip and neither has an affect.

$('.chart').kendoChart({
    transitions: false,
    series: [{
        name: "Gold Medals",
        data: [current.data("compliant-count")],
        color: "#f3ac32"
    }, {
        name: "Silver Medals",
        data: [current.data("noncompliant-count")],
        color: "#b8b8b8"
    },
    tooltip: {
         visible: true,
         template: "#= series.name #: #= value #",
         transitions: false
    }
});

Solution

  • I think the transitions configuration option only applies to the chart itself (bars etc.). You can disable the animation for the tooltip like this:

    var chart = $('#chart').kendoChart({
        transitions: false,
        series: [{
            name: "Gold Medals",
            data: [current.data("compliant-count")],
            color: "#f3ac32"
        }, {
            name: "Silver Medals",
            data: [current.data("noncompliant-count")],
            color: "#b8b8b8"
        },
        tooltip: {
             visible: true,
             template: "#= series.name #: #= value #"
        }
    }).data("kendoChart");
    chart._tooltip.options.animation.duration = 0;
    

    (demo)

    You can achieve the same for all chart tooltips by changing the default options before creating the charts:

    kendo.dataviz.Tooltip.fn.options.animation.duration = 0;
    

    Completely eliminating the effect of the content changing before the tooltip is moved would require changes in the source code of kendo.dataviz.Tooltip.