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

Render External Chart Legend with AngularJS


Product Version 2018.1.221
Product Progress® Kendo UI® Chart for jQuery


The external legend example uses jQuery.

How can I render an external legend in the Kendo UI Chart in AngularJS?


In an AngularJS page, use the ng-repeat directive to render the external legend and add event handlers for:

  • mouseenter and mouseleave events of the external legend items to achieve the series highlight effect.
  • click event of the external legend to toggle the visibility of the series.
      .chart-legend {
        text-align: center;
      .legend-item {
        font: 12px sans-serif;
        margin: 12px;
        cursor: pointer;

      .legend-item .legend-marker {
        display: inline-block;
        width: 8px;
        height: 8px;
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <div class="demo-section k-content wide">
          <div class="chart-legend">
            <span ng-repeat="x in series" class="legend-item" ng-mouseenter="onMouseEnter($event)" ng-mouseleave="onMouseLeave($event)" ng-click="onLegendClick($event)">
              <span class="legend-marker" ng-style="{background: x.color}">
          <div kendo-chart="chart"
               k-legend="{ visible: false }"
               k-series-defaults="{ type: 'column', categoryField: 'ProductName' }"
                         { field: 'UnitPrice', name: 'UnitPrice' },
                         { field: 'UnitsInStock', name: 'UnitsInStock' }
               k-category-axis="{labels: {rotation: 45}}"
               k-tooltip="{visible: true, template: ' #:value#'}"
               style="height: 450px;"></div>

        angular.module("KendoDemos", ["kendo.directives"])
          .controller("MyCtrl", function ($scope) {
          $scope.series = [];
          $scope.productsData = new{
            transport: {
              read: {
                url: "",
                dataType: "jsonp"
            pageSize: 10
          $scope.onRender = function (e) {
            // create a list of the Chart series to bind the legend to
            $scope.series = e.sender.options.series;
          $scope.onMouseEnter = function (e) {
            var name = e.currentTarget.innerText.trim();
            var series = $scope.chart.findSeriesByName(name);

          $scope.onMouseLeave = function (e) {
            var name = e.currentTarget.innerText.trim();
            var series = $scope.chart.findSeriesByName(name);

          $scope.onLegendClick = function (e) {
            var name = e.currentTarget.innerText.trim();
            var series = $scope.chart.findSeriesByName(name);


See Also

In this article