Last tooltip

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

    Posted 21 Aug 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:

    <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>
  2. Preslav
    Admin
    Preslav avatar
    225 posts

    Posted 23 Aug 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.
      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.
Back to Top