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

Render External Chart Legend with AngularJS

Environment

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

Description

The external legend example uses jQuery.

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

Solution

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.
    <style>
      .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;
      }
    </style>
    <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}">
              </span>
              <span>{{x.name}}</span>
            </span>
          </div>
          <div kendo-chart="chart"
               k-legend="{ visible: false }"
               k-series-defaults="{ type: 'column', categoryField: 'ProductName' }"
               k-series="[
                         { field: 'UnitPrice', name: 'UnitPrice' },
                         { field: 'UnitsInStock', name: 'UnitsInStock' }
                         ]"
               k-category-axis="{labels: {rotation: 45}}"
               k-data-source="productsData"
               k-tooltip="{visible: true, template: '#:series.name#: #:value#'}"
               k-on-render="onRender(kendoEvent)"
               style="height: 450px;"></div>
        </div>

      </div>
      <script>
        angular.module("KendoDemos", ["kendo.directives"])
          .controller("MyCtrl", function ($scope) {
          $scope.series = [];
          $scope.productsData = new kendo.data.DataSource({
            transport: {
              read: {
                url: "https://demos.telerik.com/kendo-ui/service/Products",
                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);
            series.toggleHighlight(true);
          };

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

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

            series.toggleVisibility(!series._options.visible);
          };
        })
      </script>
    </div>

See Also

In this article