This is a migrated thread and some comments may be shown as answers.

Last tooltip

1 Answer 103 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Egor
Top achievements
Rank 1
Egor asked on 21 Aug 2017, 12:55 PM

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>

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 23 Aug 2017, 09:18 AM
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
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.
Tags
Charts
Asked by
Egor
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or