CODEWITHSUNDEEP
javascriptangularjskendo-uikendo-chart
Rumesh Eranga Hapuarachchi
Rumesh Eranga Hapuarachchi

Reputation: 2576

KendoUI change series label color of Donut chart to series color

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?

Upvotes: 2

Views: 3336

Answers (2)

dimodi
dimodi

Reputation: 4139

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>

Upvotes: 2

Rumesh Eranga Hapuarachchi
Rumesh Eranga Hapuarachchi

Reputation: 2576

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;
                    }
                }
            };

Upvotes: 1

Related Questions