New to Kendo UI for jQuery? Download free 30-day trial

Show Tooltip for Chart Notes

Environment

Product Progress® Kendo UI® Chart for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I attach a Kendo UI Tootlip to the Chart notes and display it when a note is hovered?

Solution

You can attach a Kendo UI Drawing Tootlip to Kendo UI Chart notes and display it when a note is hovered.

The following example demonstrates how to achieve this behavior.


    <div id="chart"></div>
    <script>
       var grandSlam = [{
        "year": "2003",
        "win": 13,
        "extremum": "MIN: 13",
        "loss": 3
      },{
        "year": "2004",
        "win": 22,
        "loss": 1
      },{
        "year": "2005",
        "win": 24,
        "loss": 2
      },{
        "year": "2006",
        "win": 27,
        "extremum": "MAX: 27",
        "loss": 1
      },{
        "year": "2007",
        "win": 26,
        "loss": 1
      },{
        "year": "2008",
        "win": 24,
        "loss": 3
      },{
        "year": "2009",
        "win": 26,
        "loss": 2
      },{
        "year": "2010",
        "win": 20,
        "loss": 3
      },{
        "year": "2011",
        "win": 20,
        "loss": 4
      },{
        "year": "2012",
        "win": 19,
        "loss": 3
      }];

      $("#chart").kendoChart({
        dataSource: {
          data: grandSlam
        },
        title: {
          text: "Roger Federer Grand Slam tournament performance"
        },
        legend: {
          position: "bottom"
        },
        seriesDefaults: {
          type: "line"
        },
        series: [{
          field: "win",
          name: "Wins",
          noteTextField: "extremum",
          notes: {
            label: {
              position: "outside"
            },
            position: "bottom",
            visual: function(e) {
                // The original note visual
                var visual = e.createVisual();

                // Set the drawing tooltip options
                // https://demos.telerik.com/kendo-ui/drawing/tooltip
                visual.options.tooltip = {
                    content: e.value
                };

                return visual;
            }
          }
        },{
          field: "loss",
          name: "Losses"
        }],
        valueAxis: {
          line: {
            visible: false
          }
        },
        categoryAxis: {
          field: "year",
          majorGridLines: {
            visible: false
          }
        }
      });

    </script>

See Also

In this article