KendoUI change series label color of Donut chart to series color
Question
I am working with kendoUI and angular. I have a Kendo Donut chart as follows.
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="{height: 325, width: 480}"
k-series="[{ type: 'donut',
field: 'percentage',
labels: {visible: true, template: '${value} ${category} ${dataItem.color}', position: 'outsideEnd', font: '15px Lato-Regular'},
categoryField: 'source',
explodeField: 'explode'}]"
k-series-click="actionChartClick" k-data-source="actionChartData">
I want to have the series label color as the series color. In the template, I can access the template color by ${dataItem.color}
I tried setting,
k-series="[{ ...
labels: {visible: true, template: '${value} ${category}', position: 'outsideEnd', font: '15px Lato-Regular', color: '${dataItem.color}'}"
But that didn't work. Can anyone guide me on where I should change?
2 answers
solution1
2 2016-10-08 08:47:13
Use seriesDefaults.labels.color or series.labels.color and return the desired color value from a function. You will have access to the series and dataItem in the function's argument.
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.color
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/donut-charts/donut-labels"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> </head> <body> <div id="chart"></div> <script> $(function() { $("#chart").kendoChart({ title: { text: "What is you favourite sport?" }, legend: { position: "top" }, seriesDefaults: { labels: { template: "#= category # - #= kendo.format('{0:P}', percentage)#", position: "outsideEnd", visible: true, background: "transparent", color: function(e) { // e.series // e.dataItem if (e.category == "Football") { return "#000"; } else { return e.series.color; } } } }, series: [{ type: "donut", labels: { /*color: function(e) { // e.series // e.dataItem if (e.category == "Football") { return "#f00"; } else { return e.series.color; } }*/ }, data: [{ category: "Football", value: 35 }, { category: "Basketball", value: 25 }, { category: "Volleyball", value: 20 }, { category: "Rugby", value: 10 }, { category: "Tennis", value: 10 }] }], tooltip: { visible: true, template: "#= category # - #= kendo.format('{0:P}', percentage) #" } }); }); </script> </body> </html>
solution2
1 ACCPTED 2016-10-08 08:38:24
I found a solution. This can be achieved by using k-options.
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="{height: 325, width: 480}"
k-series="[{ type: 'donut',
field: 'percentage',
labels: {visible: true, template: '${value} ${category} ${dataItem.color}', position: 'outsideEnd', font: '15px Lato-Regular'},
categoryField: 'source',
explodeField: 'explode'}]"
k-series-click="actionChartClick" k-data-source="actionChartData"
k-options="chartOptions">
In the controller have following:
$scope.chartOptions = {
dataBound: function(e) {
e.sender.options.series[0].labels.color = function(element) {
return element.dataItem.color;
}
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.