Render External Chart Legend with AngularJS
Environment
| Product Version | 2018.1.221 |
| Product | Progress® Kendo UI® Chart for jQuery |
Starting with R2 2022, the Kendo UI team officially drops the support for AngularJS 1.x through Kendo UI for jQuery. The AngularJS related files and functionality are removed from the bundles and distribution in R3 SP1 2023. The last version that contains the files is R3 2023.
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:
-
mouseenterandmouseleaveevents of the external legend items to achieve the series highlight effect. -
clickevent of the external legend to toggle the visibility of the series.
The example loads Kendo UI 2023.3.1010 version.
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<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>