kendo donut chart - single series with multiple labels

Question

I'm trying to create a donut chart that has one series, but two values associated with each item of the series, one is a % value, the other is a dollar value. I'd like to place the % value "position:center" and then let the category name and dollar value be the regular "outsideEnd" positioned label.

I've been reading the telerik documentation for days, and I'm now officially lost. Is this possible with UI for ASP.NET MVC?

basic mockup of desired result

ezanker ezanker · Accepted Answer · 2017-09-07T15:04:03

This is not supported out of the box as far as I am aware. However, you can use the series visual property to draw the segments with text on top.

Find the angle half way between start and end, and find the radius half way between inner and outer. Then use trigonometry to get from polar (angle and radius) to Cartesian (x and y) coordinates. You can tweak this to get the text placement you want.

e.createVisual() gets the segment

visual: function (e) {
  var mid = e.startAngle + (e.endAngle - e.startAngle) / 2;
  var rad = e.innerRadius + (e.radius - e.innerRadius) / 2
  var p = polarToCartesian(e.center.x, e.center.y, rad, mid);

  var group = new kendo.drawing.Group();
  var text = new kendo.drawing.Text(e.value, [p.x , p.y], {
      fill: {color:  "#111",}
    });

  group.append(e.createVisual());
  group.append(text);
  return group;
}

Polar to Cartesian:

  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees) * Math.PI / 180.0;

    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
  }

kendo donut chart - single series with multiple labels

1 Answers

DEMO