Last tooltip

2 posts, 0 answers
  1. Egor
    Egor avatar
    8 posts
    Member since:
    Aug 2017

    Posted 21 Aug 2017 Link to this post

    Hello, i want to make last tooltip in series always visible, regardless of the hover effect. I found how to make all tooltips always visible, but it does`t help. Pls help me

    my code:

     var stats1 = [
    "value": 15,
    "value": 13,
        function createChart() {
                title: {
                    text: ""
                dataSource: {
                    data: stats1
                seriesDefaults: {
                        type: "area"
                series: [{
                    type: "area",
                    field: "value",
                categoryAxis: [{
                    labels: {
                        format: "d/M/yyyy",
                        rotation: -90
                    field: "date",
                    baseUnit: "days",
                   axisCrossingValues: [100]
                valueAxis: {
                        labels: {
                            format: "N0"
                 tooltip: {
                        visible: true,
                        format: "{0}%",
                        template: "#= kendo.format('{0:dd/MM/yyyy}',category) #: #= value #"
  2. Preslav
    Preslav avatar
    312 posts

    Posted 23 Aug 2017 Link to this post

    Hi Egor,

    I understand that this functionality might be important for your project, unfortunately, the Chart does not provide it out of the box at this stage.

    To achieve this behavior, what I suggest is displaying all the tooltips and hiding every single one of them except for the last. For example:
    1. Set the seriesDefaults.labels.visible configuration to true to display all the labels.
    2. Handle the render event.
    3. In the event handler, select all the tooltips except for the last one via jQuery.
    4. Loop through the tooltips and hide them.

    For example, the code could look like:

    render: function(e) {
      var tooltips = e.sender.element.find("g[opacity = 0]").not(":last");
    seriesDefaults: {
      type: "area",
      labels: {
        visible: true

    For a runnable example, check this Dojo:

    I hope this helps.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top