Last tooltip

[Egor]

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:

<script>
 var stats1 = [
{
"value": 15,
"date":"24/01/16"
},
{
"value": 13,
"date":"26/01/16"
}
];

    function createChart() {
        $("#chart1").kendoChart({
            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 #"
                }

        });
    }
    $(document).ready(createChart);
    </script>

[Preslav]

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.
   http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-seriesDefaults.labels.visible
2. Handle the render event.
   http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-render
3. In the event handler, select all the tooltips except for the last one via jQuery.
   http://api.jquery.com/not/
4. Loop through the tooltips and hide them.
   http://api.jquery.com/hide/

For example, the code could look like:

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

For a runnable example, check this Dojo: http://dojo.telerik.com/IkOkeK

I hope this helps.


Regards,
Preslav
Progress Telerik